jQuery 遍歷函數包括了用於篩選、查找和串聯元素的方法。
| 函數 | 描述 |
|---|---|
| .add() | 將元素添加到匹配元素的集合中。 |
| .andSelf() | 把堆棧中之前的元素集添加到當前集合中。 |
| .children() | 獲得匹配元素集合中每個元素的所有子元素。 |
| .closest() | 從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素。 |
| .contents() | 獲得匹配元素集合中每個元素的子元素，包括文本和注釋節點。 |
| .each() | 對 jQuery 對象進行迭代，為每個匹配元素執行函數。 |
| .end() | 結束當前鏈中最近的一次篩選操作，並將匹配元素集合返回到前一次的狀態。 |
| .eq() | 將匹配元素集合縮減為位於指定索引的新元素。 |
| .filter() | 將匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素。 |
| .find() | 獲得當前匹配元素集合中每個元素的后代，由選擇器進行篩選。 |
| .first() | 將匹配元素集合縮減為集合中的第一個元素。 |
| .has() | 將匹配元素集合縮減為包含特定元素的后代的集合。 |
| .is() | 根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。 |
| .last() | 將匹配元素集合縮減為集合中的最后一個元素。 |
| .map() | 把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新 jQuery 對象。 |
| .next() | 獲得匹配元素集合中每個元素緊鄰的同輩元素。 |
| .nextAll() | 獲得匹配元素集合中每個元素之后的所有同輩元素，由選擇器進行篩選（可選）。 |
| .nextUntil() | 獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .not() | 從匹配元素集合中刪除元素。 |
| .offsetParent() | 獲得用於定位的第一個父元素。 |
| .parent() | 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。 |
| .parents() | 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。 |
| .parentsUntil() | 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。 |
| .prev() | 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。 |
| .prevAll() | 獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。 |
| .prevUntil() | 獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .siblings() | 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。 |
| .slice() | 將匹配元素集合縮減為指定范圍的子集。 |
<head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> $(function(){ //設置默認選中項 $("select:eq(0)").val(2); //如果多選，將返回一個數組，其包含所選的值。 $.each($("select:eq(0)").val(),function(i,v){ //$("select:eq(0)").val()應返回一個數組 //遍歷數組有5種方式 console.log(v); console.log(數組名[i]) //能用$(this)或者this的function()函數里就不用傳值了 alert($(this)[0]);//不理解但能取出值 //=========this取值================ //$(this)[0] == this = v alert(this); alert(this[0]);//不理解但能取出值 }); //獲取Select選中匹配元素的當前值,即[即使多選也只]取得第一個匹配元素的val內容,是字符串所以要split()轉成數組 $.each($("select:eq(0) :selected").val().split(),function(i,v){ //同樣5種方式 console.log(v); }); //例遍dom元素比如selcted選項 $.each($("select:eq(0) :selected"),function(i,v){//遍歷選中的 //$.each($("select:eq(0) option"),function(i,v){//遍歷全部元素 console.log(v);//遍歷出<option value="2">香蕉</option>類似這種html元素 //注意取值 console.log(v.name); console.log(v.value); console.log(v.text); //=========this取值================= console.log(this)// 和上面取法類似，this相當於v console.log(this.name); console.log(this.value); console.log(this.text); //=======$(this)取值============ //$(this)[0] == this = v alert($(this).val()); alert($(this).text())======alert($(this).html()); }); //====================JQuery中使用each，如果需要退出 each 循環可使回調函數返回 return false;=========================== //第一個為對象的成員名稱或數組的索引，第二個為對應變量值或內容 //例遍數組，同時使用元素索引和內容。（i是索引，n是內容） $.each([0,1,2], function(i, n){ //遍歷數組有5種方式 alert( "Item #" + i + ": " + n );//取值有兩種方式1、數組名[i] 2、n alert(數組名[i]); //=========$(this)取值================ alert($(this)[0]);//不理解但能取出值 //=========this取值================ alert(this); alert(this[0]);//不理解但能取出值 }); //例遍對象，同時使用成員名稱和變量內容。（i是成員名稱，n是變量內容） $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); }); //例遍dom元素，此處以一個input表單元素作為例子 /*如果你dom中有一段這樣的代碼 <input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444"/> */ $.each($("input:hidden"), function(i,val){ alert(val); //輸出[object HTMLInputElement]，因為它是一個表單元素。 alert(i); //輸出索引為0，1，2，3 //注意底下取值 alert(val.name); //輸出name的值 alert(val.value); //輸出value的值 //=========this取值================= console.log(this)// 和上面取法類似，this相當於val console.log(this.name); console.log(this.value); console.log(this.text); //=========$(this)取值============ //$(this)[0] == this = v alert($(this).val()); alert($(this).text())======alert($(this).html()); }); //================================================================== //事實證明雙層循壞this,$(this)不管用，只能用function()里的函數value //循壞二維數組 $.each([[1, 4, 3], [4, 6, 6], [7, 20, 9]] , function(i, item){ $.each(item,function(k,v){//item相當於取每一個一維數組， console.log(v); }); }); //循壞多個對象【常用在json串中】 $.each( [{ name: "a", lang: "b" },{ name: "John", lang: "JS" }], function(i, n){ $.each(n,function(k,v){ alert( "Name: " + k + ", Value: " + v ); }); }); each和map的比較 /*下面的例子是獲取每一個多框的ID值； each方法： 定義一個空數組，通過each方法，往數組添加ID值；最后將數組轉換成字符串后，alert這個值； $(function(){ var arr = []; $(":checkbox").each(function(index){ arr.push(this.id); }); var str = arr.join(","); alert(str); }) map方法: 將每個:checkbox執行return this.id；並將這些返回值，自動的保存為jQuery對象，然后用get方法將其轉換成原生Javascript數組，再使用join方法轉換成字符串，最后alert這個值； $(function(){ var str = $(":checkbox").map(function() { return this.id; }).get().join(); alert(str); }) 當有需一個數組的值的時候，用map方法，很方便。*/ }); </script> </head> <table> <tr> <td> <!--multiple設定下拉框可以多選，size設定下拉框不呈現下拉方式，--> <select size="12" id="One" multiple="multiple"> <option value='1'>蘋果</option> <option value="2">香蕉</option> <option value="3">草莓</option> <option value="4">橘子</option> </select> </td> <td> <input type="button" value=">>>"><br> <input type="button" value=" > "><br> <input type="button" value=" < "><br> <input type="button" value="<<<"><br> </td> <td> <select size="12" id="two" multiple="multiple"> <option value="5">葡萄</option> </select> </td> <td> <input type="button" value=" up "><br><br> <input type="button" value="down"><br> </td> </tr> </table>