在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>