在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>
时间： 2024-10-05 23:58:58