• jQuery常用API--选择器

    1.jQuery选择器

    1.1 jQuery 基础选择器

    我们都知道，元素JS获取元素的方式很多，很杂，而且兼容性情况不一致，因此jQuery 给我们做了封装，使获取元素统一标准。

    $("选择器")  //  里面的选择器直接写CSS选择器即可，但是要加引号，如 $("#id")，常用基础选择器如下图：

    1.2 层级选择器

    常用的层级选择器就是子代选择器和后代选择器，其使用方法依旧和CSS选择器保持一致。

    1.3 筛选选择器

     需求：从所有元素中筛选出对应的元素，并为其添加样式。

    1. <body>
    2.     <ul>
    3.         <li>多个里面筛选几个1</li>
    4.         <li>多个里面筛选几个2</li>
    5.         <li>多个里面筛选几个3</li>
    6.         <li>多个里面筛选几个4</li>
    7.         <li>多个里面筛选几个5</li>
    8.         <li>多个里面筛选几个6</li>
    9.     </ul>
    10.     <ol>
    11.         <li>多个里面筛选几个1</li>
    12.         <li>多个里面筛选几个2</li>
    13.         <li>多个里面筛选几个3</li>
    14.         <li>多个里面筛选几个4</li>
    15.         <li>多个里面筛选几个5</li>
    16.         <li>多个里面筛选几个6</li>
    17.     </ol>
    18.     <script>
    19.         $(function() {
    20.             $('ul li:first').css('color', 'red'); // 选出ul里面的第一个小li
    21.             $('ul li:last').css('background', 'red'); // 选出ul里面的最后一个小li
    22.             // 选出ul里面的第3个小li  这里的eq(2)指的是索引，从0开始
    23.             $('ul li:eq(2)').css('background', 'skyblue'); 
    24.             // 选出ol里面的所有索引号为奇数的小li  odd指的是索引为奇数，从0开始
    25.             $('ol li:odd').css('color', 'green'); 
    26.             // 选出ol里面的所有索引号为偶数的小li  even指的是索引为偶数，从0开始
    27.             $('ol li:even').css('color', 'pink'); 
    28.         })
    29.     </script>
    30. </body>

    1.4 jQuery 筛选方法（重点）

     

    1. <body>
    2.     <div class="grandfather">
    3.         <div class="father ww">
    4.             <div class="son">儿子</div>
    5.         </div>
    6.     </div>
    7.     <div class="nav">
    8.         <p>我是谁</p>
    9.         <div class="one">
    10.             <p>我是p</p>
    11.             <span>你才是p</span>
    12.         </div>
    13.         <span>哈哈哈哈</span>
    14.         <span>6666</span>
    15.         <span>5555....</span>
    16.     </div>
    17.     <script>
    18.         // 注意一下都是方法 要带()
    19.         $(function() {
    20.             // 1. 父 parent()  返回的是 最近一层的父级元素 亲爸爸
    21.             console.log($('.son').parent());
    22.  
    23.             // 2. 子
    24.             // (1) 亲儿子  children()  相当于子代选择器 ul>li
    25.             $('.nav').children('p').css('color', 'red');
    26.             // (2) 可以选里面所有的孩子  包括儿子和孙子  find()  相当于后代选择器  ul li
    27.             $('.nav').find('p').css('background', 'skyblue')
    28.  
    29.             // 3. 兄弟姐妹  siblings()  除了自身之外的所有亲兄弟
    30.             $('.one').siblings('span').css('color', 'pink') // 会把所有兄弟（同辈）span都找出来
    31.  
    32.             // 4. 同辈元素  
    33.             // (1) nextAll()  查找当前元素之后所有的同辈元素 
    34.             $('.nav').children('p').nextAll().css('font-weight', '700');
    35.             // (2) prevAll()  查找当前元素之前所有的同辈元素 (同辈元素里面的子元素也会被选出来)
    36.             $('.nav>span:last').prevAll().css('color', 'blue');
    37.             console.log($('.nav>span:last').prevAll());
    38.  
    39.             // 5. hasClass()  检查当前元素是否存在某个类， 不用加·    如果有则返回true
    40.             console.log($('.father').hasClass('ww')); // true
    41.             console.log($('.father').children('div').hasClass('son')); // true
    42.         })
    43.     </script>
    44. </body>

    注意：以上这些都是筛选方法，所以使用的时候，千万别忘了()。

    2.隐式迭代和链式编程

    2.1 隐式迭代（重要）

    在原生JS中我们如果想要给很多元素添加一样的样式或者绑定同一事件，往往都需要经过for循环遍历才可实现。

    而jQuery则把遍历内部DOM元素（伪数组形式存储）的过程叫做隐式迭代。简单的说就是把通过选择器或者筛选方法匹配到的所有元素进行循环遍历，执行相应的方法，这些操作是隐秘进行的，而我们只需要直接调用即可，无需再进行循环操作，从而大大提高了效率。

    1. <body>
    2.     <div>惊喜不，意外不</div>
    3.     <div>惊喜不，意外不</div>
    4.     <div>惊喜不，意外不</div>
    5.     <div>惊喜不，意外不</div>
    6.     <ul>
    7.         <li>相同的操作</li>
    8.         <li>相同的操作</li>
    9.         <li>相同的操作</li>
    10.     </ul>
    11.     <script>
    12.         // 1. 获取四个div元素
    13.         console.log($("div"));  // $("div") 获取到的就是页面中所有的div元素
    14.         // 2. 给四个div 设置背景颜色为粉色 jquery对象不能使用style
    15.         $("div").css('background', 'pink');
    16.         // 3. 隐式迭代就是把匹配到的所有元素内部进行遍历循环，给每一个元素添加css这个方法 
    17.         // 前提是：执行相同的操作
    18.         $('ul li').css('color', 'red');
    19.     </script>
    20. </body>

    总之：隐式迭代就是把匹配到的所有元素内部进行遍历循环，让每一个元素执行相同的操作

    2.2 链式编程 

    链式编程的目的：为了节省代码量，以及看起来更优雅。

    1. // 需求：点击对应按钮，该按钮的背景色变为天蓝色，其余按钮不变色
    2. <body>
    3.     <button>快速</button>
    4.     <button>快速</button>
    5.     <button>快速</button>
    6.     <button>快速</button>
    7.     <button>快速</button>
    8.     <button>快速</button>
    9.     <button>快速</button>
    10.     <button>快速</button>
    11.     <script>
    12.         $(function() {
    13.             // 1. 利用隐式迭代 给所有的按钮都绑定了点击事件
    14.             $('button').click(function() {
    15.                 // 2. 让当前元素背景色变为天蓝色
    16.                 // $(this).css('background', 'skyblue');
    17.                 // 3. 让其余的姐妹元素不变色
    18.                 // $(this).siblings().css('background', '');
    19.  
    20.                 // 使用链式编程实现，更简洁美观
    21.                 $(this).css('background', 'skyblue').siblings().css('background', '');
    22.             })
    23.         })
    24.     </script>
    25. </body>

    注意：使用链式编程一定要注意是哪个对象执行样式。

  • 相关阅读:
    基于 Python 的课程助教智能聊天机器人
    Spring Cloud Alibaba现在还值不值学 ？
    【暑期每日一题】洛谷 P7222 [RC-04] 信息学竞赛
    Vscode GDB 查看内存的值
    前端项目打包成docker镜像报错：Module not found: Can't resolve '@/app/components/admin/AdminApp'
    机器人过程自动化(RPA)入门 5. 处理应用程序中的控件
    接口回调 and 注解
    手撕IP核系列——Xilinx FIFO IP核-同步FIFO
    安卓gradle使用
    python使用doris教程
  • 原文地址：https://blog.csdn.net/JJ_Smilewang/article/details/125508120