jQuery基础—DOM之Query遍历

最新推荐文章于 2024-07-14 22:18:32 发布

java.雅玲

最新推荐文章于 2024-07-14 22:18:32 发布

阅读量251

点赞数

分类专栏： java基础文章标签： js java javascript css web

本文链接：https://blog.csdn.net/weixin_53341657/article/details/112688850

版权

1、children()方法

jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

代码如果是$(“div”).children()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。

children()无参数

允许我们通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象

注意：jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的第一级子元素

.children()方法选择性地接受同一类型选择器表达式

$("div").children(".selected")

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

具体的操作，请参考下边的代码:

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 6     <title></title>
 7     <link rel="stylesheet" href="imooc.css" type="text/css">
 8     <style>
 9     .left {
   
10         width: auto;
11         height: 120px;
12     }
13     
14     .left div {
   
15         width: 150px;
16         height: 70px;
17         padding: 5px;
18         margin: 5px;
19         float: left;
20         background: #bbffaa;
21         border: 1px solid #ccc;
22     }//需要获取资料的朋友请加Q君样：290194256*
23     
24     a {
   
25         display: block;
26     }
27     </style>
28     <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
29 </head>
30 
31 <body>
32     <h2>children方法()</h2>
33     <div class="left first-div">
34         <div class="div">
35             <ul class="level-1">
36                 <li class="item-1">1</li>
37                 <li class="item-2">2</li>
38                 <li class="item-3">3</li>
39             </ul>
40         </div>
41         <div class="div">
42             <ul class="level-2">
43                 <li class="item-1">1</li>
44                 <li class="item-2">2</li>
45                 <li class="item-3">3</li>
46             </ul>
47         </div>
48         <div class="div">
49             <ul class="level-3">
50                 <li class="item-1">1</li>
51                 <li class="item-2">2</li>
52                 <li class="item-3">3</li>
53             </ul>
54         </div>
55     </div>
56     <button id="bt1">点击：children无参数</button>
57     <button id="bt2">点击：children传递表达式</button>
58     <script type="text/javascript">
59     $("#bt1").click(function() {
   
60         $('.div').children().css('border', '3px solid red')
61     })
62     </script>
63 
64     <script type="text/javascript">
65     $("#bt2").click(function() {
   
66         //找到所有class=div的元素
67         //找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色
68         $('.div').children(':last').css('border', '3px solid blue')
69     })
70     </script>
71 
72 </body>
73 
74 </html>

2、find()方法

jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

代码如果是$(“div”).find(“li”)，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。

.find()方法要注意的知识点：

find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 ‘*’。
find只在后代中遍历，不包括自己。
选择器 context 是由 .find() 方法实现的；因此，(′li.item−ii′).find(′li′)等价于(‘li’, ‘li.item-ii’)。

注意重点：

.find()和.children()方法是相似的
1.children只查找第一级的子节点
2.find查找范围包括子节点的所有后代节点
具体的操作，请参考下边的代码

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 6     <title></title>
 7     <link rel="stylesheet" href="imooc.css" type="text/css">
 8     <style>
 9     .left {
   
10         width: auto;
11         height: 200px;
12     }//需要获取资料的朋友请加Q君样：290194256*
13     
14     .left div {
   
15         width: 150px;
16         height: 70px;
17         padding: 5px;
18         margin: 5px;
19         float: left;
20         background: #bbffaa;
21         border: 1px solid #ccc;
22     }
23     
24     span {
   
25         color: blue;
26     }
27     </style>
28     <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
29 </head>
30 
31 <body>
32     <h2>find方法()</h2>
33     <div class="left first-div">
34         <div class="div">
35             <ul class="level-1">
36                 <li class="item-1">1</li>
37                 <li class="item-2">2</li>
38                 <li class="item-3">3</li>
39             </ul>
40         </div>
41         <div class="div">
42             <ul class="level-2">
43                 <li class="item-1">1</li>
44                 <li class="item-2 test">2</li>
45                 <li class="item-3">3</li>
46             </ul>
47         </div>
48         <div class="div">
49             <ul class="level-3">
50                 <li class="item-1">1</li>
51                 <li class="item-2">2</li>
52                 <li class="item-3">3</li>
53             </ul>
54         </div>
55     </div>
56     <button>点击：find传递表达式</button>
57     <br/>
58     <br/>
59     <h3>find表达式</h3>
60     <div style="border:1px solid red;">
61         <p>
62             <span>测试1</span>
63             <a>测试2</a>
64         </p>
65         <p>
66             <span>慕课网1</span>
67             <a>慕课网2</a>
68         </p>
69         <div>
70             <span>Aaron1</span>
71             <a>Aaron2</a>
72         </div>
73     </div>
74     <br/>
75     <br/>
76     <button>点击：find传递$对象</button>
77     <script type="text/javascript">
78     $("button:first")

最低0.47元/天解锁文章

java.雅玲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础—DOM之Query遍历

1、children()方法jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）理解节点查找关系：<div class="div"> <ul class="son"> <li class="grandson">1</li> &lt
复制链接

扫一扫