码迷,mamicode.com
首页 > Web开发 > 详细

jQuery之筛选方法

时间:2019-11-29 10:57:33      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:选择器   UNC   OLE   括号   last   jquery   hasclass   dex   span   

1. 父parent、子children、find

 1 <div class="yeye">
 2         <div class="father">
 3             <div class="son">儿子</div>
 4         </div>
 5     </div>
 6 
 7     <div class="nav">
 8         <p>我是屁</p>
 9         <div>
10             <p>我是p</p>
11         </div>
12     </div>
13     <script>
14         // 注意一下都是方法 带括号
15         $(function() {
16             // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
17             console.log($(".son").parent());
18             // 2. 子
19             // (1) 亲儿子 children()  类似子代选择器  ul>li
20             // $(".nav").children("p").css("color", "red");
21             // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
22             $(".nav").find("p").css("color", "red");
23             // 3. 兄
24         });
25     </script>

 

二、兄弟siblings、判断是否有类名

 1        <ol>
 2         <li>我是ol 的li</li>
 3         <li>我是ol 的li</li>
 4         <li class="item">我是ol 的li</li>
 5         <li>我是ol 的li</li>
 6         <li>我是ol 的li</li>
 7         <li>我是ol 的li</li>
 8     </ol>
 9     <ul>
10         <li>我是ol 的li</li>
11         <li>我是ol 的li</li>
12         <li>我是ol 的li</li>
13         <li>我是ol 的li</li>
14         <li>我是ol 的li</li>
15         <li>我是ol 的li</li>
16     </ul>
17     <div class="current">俺有current</div>
18     <div>俺木有current</div>
19     <script>
20         // 注意一下都是方法 带括号
21         $(function() {
22             // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
23             $("ol .item").siblings("li").css("color", "red");
24             // 2. 第n个元素
25             var index = 2;
26             // (1) 我们可以利用选择器的方式选择
27             // $("ul li:eq(2)").css("color", "blue");
28             // $("ul li:eq("+index+")").css("color", "blue");
29             // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
30             // $("ul li").eq(2).css("color", "blue");
31             // $("ul li").eq(index).css("color", "blue");
32             // 3. 判断是否有某个类名
33             console.log($("div:first").hasClass("current"));
34             console.log($("div:last").hasClass("current"));
35 
36 
37         });
38     </script>

 

 

 

 

 

 

 

 

jQuery之筛选方法

标签:选择器   UNC   OLE   括号   last   jquery   hasclass   dex   span   

原文地址:https://www.cnblogs.com/jianguo221/p/11956057.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!