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>
时间： 2024-08-01 10:46:24