首页 > 代码库 > JQuery学习三(隐式迭代和节点遍历)
JQuery学习三(隐式迭代和节点遍历)
在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="http://www.mamicode.com/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="http://www.mamicode.com/点击"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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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>
JQuery学习三(隐式迭代和节点遍历)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。