jQuery中常用的遍历函数用法实例.docx

jQuery中常用的遍历函数用法实例jQuery中常用的遍历函数用法实例1.children()函数children()函数用于选取每个匹配元素的子元素，并以jQuery对象的形式返回。你还可以使用选择器进一步缩小筛选范围，筛选出符合指定选择器的元素。用法示例如下：//返回jQuery对象所有匹配元素的标识信息数组//每个元素形如：tagName或tagName#id(如果有id的话)functiongetTagsInfo($doms){return$doms.map(function(){returnthis.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#n142.filter()函数filter()函数用于筛选出符合指定表达式的元素，并以jQuery对象的形式返回。这里的表达式包括：选择器(字符串)、DOM元素(Element)、jQuery对象、函数。用法示例如下：/*$("li")匹配n4、n5、n6这3个元素*///筛选出所有索引为偶数(序号为奇数)的元素，即n4、n6document.writeln($("li").filter(":even").length);//2//筛选出包含类名foo的元素，即n5document.writeln($("li").filter($(".foo")).length);//1//筛选出所有带有class属性的元素，即n5、n6document.writeln($("li").filter("[class]").length);//2/*$("input")匹配n8、n9这两个元素*///筛选出选中的元素，即n9document.writeln($("input").filter(":checked").length);//1varinput=document.getElementsByName("codeplayer");//筛选出所有的input元素，即n8、n9document.writeln($("input").filter(input).length);//2//$("p")匹配n1、n2、n7这3个元素//筛选出id和class属性相等的元素，即n2、n7var$result=$("p").filter(function(index,element){//函数内的this===elementreturnthis.id==this.className;});document.writeln($result.length);//23.not()函数not()函数用于从匹配元素中删除符合指定表达式的元素，并以jQuery对象的形式返回保留的元素。这里的表达式包括：选择器(字符串)、DOM元素(Element)、jQuery对象、函数。与该函数相对的是add()函数，用于向当前匹配元素中添加符合指定表达式的元素。用法示例如下：/*$("li")匹配n4、n5、n6这3个元素*///排除掉n6，剩下2个元素n4、n5document.writeln($("li").not("#n6").length);//2//排除掉带类名foo的元素，剩下n4、n6document.writeln($("li").not($(".foo")).length);//2//排除掉