jQuery基础修炼圣典—DOM篇（二）jQuery遍历
生活随笔
收集整理的這篇文章主要介紹了
jQuery基础修炼圣典—DOM篇（二）jQuery遍历
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、children()方法
jQuery是一個合集對象，如果想快速查找合集里面的第一級子元素，此時可以用children()方法。這里需要注意：.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩，這里可以理解為就是父親-兒子的關系）
理解節點查找關系：
<div class="div"><ul class="son"><li class="grandson">1</li></ul> </div>代碼如果是$("div").children()，那么意味著只能找到ul，因為div與ul是父子關系，li與div是祖輩關系，因此無法找到。
children()無參數
允許我們通過在DOM樹中對這些元素的直接子元素進行搜索，并且構造一個新的匹配元素的jQuery對象
注意：jQuery是一個合集對象，所以通過children是匹配合集中每一給元素的第一級子元素.children()方法選擇性地接受同一類型選擇器表達式
$("div").children(".selected")同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式
具體的操作，請參考下邊的代碼:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <link rel="stylesheet" href="imooc.css" type="text/css"> 8 <style> 9 .left { 10 width: auto; 11 height: 120px; 12 } 13 14 .left div { 15 width: 150px; 16 height: 70px; 17 padding: 5px; 18 margin: 5px; 19 float: left; 20 background: #bbffaa; 21 border: 1px solid #ccc; 22 } 23 24 a { 25 display: block; 26 } 27 </style> 28 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 29 </head> 30 31 <body> 32 <h2>children方法()</h2> 33 <div class="left first-div"> 34 <div class="div"> 35 <ul class="level-1"> 36 <li class="item-1">1</li> 37 <li class="item-2">2</li> 38 <li class="item-3">3</li> 39 </ul> 40 </div> 41 <div class="div"> 42 <ul class="level-2"> 43 <li class="item-1">1</li> 44 <li class="item-2">2</li> 45 <li class="item-3">3</li> 46 </ul> 47 </div> 48 <div class="div"> 49 <ul class="level-3"> 50 <li class="item-1">1</li> 51 <li class="item-2">2</li> 52 <li class="item-3">3</li> 53 </ul> 54 </div> 55 </div> 56 <button id="bt1">點擊：children無參數</button> 57 <button id="bt2">點擊：children傳遞表達式</button> 58 <script type="text/javascript"> 59 $("#bt1").click(function() { 60 $('.div').children().css('border', '3px solid red') 61 }) 62 </script> 63 64 <script type="text/javascript"> 65 $("#bt2").click(function() { 66 //找到所有class=div的元素 67 //找到其對應的子元素ul，然后篩選出最后一個，給邊寬加上顏色 68 $('.div').children(':last').css('border', '3px solid blue') 69 }) 70 </script> 71 72 </body> 73 74 </html> View Code2、find()方法
jQuery是一個合集對象，如果想快速查找DOM樹中的這些元素的后代元素，此時可以用find()方法，這也是開發使用頻率很高的方法。這里要注意 children與find方法的區別，children是父子關系查找，find是后代關系（包含父子關系）
理解節點查找關系：
<div class="div"><ul class="son"><li class="grandson">1</li></ul> </div>代碼如果是$("div").find("li")，此時，li與div是祖輩關系，通過find方法就可以快速的查找到了。
.find()方法要注意的知識點：
- find是遍歷當前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以。
- 與其他的樹遍歷方法不同，選擇器表達式對于 .find() 是必需的參數。如果我們需要實現對所有后代元素的取回，可以傳遞通配選擇器 '*'。
- find只在后代中遍歷，不包括自己。
- 選擇器 context 是由 .find() 方法實現的；因此，$('li.item-ii').find('li') 等價于 $('li', 'li.item-ii')。
注意重點：
.find()和.children()方法是相似的 1.children只查找第一級的子節點 2.find查找范圍包括子節點的所有后代節點具體的操作，請參考下邊的代碼
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <link rel="stylesheet" href="imooc.css" type="text/css"> 8 <style> 9 .left { 10 width: auto; 11 height: 200px; 12 } 13 14 .left div { 15 width: 150px; 16 height: 70px; 17 padding: 5px; 18 margin: 5px; 19 float: left; 20 background: #bbffaa; 21 border: 1px solid #ccc; 22 } 23 24 span { 25 color: blue; 26 } 27 </style> 28 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 29 </head> 30 31 <body> 32 <h2>find方法()</h2> 33 <div class="left first-div"> 34 <div class="div"> 35 <ul class="level-1"> 36 <li class="item-1">1</li> 37 <li class="item-2">2</li> 38 <li class="item-3">3</li> 39 </ul> 40 </div> 41 <div class="div"> 42 <ul class="level-2"> 43 <li class="item-1">1</li> 44 <li class="item-2 test">2</li> 45 <li class="item-3">3</li> 46 </ul> 47 </div> 48 <div class="div"> 49 <ul class="level-3"> 50 <li class="item-1">1</li> 51 <li class="item-2">2</li> 52 <li class="item-3">3</li> 53 </ul> 54 </div> 55 </div> 56 <button>點擊：find傳遞表達式</button> 57 <br/> 58 <br/> 59 <h3>find表達式</h3> 60 <div style="border:1px solid red;"> 61 <p> 62 <span>測試1</span> 63 <a>測試2</a> 64 </p> 65 <p> 66 <span>慕課網1</span> 67 <a>慕課網2</a> 68 </p> 69 <div> 70 <span>Aaron1</span> 71 <a>Aaron2</a> 72 </div> 73 </div> 74 <br/> 75 <br/> 76 <button>點擊：find傳遞$對象</button> 77 <script type="text/javascript"> 78 $("button:first").click(function() { 79 $('.left').find('li:last').css('border', '1px solid red') 80 }) 81 </script> 82 <script type="text/javascript"> 83 $("button:last").click(function() { 84 //找到所有p元素，然后篩選出子元素是span標簽的節點 85 //改變其字體顏色 86 var $spans = $('span'); 87 $("p").find($spans).css('color', 'red'); 88 }) 89 </script> 90 </body> 91 92 </html> View Code3、parent()方法
jQuery是一個合集對象，如果想快速查找合集里面的每一個元素的父元素（這里可以理解為就是父親-兒子的關系），此時可以用parent()方法
因為是父元素，這個方法只會向上查找一級
理解節點查找關系：
<div class="div"><ul class="son"><li class="grandson">1</li></ul> </div>查找ul的父元素div, $(ul).parent()，就是這樣簡單的表達
parent()無參數
parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級元素，從有序的向上匹配元素，并根據匹配的元素創建一個新的 jQuery 對象
注意：jQuery是一個合集對象，所以通過parent是匹配合集中每一給元素的父元素parent()方法選擇性地接受同一型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式具體的操作，請參考下邊的代碼:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <link rel="stylesheet" href="imooc.css" type="text/css"> 8 <style> 9 .left { 10 width: auto; 11 height: 400px; 12 } 13 14 .left div { 15 width: 350px; 16 height: 150px; 17 padding: 5px; 18 margin: 5px; 19 float: left; 20 background: #bbffaa; 21 border: 1px solid #ccc; 22 } 23 24 span { 25 color: blue; 26 } 27 </style> 28 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 29 </head> 30 31 <body> 32 <h2>parent方法()</h2> 33 <div class="left first-div"> 34 35 <div class="div"> 36 <ul class="level-2"> 37 <!-- A --> 38 <li class="item-a">A</li> 39 <!-- B --> 40 <li class="item-b">B 41 <ul class="level-3"> 42 <li class="item-1">1</li> 43 <li class="item-2">2</li> 44 <li class="item-3">3</li> 45 </ul> 46 </li> 47 <!-- C --> 48 <li class="item-c">C</li> 49 50 </ul> 51 </div> 52 53 <div class="div"> 54 <ul class="level-2"> 55 <!-- A --> 56 <li class="item-a">A</li> 57 <!-- B --> 58 <li class="item-b">B 59 <ul class="level-3"> 60 <li class="item-1">1</li> 61 <li class="item-2">2</li> 62 <li class="item-3">3</li> 63 </ul> 64 </li> 65 <!-- C --> 66 <li class="item-c">C</li> 67 68 </ul> 69 </div> 70 </div> 71 72 <button>點擊：parent無參數</button> 73 <button>點擊：paren傳遞選擇器</button> 74 <script type="text/javascript"> 75 $("button:first").click(function() { 76 $('.level-3').parent().css('border','1px solid red') 77 }) 78 </script> 79 80 <script type="text/javascript"> 81 $("button:last").click(function() { 82 //找到所有class=item-a的父元素 83 //然后給每個ul,然后篩選出最后一個，加上藍色的邊 84 $('.item-a').parent(':last').css('border', '1px solid blue') 85 }) 86 </script> 87 88 </body> 89 90 </html> View Code4、parents()方法
jQuery是一個合集對象，如果想快速查找合集里面的每一個元素的所有祖輩元素，此時可以用parents()方法
其實也類似find與children的區別，parent只會查找一級，parents則會往上一直查到查找到祖先節點
理解節點查找關系：
<div class="div"><ul class="son"><li class="grandson">1</li></ul> </div>在li節點上找到祖 輩元素div， 這里可以用$("li").parents()方法
parents()無參數
parents()方法允許我們能夠在DOM樹中搜索到這些元素的祖先元素，從有序的向上匹配元素，并根據匹配的元素創建一個新的 jQuery 對象;
返回的元素秩序是從離他們最近的父級元素開始的
注意：jQuery是一個合集對象，所以通過parent是匹配合集中所有元素的祖輩元素parents()方法選擇性地接受同一型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式注意事項：
1 .parents()和.parent()方法是相似的，但后者只是進行了一個單級的DOM樹查找 2 $( "html" ).parent()方法返回一個包含document的集合，而$( "html" ).parents()返回一個空集合。具體的操作，請參考下邊的代碼:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <style> 8 .left { 9 width: auto; 10 height: 350px; 11 } 12 13 .left div { 14 width: 350px; 15 height: 150px; 16 padding: 5px; 17 margin: 5px; 18 float: left; 19 background: #bbffaa; 20 border: 1px solid #ccc; 21 } 22 23 span { 24 color: blue; 25 } 26 </style> 27 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 28 </head> 29 30 <body> 31 <h2>parents方法()</h2> 32 <div class="left first-div"> 33 34 <div class="div"> 35 <ul class="level-2"> 36 <!-- A --> 37 <li class="item-a">A</li> 38 <!-- B --> 39 <li class="item-b">B 40 <ul class="level-3"> 41 <li class="item-1">1</li> 42 <li class="item-2">2</li> 43 <li class="item-3">3</li> 44 </ul> 45 </li> 46 <!-- C --> 47 <li class="item-c">C</li> 48 </ul> 49 </div> 50 51 <div class="div"> 52 <ul class="level-2"> 53 <!-- A --> 54 <li class="item-a">A</li> 55 <!-- B --> 56 <li class="item-b">B 57 <ul class="level-3"> 58 <li class="item-1">1</li> 59 <li class="item-2">2</li> 60 <li class="item-3">3</li> 61 </ul> 62 </li> 63 <!-- C --> 64 <li class="item-c">C</li> 65 </ul> 66 </div> 67 68 </div> 69 70 <button>點擊：parents無參數</button> 71 <button>點擊：parents傳遞選擇器</button> 72 73 <script type="text/javascript"> 74 $("button:first").click(function() { 75 $('.item-b').parents().css('border','2px solid red') 76 }) 77 </script> 78 79 <script type="text/javascript"> 80 $("button:last").click(function() { 81 //找到當前元素的所有祖輩元素,篩選出class="first-div"的元素 82 //并且附上一個邊 83 $('.item-b').parents('.first-div').css('border', '2px solid blue') 84 }) 85 </script> 86 </body> 87 88 </html> View Code5、closest()方法
以選定的元素為中心，往內查找可以通過find、children方法。如果往上查找，也就是查找當前元素的父輩祖輩元素，jQuery提供了closest()方法，這個方法類似parents但是又有一些細微的區別，屬于使用頻率很高的方法
closest()方法接受一個匹配元素的選擇器字符串
從元素本身開始，在DOM 樹上逐級向上級元素匹配，并返回最先匹配的祖先元素
例如：在div元素中，往上查找所有的li元素，可以這樣表達
$("div").closet("li')注意：jQuery是一個合集對象，所以通過closest是匹配合集中每一給元素的祖先元素
closest()方法給定的jQuery集合或元素來過濾元素
同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個jQuery的對象
注意事項：在使用的時候需要特別注意下
粗看.parents()和.closest()是有點相似的，都是往上遍歷祖輩元素，但是兩者還是有區別的，否則就沒有存在的意義了
具體使用可以參考下邊代碼區域：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <link rel="stylesheet" href="imooc.css" type="text/css"> 8 <style> 9 .left { 10 width: auto; 11 height: 200px; 12 } 13 14 .left div { 15 width: 350px; 16 height: 150px; 17 padding: 5px; 18 margin: 5px; 19 float: left; 20 background: #bbffaa; 21 border: 1px solid #ccc; 22 } 23 24 span { 25 color: blue; 26 } 27 </style> 28 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 29 </head> 30 31 <body> 32 <h2>closest方法()</h2> 33 <div class="left first-div"> 34 <div class="div"> 35 <ul class="level-2"> 36 <li class="item-a">A</li> 37 <li class="item-b">B 38 <ul class="level-3"> 39 <li class="item-1">1</li> 40 <li class="item-2">2</li> 41 <li class="item-3">3</li> 42 </ul> 43 </li> 44 <li class="item-c">C</li> 45 </ul> 46 </div> 47 </div> 48 <br/> 49 <button>點擊：closest傳遞選擇器 </button> 50 <button>點擊：closest傳遞一個元素對象</button> 51 <script type="text/javascript"> 52 $("button:first").click(function() { 53 $('li.item-1').closest('.level-2').css('border','1px solid red') 54 }) 55 </script> 56 <script type="text/javascript"> 57 $("button:last").click(function() { 58 var itemB = $('.item-b') 59 $('li.item-1') 60 .closest(itemB) 61 .css('border', '1px solid blue'); 62 }) 63 </script> 64 </body> 65 66 </html> View Code6、next()方法
jQuery是一個合集對象，如果想快速查找指定元素集合中每一個元素緊鄰的后面同輩元素的元素集合，此時可以用next()方法
理解節點查找關系：
如下class="item-1"元素就是紅色部分，那藍色的class="tem-2"就是它的兄弟元素
<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li> </ul>next()無參數
允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素，并根據匹配的元素創建一個新的 jQuery 對象。
注意：jQuery是一個合集對象，所以通過next是匹配合集中每一給元素的下一個兄弟元素next()方法選擇性地接受同一類型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式具體的操作，請參考下邊的代碼
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <link rel="stylesheet" href="imooc.css" type="text/css"> 8 <style> 9 .left { 10 width: auto; 11 height: 120px; 12 } 13 14 .left div { 15 width: 150px; 16 height: 70px; 17 padding: 5px; 18 margin: 5px; 19 float: left; 20 background: #bbffaa; 21 border: 1px solid #ccc; 22 } 23 24 a { 25 display: block; 26 } 27 </style> 28 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> 29 </head> 30 31 <body> 32 <h2>next方法()</h2> 33 <div class="left first-div"> 34 <div class="div"> 35 <ul class="level-1"> 36 <li class="item-1">1</li> 37 <li class="item-2">2</li> 38 <li class="item-3">3</li> 39 </ul> 40 </div> 41 <div class="div"> 42 <ul class="level-2"> 43 <li class="item-1">1</li> 44 <li class="item-2">2</li> 45 <li class="item-3">3</li> 46 </ul> 47 </div> 48 <div class="div"> 49 <ul class="level-3"> 50 <li class="item-1">1</li> 51 <li class="item-2">2</li> 52 <li class="item-3">3</li> 53 </ul> 54 </div> 55 </div> 56 <button>點擊：next無參數</button> 57 <button>點擊：next傳遞表達式</button> 58 <script type="text/javascript"> 59 $("button:first").click(function() { 60 $('li.item-1').next().css('border', '1px solid red') 61 }) 62 </script> 63 64 <script type="text/javascript"> 65 $("button:last").click(function() { 66 //找到所有class=item-3的li 67 //然后給每個li,然后篩選出第一個，加上藍色的邊 68 $('.item-2').next(':first').css('border', '1px solid blue') 69 }) 70 </script> 71 72 </body> 73 74 </html> View Code7、prev()方法
jQuery是一個合集對象，如果想快速查找指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合，此時可以用prev()方法
理解節點查找關系：
如下藍色的class="tem-2"的li元素，紅色的節點就是它的prev兄弟節點
<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li> </ul>prev()無參數
取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合
注意：jQuery是一個合集對象，所以通過prev是匹配合集中每一個元素的上一個兄弟元素prev()方法選擇性地接受同一類型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式具體的操作，請參考下邊的代碼：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <link rel="stylesheet" href="imooc.css" type="text/css"> 8 <style> 9 .left { 10 width: auto; 11 height: 150px; 12 } 13 14 .left div { 15 width: 150px; 16 height: 100px; 17 padding: 5px; 18 margin: 5px; 19 float: left; 20 background: #bbffaa; 21 border: 1px solid #ccc; 22 } 23 24 a { 25 display: block; 26 } 27 </style> 28 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> 29 </head> 30 31 <body> 32 <h2>prev方法()</h2> 33 <div class="left first-div"> 34 <div class="div"> 35 <ul class="level-1"> 36 <li class="item-1">1</li> 37 <li class="item-2">2</li> 38 <li class="item-3">3</li> 39 </ul> 40 </div> 41 <div class="div"> 42 <ul class="level-2"> 43 <li class="item-1">1</li> 44 <li class="item-2">2</li> 45 <li class="item-3">3</li> 46 </ul> 47 </div> 48 <div class="div"> 49 <ul class="level-3"> 50 <li class="item-1">1</li> 51 <li class="item-2">2</li> 52 <li class="item-3">3</li> 53 </ul> 54 </div> 55 </div> 56 <button>點擊：prev無參數</button> 57 <button>點擊：prev傳遞選擇器</button> 58 <script type="text/javascript"> 59 $("button:first").click(function() { 60 $('.item-2').prev().css('border', '1px solid red') 61 }) 62 </script> 63 64 <script type="text/javascript"> 65 $("button:last").click(function() { 66 //找到所有class=item-2的li 67 //然后給每個li,然后篩選出第一個，加上藍色的邊 68 $('.item-3').prev(':last').css('border', '1px solid blue') 69 }) 70 </script> 71 72 </body> 73 74 </html> View Code8、siblings()方法
jQuery是一個合集對象，如果想快速查找指定元集合中每一個元素緊鄰的前面后面同輩元素，此時可以用siblings()方法
理解節點查找關系：
如下藍色的class="tem-2"的li元素，紅色的節點就是它的siblings兄弟節點
<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li> </ul>siblings()無參數
取得一個包含匹配的元素集合中每一個元素緊鄰的前后同輩元素的元素集合
注意：jQuery是一個合集對象，所以通過siblings是匹配合集中每一個元素的前后兄弟元素siblings()方法選擇性地接受同一類型選擇器表達式
同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式具體的操作，請參考下邊的代碼：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <link rel="stylesheet" href="imooc.css" type="text/css"> 8 <style> 9 .left { 10 width: auto; 11 height: 150px; 12 } 13 14 .left div { 15 width: 150px; 16 height: 100px; 17 padding: 5px; 18 margin: 5px; 19 float: left; 20 background: #bbffaa; 21 border: 1px solid #ccc; 22 } 23 24 a { 25 display: block; 26 } 27 </style> 28 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> 29 </head> 30 31 <body> 32 <h2>siblings方法()</h2> 33 <div class="left first-div"> 34 <div class="div"> 35 <ul class="level-1"> 36 <li class="item-1">1</li> 37 <li class="item-2">2</li> 38 <li class="item-3">3</li> 39 </ul> 40 </div> 41 <div class="div"> 42 <ul class="level-2"> 43 <li class="item-1">1</li> 44 <li class="item-2">2</li> 45 <li class="item-3">3</li> 46 </ul> 47 </div> 48 <div class="div"> 49 <ul class="level-3"> 50 <li class="item-1">1</li> 51 <li class="item-2">2</li> 52 <li class="item-3">3</li> 53 </ul> 54 </div> 55 </div> 56 <button>點擊：siblingsv無參數</button> 57 <button>點擊：siblings傳遞選擇器</button> 58 <script type="text/javascript"> 59 $("button:first").click(function() { 60 $('.item-2').siblings().css('border','1px solid red') 61 }) 62 </script> 63 64 <script type="text/javascript"> 65 $("button:last").click(function() { 66 //找到class=item-2的所有兄弟節點 67 //然后篩選出最后一個，加上藍色的邊 68 $('.item-2').siblings(':last').css('border', '2px solid blue') 69 }) 70 </script> 71 72 </body> 73 74 </html> View Code9、add()方法
jQuery是一個合集對象，通過$()方法找到指定的元素合集后可以進行一系列的操作。$()之后就意味著這個合集對象已經是確定的，如果后期需要再往這個合集中添加一新的元素要如何處理？jQuery為此提供add方法，用來創建一個新的jQuery對象 ，元素添加到匹配的元素集合中
.add()的參數可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用。簡單的看一個案例：
操作：選擇所有的li元素，之后需要把p元素也加入到li的合集中
<ul><li>list item 1</li><li>list item 3</li> </ul> <p>新的p元素</p>處理一：傳遞選擇器
$('li').add('p')處理二：傳遞dom元素
$('li').add(document.getElementsByTagName('p')[0])還有一種方式，就是動態創建P標簽加入到合集，然后插入到指定的位置，但是這樣就改變元素的本身的排列了
$('li').add('<p>新的p元素</p>').appendTo(目標位置)具體的操作，請參考下邊的代碼：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <style> 8 .left { 9 width: auto; 10 height: 150px; 11 } 12 13 .left div { 14 width: 150px; 15 height: 120px; 16 padding: 5px; 17 margin: 5px; 18 float: left; 19 background: #bbffaa; 20 border: 1px solid #ccc; 21 } 22 </style> 23 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> 24 </head> 25 26 <body> 27 <h2>add方法()</h2> 28 <div class="left first-div"> 29 <div class="div"> 30 <ul> 31 <li>list item 1</li> 32 <li>list item 2</li> 33 <li>list item 3</li> 34 </ul> 35 <p>新的p元素</p> 36 </div> 37 </div> 38 <div class="right"></div> 39 <br/> 40 <button>點擊：add傳遞元素標簽</button> 41 <button>點擊：add傳遞html結構</button> 42 <script type="text/javascript"> 43 $("button:first").click(function() { 44 //把p元素加到li合集中 45 $('li').add('p').css('background', 'red') 46 }) 47 </script> 48 <script type="text/javascript"> 49 $("button:last").click(function() { 50 //把html結構'<p>新的p元素</p>' 51 //加入到li的合集中，為了能夠在頁面上顯示 52 //需要在重新appendTo要指定的節點處 53 //值得注意：整個結構位置都改變了 54 $('li').add('<p>新的p元素</p>').appendTo($('.right')) 55 }) 56 </script> 57 </body> 58 59 </html> View Code10、each()方法
jQuery是一個合集對象，通過$()方法找到指定的元素合集后可以進行一系列的操作。比如我們操作$("li").css('') 給所有的li設置style值，因為jQuery是一個合集對象，所以css方法內部就必須封裝一個遍歷的方法，被稱為隱式迭代的過程。要一個一個給合集中每一個li設置顏色，這里方法就是each
.each() 方法就是一個for循環的迭代器，它會迭代jQuery對象合集中的每一個DOM元素。每次回調函數執行時，會傳遞當前循環次數作為參數(從0開始計數
所以大體上了解3個重點：
each是一個for循環的包裝迭代器 each通過回調的方式處理，并且會有2個固定的實參，索引與元素 each回調方法中的this指向當前迭代的dom元素看一個簡單的案例
<ul><li>慕課網</li><li>Aaron</li> </ul>開始迭代li，循環2次
$("li").each(function(index, element) {index 索引 0,1element是對應的li節點 li,lithis 指向的是li })這樣可以在循環體會做一些邏輯操作了，如果需要提前退出，可以以通過返回 false以便在回調函數內中止循
具體的操作，請參考下邊的代碼:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <style> 8 .left { 9 width: auto; 10 height: 150px; 11 } 12 13 .left div { 14 width: 150px; 15 height: 120px; 16 padding: 5px; 17 margin: 5px; 18 float: left; 19 background: #bbffaa; 20 border: 1px solid #ccc; 21 } 22 </style> 23 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> 24 </head> 25 26 <body> 27 <h2>each方法</h2> 28 <div class="left first-div"> 29 <div class="div"> 30 <ul> 31 <li>list item 1</li> 32 <li>list item 2</li> 33 <li>list item 3</li> 34 </ul> 35 </div> 36 <div class="div"> 37 <ul> 38 <li>list item 4</li> 39 <li>list item 5</li> 40 <li>list item 6</li> 41 </ul> 42 </div> 43 </div> 44 45 <br/> 46 <button>點擊：each方法遍歷元素</button> 47 <button>點擊：each方法回調判斷</button> 48 <script type="text/javascript"> 49 $("button:first").click(function() { 50 //遍歷所有的li 51 //修改每個li內的字體顏色 52 $("li").each(function(index, element) { 53 $(this).css('color','red') 54 }) 55 56 }) 57 </script> 58 <script type="text/javascript"> 59 $("button:last").click(function() { 60 //遍歷所有的li 61 //修改偶數li內的字體顏色 62 $("li").each(function(index, element) { 63 if (index % 2) { 64 $(this).css('color','blue') 65 } 66 }) 67 }) 68 </script> 69 </body> 70 71 </html> View Code?
轉載于:https://www.cnblogs.com/Qian123/p/5577402.html
總結
以上是生活随笔為你收集整理的jQuery基础修炼圣典—DOM篇（二）jQuery遍历的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PopupWindow的基本使用
- 下一篇： AS的快捷键