jQuery（2）选择器及案例

亦凉 2022-12-29 02:11 137阅读 0赞

## 1.jq 的基础选择器 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQwMTAwNA_size_16_color_FFFFFF_t_70_pic_center]

<body>
        <div>我是div</div>
        <div class="nav">我是nav div</div>
        <p>我是p</p>
        <ol>
            <li>我是ol 的</li>
            <li>我是ol 的</li>
            <li>我是ol 的</li>
            <li>我是ol 的</li>
        </ol>
        <ul>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
            <li>我是ul 的</li>
        </ul>
        <script>
            $(function() {//页面加载完毕
                //打印ul 里面 的li
                console.log($('ul li'));
            })
        </script>
    </body>

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法 描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>子代选择器</td> 
   <td>$('ul&gt;li"); 使用&gt; 获取亲儿子层级元素 注意不会获取孙子层级的元素</td> 
  </tr> 
  <tr> 
   <td>后代选择器</td> 
   <td>$(“ul li”); 使用空格 ，代表后代选择器 包括孙子</td> 
  </tr> 
 </tbody> 
</table>

## 2.隐式迭代 ##

不需要进行for循环，Jquery内部进行遍历

<body>
        <div>惊喜不，意外不</div>
        <div>惊喜不，意外不</div>
        <div>惊喜不，意外不</div>
        <div>惊喜不，意外不</div>
        <ul>
            <li>相同的操作</li>
            <li>相同的操作</li>
            <li>相同的操作</li>
        </ul>
        <script>
            // 1. 获取四个div元素 
            console.log($("div"));
    
            // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style   原生用法：div.style.background-pink='pink'
            //原生Js的方法是利用queryselector得到第一个div,再改变其样式，要么就是利用queryselectorall得到div数组，用div[0]进行添加方法
            $("div").css("background", "pink");
    
            // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
            //原生的js 需要 queryselectorall  得到所有，然后for 循环遍历 用index分别进行添加方法
            $("ul li").css("color", "red");//这里是所有div都添加红色属性
        </script>
    </body>

## 筛选选择器 ##

<body> <ul> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> </ul> <ol> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> </ol> <script> $(function() { //文档加载完后再执行
                $("ul li:first").css("color", "red");//第一个
                $("ul li:last").css("color","pink");//最后一个
                //:eq(index) 索引号
                $("ul li:eq(2)").css("color", "blue");//第三个 0 1 2 
                $("ol li:odd").css("color", "skyblue");//索引号是奇数的
                $("ol li:even").css("color", "pink");//索引号是偶数的
            })
        </script>
    </body>

## 筛选方法-获取父子元素(选择方法） ##

<body> <div class="yeye"> <div class="father"> <div class="son">儿子</div> </div> </div> <div class="nav"> <p>我是屁</p> <div> <p>我是p</p> </div> </div> <script> // 注意一下都是方法 带括号 $(function() { 
                // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
                console.log($(".son").parent());
                // 2. 子？
                // (1) 亲儿子 children()  类似子代选择器  ul>li 孙子不选
                $(".nav").children("p").css("color", "red");
                // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
                $(".nav").find("p").css("color", "red");
            });
        </script>
    </body>

<body> <ol> <li>我是ol 的li</li> <li>我是ol 的li</li> <li class="item">我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> </ol> <ul> <li>我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> <li>我是ol 的li</li> </ul> <div class="current">俺有current</div> <div>俺木有current</div> <script> // 注意一下都是方法 带括号 $(function() { 
                // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
                $("ol .item").siblings("li").css("color", "red");
                // 2. 第n个元素
                var index = 2;
                // (1) 我们可以利用选择器的方式选择
                // $("ul li:eq(2)").css("color", "blue");
                // $("ul li:eq("+index+")").css("color", "blue");
                // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
                // $("ul li").eq(2).css("color", "blue");
                // $("ul li").eq(index).css("color", "blue");
                // 3. 判断是否有某个类名
                console.log($("div:first").hasClass("current"));
                console.log($("div:last").hasClass("current"));
    
    
            });
        </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQwMTAwNA_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQwMTAwNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/948f8603cf5c403da6bd5d791230816a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQwMTAwNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/ddf4a7cf10e84ea3a7aa692941ba4fa3.png