jQuery基础修炼圣典—DOM篇（二）jQuery遍历
2024-05-11 07:15:42
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 }
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>View Code
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 }
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").click(function() {
79 $('.left').find('li:last').css('border', '1px solid red')
80 })
81 </script>
82 <script type="text/javascript">
83 $("button:last").click(function() {
84 //找到所有p元素，然后筛选出子元素是span标签的节点
85 //改变其字体颜色
86 var $spans = $('span');
87 $("p").find($spans).css('color', 'red');
88 })
89 </script>
90 </body>
91
92 </html>View Code
3、parent()方法
jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法
因为是父元素，这个方法只会向上查找一级
理解节点查找关系：
<div class="div"><ul class="son"><li class="grandson">1</li></ul> </div>
查找ul的父元素div, $(ul).parent()，就是这样简单的表达
parent()无参数
parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象
注意：jQuery是一个合集对象，所以通过parent是匹配合集中每一给元素的父元素
parent()方法选择性地接受同一型选择器表达式
同样的也是因为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: 400px;
12 }
13
14 .left div {15 width: 350px;
16 height: 150px;
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>parent方法()</h2>
33 <div class="left first-div">
34
35 <div class="div">
36 <ul class="level-2">
37 <!-- A -->
38 <li class="item-a">A</li>
39 <!-- B -->
40 <li class="item-b">B
41 <ul class="level-3">
42 <li class="item-1">1</li>
43 <li class="item-2">2</li>
44 <li class="item-3">3</li>
45 </ul>
46 </li>
47 <!-- C -->
48 <li class="item-c">C</li>
49
50 </ul>
51 </div>
52
53 <div class="div">
54 <ul class="level-2">
55 <!-- A -->
56 <li class="item-a">A</li>
57 <!-- B -->
58 <li class="item-b">B
59 <ul class="level-3">
60 <li class="item-1">1</li>
61 <li class="item-2">2</li>
62 <li class="item-3">3</li>
63 </ul>
64 </li>
65 <!-- C -->
66 <li class="item-c">C</li>
67
68 </ul>
69 </div>
70 </div>
71
72 <button>点击：parent无参数</button>
73 <button>点击：paren传递选择器</button>
74 <script type="text/javascript">
75 $("button:first").click(function() {
76 $('.level-3').parent().css('border','1px solid red')
77 })
78 </script>
79
80 <script type="text/javascript">
81 $("button:last").click(function() {
82 //找到所有class=item-a的父元素
83 //然后给每个ul,然后筛选出最后一个，加上蓝色的边
84 $('.item-a').parent(':last').css('border', '1px solid blue')
85 })
86 </script>
87
88 </body>
89
90 </html>View Code
4、parents()方法
jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法
其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点
理解节点查找关系：
<div class="div"><ul class="son"><li class="grandson">1</li></ul> </div>
在li节点上找到祖 辈元素div， 这里可以用$("li").parents()方法
parents()无参数
parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象;
返回的元素秩序是从离他们最近的父级元素开始的
注意：jQuery是一个合集对象，所以通过parent是匹配合集中所有元素的祖辈元素
parents()方法选择性地接受同一型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式
注意事项：
1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找 2 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。
具体的操作，请参考下边的代码:
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
6 <title></title>
7 <style>
8 .left { 9 width: auto;
10 height: 350px;
11 }
12
13 .left div {14 width: 350px;
15 height: 150px;
16 padding: 5px;
17 margin: 5px;
18 float: left;
19 background: #bbffaa;
20 border: 1px solid #ccc;
21 }
22
23 span {24 color: blue;
25 }
26 </style>
27 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
28 </head>
29
30 <body>
31 <h2>parents方法()</h2>
32 <div class="left first-div">
33
34 <div class="div">
35 <ul class="level-2">
36 <!-- A -->
37 <li class="item-a">A</li>
38 <!-- B -->
39 <li class="item-b">B
40 <ul class="level-3">
41 <li class="item-1">1</li>
42 <li class="item-2">2</li>
43 <li class="item-3">3</li>
44 </ul>
45 </li>
46 <!-- C -->
47 <li class="item-c">C</li>
48 </ul>
49 </div>
50
51 <div class="div">
52 <ul class="level-2">
53 <!-- A -->
54 <li class="item-a">A</li>
55 <!-- B -->
56 <li class="item-b">B
57 <ul class="level-3">
58 <li class="item-1">1</li>
59 <li class="item-2">2</li>
60 <li class="item-3">3</li>
61 </ul>
62 </li>
63 <!-- C -->
64 <li class="item-c">C</li>
65 </ul>
66 </div>
67
68 </div>
69
70 <button>点击：parents无参数</button>
71 <button>点击：parents传递选择器</button>
72
73 <script type="text/javascript">
74 $("button:first").click(function() {
75 $('.item-b').parents().css('border','2px solid red')
76 })
77 </script>
78
79 <script type="text/javascript">
80 $("button:last").click(function() {
81 //找到当前元素的所有祖辈元素,筛选出class="first-div"的元素
82 //并且附上一个边
83 $('.item-b').parents('.first-div').css('border', '2px solid blue')
84 })
85 </script>
86 </body>
87
88 </html>View Code
5、closest()方法
以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法
closest()方法接受一个匹配元素的选择器字符串
从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素
例如：在div元素中，往上查找所有的li元素，可以这样表达
$("div").closet("li')
注意：jQuery是一个合集对象，所以通过closest是匹配合集中每一给元素的祖先元素
closest()方法给定的jQuery集合或元素来过滤元素
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个jQuery的对象
注意事项：在使用的时候需要特别注意下
粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了
- 起始位置不同：.closest开始于当前元素 .parents开始于父元素
- 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
- 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的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: 200px;
12 }
13
14 .left div {15 width: 350px;
16 height: 150px;
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>closest方法()</h2>
33 <div class="left first-div">
34 <div class="div">
35 <ul class="level-2">
36 <li class="item-a">A</li>
37 <li class="item-b">B
38 <ul class="level-3">
39 <li class="item-1">1</li>
40 <li class="item-2">2</li>
41 <li class="item-3">3</li>
42 </ul>
43 </li>
44 <li class="item-c">C</li>
45 </ul>
46 </div>
47 </div>
48 <br/>
49 <button>点击：closest传递选择器 </button>
50 <button>点击：closest传递一个元素对象</button>
51 <script type="text/javascript">
52 $("button:first").click(function() {
53 $('li.item-1').closest('.level-2').css('border','1px solid red')
54 })
55 </script>
56 <script type="text/javascript">
57 $("button:last").click(function() {
58 var itemB = $('.item-b')
59 $('li.item-1')
60 .closest(itemB)
61 .css('border', '1px solid blue');
62 })
63 </script>
64 </body>
65
66 </html>View Code
6、next()方法
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法
理解节点查找关系：
如下class="item-1"元素就是红色部分，那蓝色的class="tem-2"就是它的兄弟元素
<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li> </ul>
next()无参数
允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。
注意：jQuery是一个合集对象，所以通过next是匹配合集中每一给元素的下一个兄弟元素
next()方法选择性地接受同一类型选择器表达式
同样的也是因为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 }
23
24 a {25 display: block;
26 }
27 </style>
28 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
29 </head>
30
31 <body>
32 <h2>next方法()</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>点击：next无参数</button>
57 <button>点击：next传递表达式</button>
58 <script type="text/javascript">
59 $("button:first").click(function() {
60 $('li.item-1').next().css('border', '1px solid red')
61 })
62 </script>
63
64 <script type="text/javascript">
65 $("button:last").click(function() {
66 //找到所有class=item-3的li
67 //然后给每个li,然后筛选出第一个，加上蓝色的边
68 $('.item-2').next(':first').css('border', '1px solid blue')
69 })
70 </script>
71
72 </body>
73
74 </html>View Code
7、prev()方法
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法
理解节点查找关系：
如下蓝色的class="tem-2"的li元素，红色的节点就是它的prev兄弟节点
<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li> </ul>
prev()无参数
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
注意：jQuery是一个合集对象，所以通过prev是匹配合集中每一个元素的上一个兄弟元素
prev()方法选择性地接受同一类型选择器表达式
同样的也是因为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: 150px;
12 }
13
14 .left div {15 width: 150px;
16 height: 100px;
17 padding: 5px;
18 margin: 5px;
19 float: left;
20 background: #bbffaa;
21 border: 1px solid #ccc;
22 }
23
24 a {25 display: block;
26 }
27 </style>
28 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
29 </head>
30
31 <body>
32 <h2>prev方法()</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>点击：prev无参数</button>
57 <button>点击：prev传递选择器</button>
58 <script type="text/javascript">
59 $("button:first").click(function() {
60 $('.item-2').prev().css('border', '1px solid red')
61 })
62 </script>
63
64 <script type="text/javascript">
65 $("button:last").click(function() {
66 //找到所有class=item-2的li
67 //然后给每个li,然后筛选出第一个，加上蓝色的边
68 $('.item-3').prev(':last').css('border', '1px solid blue')
69 })
70 </script>
71
72 </body>
73
74 </html>View Code
8、siblings()方法
jQuery是一个合集对象，如果想快速查找指定元集合中每一个元素紧邻的前面后面同辈元素，此时可以用siblings()方法
理解节点查找关系：
如下蓝色的class="tem-2"的li元素，红色的节点就是它的siblings兄弟节点
<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li> </ul>
siblings()无参数
取得一个包含匹配的元素集合中每一个元素紧邻的前后同辈元素的元素集合
注意：jQuery是一个合集对象，所以通过siblings是匹配合集中每一个元素的前后兄弟元素
siblings()方法选择性地接受同一类型选择器表达式
同样的也是因为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: 150px;
12 }
13
14 .left div {15 width: 150px;
16 height: 100px;
17 padding: 5px;
18 margin: 5px;
19 float: left;
20 background: #bbffaa;
21 border: 1px solid #ccc;
22 }
23
24 a {25 display: block;
26 }
27 </style>
28 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
29 </head>
30
31 <body>
32 <h2>siblings方法()</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>点击：siblingsv无参数</button>
57 <button>点击：siblings传递选择器</button>
58 <script type="text/javascript">
59 $("button:first").click(function() {
60 $('.item-2').siblings().css('border','1px solid red')
61 })
62 </script>
63
64 <script type="text/javascript">
65 $("button:last").click(function() {
66 //找到class=item-2的所有兄弟节点
67 //然后筛选出最后一个，加上蓝色的边
68 $('.item-2').siblings(':last').css('border', '2px solid blue')
69 })
70 </script>
71
72 </body>
73
74 </html>View Code
9、add()方法
jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中
.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。
简单的看一个案例：
操作：选择所有的li元素，之后需要把p元素也加入到li的合集中
<ul><li>list item 1</li><li>list item 3</li> </ul> <p>新的p元素</p>
处理一：传递选择器
$('li').add('p')处理二：传递dom元素
$('li').add(document.getElementsByTagName('p')[0])还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了
$('li').add('<p>新的p元素</p>').appendTo(目标位置)具体的操作，请参考下边的代码：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
6 <title></title>
7 <style>
8 .left { 9 width: auto;
10 height: 150px;
11 }
12
13 .left div {14 width: 150px;
15 height: 120px;
16 padding: 5px;
17 margin: 5px;
18 float: left;
19 background: #bbffaa;
20 border: 1px solid #ccc;
21 }
22 </style>
23 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
24 </head>
25
26 <body>
27 <h2>add方法()</h2>
28 <div class="left first-div">
29 <div class="div">
30 <ul>
31 <li>list item 1</li>
32 <li>list item 2</li>
33 <li>list item 3</li>
34 </ul>
35 <p>新的p元素</p>
36 </div>
37 </div>
38 <div class="right"></div>
39 <br/>
40 <button>点击：add传递元素标签</button>
41 <button>点击：add传递html结构</button>
42 <script type="text/javascript">
43 $("button:first").click(function() {
44 //把p元素加到li合集中
45 $('li').add('p').css('background', 'red')
46 })
47 </script>
48 <script type="text/javascript">
49 $("button:last").click(function() {
50 //把html结构'<p>新的p元素</p>'
51 //加入到li的合集中，为了能够在页面上显示
52 //需要在重新appendTo要指定的节点处
53 //值得注意：整个结构位置都改变了
54 $('li').add('<p>新的p元素</p>').appendTo($('.right'))
55 })
56 </script>
57 </body>
58
59 </html>View Code
10、each()方法
jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作$("li").css('') 给所有的li设置style值，因为jQuery是一个合集对象，所以css方法内部就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是each
.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数
所以大体上了解3个重点：
each是一个for循环的包装迭代器 each通过回调的方式处理，并且会有2个固定的实参，索引与元素 each回调方法中的this指向当前迭代的dom元素
看一个简单的案例
<ul><li>慕课网</li><li>Aaron</li> </ul>
开始迭代li，循环2次
$("li").each(function(index, element) {index 索引 0,1element是对应的li节点 li,lithis 指向的是li
})这样可以在循环体会做一些逻辑操作了，如果需要提前退出，可以以通过返回 false以便在回调函数内中止循
具体的操作，请参考下边的代码:
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
6 <title></title>
7 <style>
8 .left { 9 width: auto;
10 height: 150px;
11 }
12
13 .left div {14 width: 150px;
15 height: 120px;
16 padding: 5px;
17 margin: 5px;
18 float: left;
19 background: #bbffaa;
20 border: 1px solid #ccc;
21 }
22 </style>
23 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
24 </head>
25
26 <body>
27 <h2>each方法</h2>
28 <div class="left first-div">
29 <div class="div">
30 <ul>
31 <li>list item 1</li>
32 <li>list item 2</li>
33 <li>list item 3</li>
34 </ul>
35 </div>
36 <div class="div">
37 <ul>
38 <li>list item 4</li>
39 <li>list item 5</li>
40 <li>list item 6</li>
41 </ul>
42 </div>
43 </div>
44
45 <br/>
46 <button>点击：each方法遍历元素</button>
47 <button>点击：each方法回调判断</button>
48 <script type="text/javascript">
49 $("button:first").click(function() {
50 //遍历所有的li
51 //修改每个li内的字体颜色
52 $("li").each(function(index, element) {
53 $(this).css('color','red')
54 })
55
56 })
57 </script>
58 <script type="text/javascript">
59 $("button:last").click(function() {
60 //遍历所有的li
61 //修改偶数li内的字体颜色
62 $("li").each(function(index, element) {
63 if (index % 2) {
64 $(this).css('color','blue')
65 }
66 })
67 })
68 </script>
69 </body>
70
71 </html>View Code
转载于:https://www.cnblogs.com/Qian123/p/5577402.html
jQuery基础修炼圣典—DOM篇（二）jQuery遍历相关推荐
- 原 jQuery基础修炼圣典—DOM篇
2019独角兽企业重金招聘Python工程师标准>>> 6.JQuery遍历 (7)siblings()方法 如果想快速查找指定元集合中每一个元素紧邻的前面后面同辈元素,此时可以用s ...
- （MC嘉）jQuery基础使用与样式篇
jQuery基础使用与样式篇 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性 节点分类: 标签节点 文本节点 属性节点 注释节点 节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值 常见的节 ...
- JQuery 基础 jq选择器 dom操作
目录 JQuery 基础: (***) window.onload 和 $(function) 区别 1. 基本选择器 1. 标签选择器(元素选择器) 2. id选择器 3. 类选择器 2. 层级 ...
- jQuery 基础教程 （三）之jQuery的选择器
一.jQuery 选择器 (1)选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 (2)jQuery 选择器的优点: 简洁的写法 ...
- 【jQuery 教程系列第 10 篇】jQuery 中的过滤选择器（基本筛选器）
这是[jQuery 教程系列第 10 篇],如果觉得有用的话,欢迎关注专栏. jQuery 中除了一些 基本选择器 ,也有一些过滤选择器,本篇博客仅挑选其中的几个简单说明一下,其它的大家可以点击 jQ ...
- jQuery 基础教程 （四）之jQuery中的DOM操作
一.jQuery 中的 DOM 操作 (1)DOM(Document Object Model-文档对象模型):一 种与浏览器, 平台, 语言无关的接口, 使用该接口可以 轻松地访问页面中所有的标准组 ...
- jQuery 基础教程 （一）之jQuery的由来及简介
一.RIA技术 (1)RIA(Rich Internet Applications) 富互联网应用,具有高度互动性.丰富用户体验以及功能强大的客户端. (2)常见的RIA技术 Ajax Flex Sl ...
- jQuery 基础教程 （二）之jQuery对象与DOM对象
一.jQuery 对象 (1)jQuery 对象就是通过 jQuery 包装DOM对象后产生的对象 (2)Query 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以 ...
最新文章
- 如何隐藏iPhone导航栏上的“后退”按钮？
- android开发系列之多线程
- Android实现点击事件的4种方式
- 极简数据分析实操指南（上）
- 辽宁412想学计算机科学技术,辽宁理工学院计算机科学与技术专业2016年在辽宁理科高考录取最低分数线...
- mysql存储过程自定义结构体_（转）MySQL存储过程/存储过程与自定义函数的区别...
- 主题：ioctl函数详细说明
- k8s学习（一）——kubectl与api-server之间的交互核心过程
- android游戏策划方案,游戏策划案模板.doc
- AnyMP4 MP3 Converter for Mac(mp3格式转换器)
- Cadence Orcad capture导出像Visio规格的图纸图文教程及视频演示
- 5S定置管理协调现场的三大元素
- vue中使用dragdrop
- 2013-2014年度总结
- Linux tmp目录的清理规则详解
- ei指什么_EI是什么
- 排列组合_均匀分组和部分均匀分组的计算与示例/二项式定理二项式系数/求和中的对称性/莱布尼兹公式与推广的求导法则
- 强大的图片预览组件Viewer.js
- C语言：重命名文件（rename（）函数）
- Perl常用模块使用例子
热门文章
- 360加固逆向脱壳之过反调试
- Android逆向与病毒分析
- Linux kernel 3.10内核源码分析--进程上下文切换
- 【问链财经-区块链基础知识系列】 第三十二课 从区块链溯源来看农产品链的设计
- python jupyter安装_python之jupyter的安装
- vr体验馆项目_VR安全体验馆在江苏方洋项目推广应用啦！
- python图画制作_用Python把照片制作成素描图片
- form提交后台注解拿不到数据_Form表单详解
- 安卓通讯录管理软件_安卓又曝严重漏洞，或监控数亿用户，请尽快更新系统补丁！...
- python 求两条曲线的交点_这几种问法都是考察张角问题，高考数学圆锥曲线的焦点弦张角定理...