JQuery學習三(隱式迭代和節點遍曆)

標籤：style   blog   http   io   color   ar   sp   java   div   

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

 

JQuery學習三(隱式迭代和節點遍曆)