JQuery学习三(隐式迭代和节点遍历)

浏览数：23 / 时间：2015年06月09日

在JQuery中根据id获取控件，如果输入id错误是不报错的。

必要时可以通过写判断语句进行判断是否id写错

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>JQuery</title>
 5     <style type="text/css">
 6         .warning {
 7             background-color:yellow;
 8         }
 9     </style>
10         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
11         <script type="text/javascript">
12            // $(function(){$(‘#btn‘).mouseover(function () { alert("鼠标在我上面！"); })})
13             //这里的id如果错误就不会报错。可以自己写出控制是否报错
14             $(function () {
15                 var elements = $(‘#btn‘);
16                 if (elements.length <= 0) {
17                     alert("报错");
18                     return;
19                 }
20                 elements.mouseover(function () { alert(‘鼠标在我上面‘);});
21             })
22         </script>
23 </head>
24 <body bgcolor="blue">
25     <input value="点击"type="button" id="btn"/>
26 </body>
27 </html>

.next方法用于获取本节点后面第一个同辈的节点。

意思是与本节点在同一层次级别中的下一个节点对应的值

所以说next就是指向下一个。（这里面用到的this是一个dom对象，需要转换成jquery对象）

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>JQuery</title>
 5         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
 6         <script type="text/javascript">
 7             $(function () {
 8                 $(‘p‘).click(function () { alert($(this).next().text()); });
 9                 //注意这里this是dom对象，要强制转换成jquery对象
10             })
11         </script>
12 </head>
13 <body bgcolor="blue">
14     <p>aa</p>
15     <p>bb</p>
16     <div>div</div>
17     <p>cc</p>
18     <p>dd</p>
19 </body>
20 </html>

nextAll()是指本节点后面所有的，方法中还可以加入参数，用来查找哦后面所有相应参数对应的

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>JQuery</title>
 5         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
 6         <script type="text/javascript">
 7             $(function () {
 8                 $(‘p‘).click(function () { alert($(this).nextAll().text()); });
 9                 //nextAll(‘div‘)
10                 //注意这里this是dom对象，要强制转换成jquery对象
11             })
12         </script>
13 </head>
14 <body bgcolor="blue">
15     <p>aa</p>
16     <p>bb</p>
17     <div>div</div>
18     <p>cc</p>
19     <p>dd</p>
20 </body>
21 </html>

《注意是隐式迭代》

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>JQuery</title>
 5         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
 6         <script type="text/javascript">
 7             $(function () {
 8                 $(‘p‘).click(function () { $(this).nextAll(‘p‘).css("background","yellow"); });
 9                 //nextAll(‘div‘)
10                 //注意这里this是dom对象，要强制转换成jquery对象
11             })
12             $(function () { $(‘table  td‘).css("font-size", "60px"); })
13             $(function () {
14                 $(‘table td‘).mouseover(function () {
15                     $(‘table td‘).css("color", "red");
16                     $(this).nextAll(‘td‘).css("color", "black");
17                     
18                     
19                 })
20             })
21         </script>
22 </head>
23 <body bgcolor="blue">
24     <p>aa</p>
25     <p>bb</p>
26     <div>div</div>
27     <p>cc</p>
28     <p>dd</p>
29     <table>
30         <tr>
31             <td>★</td>
32             <td>★</td>
33             <td>★</td>
34             <td>★</td>
35             <td>★</td>
36         </tr>
37     </table>
38 </body>
39 </html>

siblings()获取所有同辈元素

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>JQuery</title>
 5         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
 6         <script type="text/javascript">
 7             $(function () { $(‘table  td‘).css("font-size", "60px"); })
 8             $(function () {
 9                 $(‘td‘).click(function () {
10                     $(this).css("background", "red");
11                     $(this).siblings("td").css("background","blue");
12                 })
13             })
14         </script>
15 </head>
16 <body bgcolor="blue">
17     <table>
18         <tr>
19             <td>★</td>
20             <td>★</td>
21             <td>★</td>
22             <td>★</td>
23             <td>★</td>
24         </tr>
25     </table>
26 </body>
27 </html>