jQuery基础修炼圣典—DOM篇（二）jQuery遍历

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>

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>

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>

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>

5、closest()方法

以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法

closest()方法接受一个匹配元素的选择器字符串

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

例如：在div元素中，往上查找所有的li元素，可以这样表达

$("div").closet("li‘)

注意：jQuery是一个合集对象，所以通过closest是匹配合集中每一给元素的祖先元素

closest()方法给定的jQuery集合或元素来过滤元素

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

注意事项：在使用的时候需要特别注意下

粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了

  1. 起始位置不同：.closest开始于当前元素 .parents开始于父元素
  2. 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
  3. 结果不同：.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>

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>

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>

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>

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>

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,1
     element是对应的li节点 li,li
     this 指向的是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>

时间： 2024-10-24 00:54:09

jQuery基础修炼圣典—DOM篇（二）jQuery遍历的相关文章

jQuery基础修炼圣典—DOM篇

一.DOM节点的创建 1.创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了 本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获. 先介绍下需要用到的浏览

锋利的jQuery（1）——DOM对象与jQuery对象的转换

1.认识jQuery DOM对象:即文档对象模型 jQuery对象:通过jQuery包装DOM对象后产生的对象.这是jQuery对象所特有的,在jQuery对象中无法使用DOM对象的任何方法,同时DOM对象也不能使用jQuery对象的方法.(这也是我自己在写代码的时候经常弄混的一条) DOM对象和jQuery对象的互换:一般的在jQuery对象前面加上$ jQuery对象转换成DOM对象: Jquery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象 //代码如下 va

JQuery基础修炼-事件篇

目录 第1章 事件介绍 第2章 鼠标事件 第3章 表单事件 第4章 键盘事件 第5章 事件的绑定和解绑 第6章 事件对象的使用 第7章 自定义事件 click与dbclick事件 用交互操作中,最简单直接就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作.这两个方法的用户是类似,下面以click()事件为例 使用上非常简单: 方法一:$ele.click() 绑定$ele元素,不带任何参数一般是用来指定触发一个事件

jquery 基础汇总---导图篇

最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以及jQuery的一些属性和样式, 选择器的简介详见:http://www.cnblogs.com/amy-1205/p/5849568.html 事件篇,主要是鼠标事件,表单事件,键盘事件,事件的绑定和解绑以及自定义事件 动画篇,学习后制作出以下效果:隐藏和显示.上卷下来.淡入淡出.也可以通过自定义

JQuery基础一_式样篇

1-3环境搭建 进入官方网站获取最新的版本 http://jquery.com/download/  ,这里需要注意 jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6.7.8浏览器,这样做的目的是为了兼容移动端开发.由于减少了一些代码,使得该版本比 jQuery 1.x 更小.更快. 如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了.我们这本课程为了兼容性问题,使用的是 1.9 版本.jQuery 每一个系列版本分

jQuery基础学习2——DOM和jQuery对象

1 <body> 2 <h3>例子</h3> 3 <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> 4 <ul> 5 <li id="apple">苹果</li> 6 <li>橘子</li> 7 <li>菠萝</li> 8 </ul> 9 </body> 可以通过JavaScr

Jquery基础入门-3-JQuery DOM操作-3、4、5

11-JQuery DOM操作-332:00 12-JQuery DOM操作-421:38 13-JQuery DOM操作-520:59 八.节点属性操作</strong><br /> 1.设置获取属性方法:attr(),删除属性的方法:removeAttr().<br /> ◆ alert($(“li:eq(1)”).attr(“title”));//获取第二个li元素的title属性.<br /> ◆ $(“ul”).attr({“title”:”列表”

jQuery基础教程-第8章-002Adding jQuery object methods

一.Object method context 1.We have seen that adding global functions requires extending the jQuery object with new methods. Adding instance methods is similar, but we instead extend the jQuery.fn object(The jQuery.fn object is an alias to jQuery.proto

jQuery基础知识点（DOM操作）

使用jQuery的方式来操作DOM更加的简洁.方便,统一的调用方式方便学习并且可降低学习成本. 1.样式属性操作   1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, “red”); ②设置多个样式(也可以设置单个) // 参数为 {}(对象) $(selector).css({“color”: “red”, “font-size”: “30px”}); 2)获取样式属性操作 // 参数