jQuery中常用的遍历函数用法实例总结

children()函数用于选取每个匹配元素的子元素,并以jQuery对象的形式返回。
你还可以使用选择器进一步缩小筛选范围,筛选出符合指定选择器的元素。

用法示例如下:

// 返回jQuery对象所有匹配元素的标识信息数组 // 每个元素形如:tagName或tagName#id(如果有id的话) function getTagsInfo($doms){ return $doms.map(function(){ return this.tagName + (this.id ? "#" + this.id : ""); }).get(); } // 匹配id为n1的元素 var $n1 = $("#n1"); // 匹配n1的所有子元素 var $menu_li = $n1.children(); document.writeln( getTagsInfo( $menu_li ) ); // LI#n2,LI#n7,LI#n13 // 匹配n1所有含有类名active的子元素 var $active_menu_li = $n1.children(".active"); document.writeln( getTagsInfo( $active_menu_li ) ); // LI#n2 // 匹配$menu_li每个元素的所有span子元素 var $span = $menu_li.children("span"); document.writeln( getTagsInfo( $span ) ); // SPAN#n3,SPAN#n8,SPAN#n14

2. filter()函数

filter()函数用于筛选出符合指定表达式的元素,并以jQuery对象的形式返回。
这里的表达式包括:选择器(字符串)、DOM元素(Element)、jQuery对象、函数。

用法示例如下:

/* $("li") 匹配n4、n5、n6这3个元素 */ //筛选出所有索引为偶数(序号为奇数)的元素,即n4、n6 document.writeln( $("li").filter( ":even" ).length ); // 2 //筛选出包含类名foo的元素,即n5 document.writeln( $("li").filter( $(".foo") ).length ); // 1 //筛选出所有带有class属性的元素,即n5、n6 document.writeln( $("li").filter( "[class]" ).length ); // 2 /* $("input") 匹配n8、n9这两个元素 */ //筛选出选中的元素,即n9 document.writeln( $("input").filter( ":checked" ).length ); // 1 var input = document.getElementsByName("codeplayer"); //筛选出所有的input元素,即n8、n9 document.writeln( $("input").filter( input ).length ); // 2 //$("div") 匹配n1、n2、n7这3个元素 //筛选出id和class属性相等的元素,即n2、n7 var $result = $("div").filter( function(index, element){ // 函数内的this === element return this.id == this.className; } ); document.writeln( $result.length ); // 2

3. not()函数

not()函数用于从匹配元素中删除符合指定表达式的元素,并以jQuery对象的形式返回保留的元素。
这里的表达式包括:选择器(字符串)、DOM元素(Element)、jQuery对象、函数。
与该函数相对的是add()函数,用于向当前匹配元素中添加符合指定表达式的元素。

用法示例如下:

/* $("li") 匹配n4、n5、n6这3个元素 */ //排除掉n6,剩下2个元素n4、n5 document.writeln( $("li").not( "#n6" ).length ); // 2 //排除掉带类名foo的元素,剩下n4、n6 document.writeln( $("li").not( $(".foo") ).length ); // 2 //排除掉所有带有class属性的元素,剩下n4 document.writeln( $("li").not( "[class]" ).length ); // 1 /* $("input") 匹配n8、n9这两个元素 */ //排除掉被选中的元素,剩下n8 document.writeln( $("input").not( ":checked" ).length ); // 1 var input = document.getElementsByTagName("input"); //排除掉所有input元素,返回空的jQuery对象 document.writeln( $("input").not( input ).length ); // 0 /* $("div") 匹配n1、n2、n7这3个元素 */ //排除掉id和class属性相等的元素,剩下n1 var $result = $("div").not( function(index, element){ // 函数内的this === element return this.id == this.className; } ); document.writeln( $result.length ); // 1

4. add()函数

add()函数用于向当前匹配元素中添加符合指定表达式的元素,并以jQuery对象的形式返回。
这里的表达式包括:选择器(字符串)、HTML内容(字符串)、DOM元素(Element)、jQuery对象。
与该函数相对的是not()函数,用于从当前匹配元素中移除符合指定表达式的元素。

用法示例如下:

//返回jQuery对象所有匹配元素的标识信息数组 //每个元素形如:#id function getTagsInfo($doms){ return $doms.map(function(){ return "#" + this.id; }).get(); } //匹配所有的p元素,再加上所有的label元素 var $elements1 = $("p").add("label"); document.writeln( getTagsInfo( $elements1 ) ); // #n1,#n4,#n9,#n11 var $matches = $("span.active").add( document.getElementsByTagName("label") ); document.writeln( getTagsInfo( $matches ) ); // #n4,#n8,#n11,#n12 var $elements2 = $("label").add( $("strong") ); document.writeln( getTagsInfo( $elements2 ) ); // #n4,#n7,#n11 var $elements3 = $("span.active").add( "label", $("#n9") ); document.writeln( getTagsInfo( $elements3 ) ); // #n8,#n11,#n12 var $elements4 = $("p").add(".active").add("span:only-child"); document.writeln( getTagsInfo( $elements4 ) ); // #n1,#n3,#n6,#n7,#n8,#n9,#n12

5. slice()函数

slice()函数用于选取匹配元素中一段连续的元素,并以jQuery对象的形式返回。
该函数属于jQuery对象(实例)。

用法示例如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggjyp.html