在本章节中我会给大家提到一些使用jQuery遍历DOM元素的方法。
一、按索引筛选元素
(1)$("selector").eq(index); //.eq()方法 用于在匹配集合中得到index索引的元素,该方法在前面给大家介绍过。
(2)$("selector").first(); //.first()方法 用于在匹配元素集合中获取第一个元素
(3)$("selector").last(); //.last()方法 用于在匹配元素集合中获取最后一个元素
(4)$("selector").slice(start[,end]); //.slice()方法 用于在匹配元素集合中获取从索引start到end的所有元素,其中end参数可不传。
二、筛选方法
(1)$("selector1").filter("selector2"); //.filter()方法 用于在匹配selector1的元素集合中筛选出匹配selector2的元素集合。
三、检查元素
(1)$("selector1").is("selector2"); //.is()方法 用于在匹配selector1的元素集合中筛选出匹配selector2的元素集合,注:其实filter方法也是在调用is()方法实现。
例:$("input#radio1").is(":checked"); //放回一个true或false
四、映射数字
(1)$("selector").map(callback(index,domElement)); //.map()方法 用于将当前匹配元素集合中的每一个元素传入回调函数(callback)中,并返回一个新的jQuery对象,也就相当于通过该方法重组匹配集合内容。其中index是元素索引,domElement是当前索引对应的jQuery对象。
五、移除对象
(1)$("selector").not(expr); //.not()方法 用于在匹配selector元素集合中移除指定的集合,expr可以为选择器(selector)也可以是一个函数,若为选择器则在selector集合中移除符合expr的集合;若expr为一个函数,则只有当当该函数返回true时才会移除当前索引对应的jQuery对象。
六、搜索父元素
(1)$("selector").parents([selector1]); //.parents()方法 用于在匹配元素集合中找出所有元素的祖先(所有上级)元素。其中selector1参数是可选的,代表在所有祖先元素中进行二次筛选。
例:$("#li_1").parents("div"); 用于查找id为li_1的所有上级标签并且为div标签的对象集合。
(2)$("selector").parentsUntil([selector1]); //.parentsUntil()方法 用于在匹配集合中找出所有元素的祖先元素直至找到selector1为止,但不包含selector1。
例:$("#li_1").parentsUntil("body"); //查找id为li_1的所有上级标签 直至找到body为止,但不包含body标签。
(3)$("selector").parent([selector1]); //.parent()方法 用于在匹配元素集合中找出其父元素的集合,其中selector1是可选参数,代表该父元素应该满足的条件。该方法与parents不同之处在于parents方法 查找的是多个层级 而parent方法只搜索了一个层级。
(4)$("selectro").closest(selector1[,context]); //.closest()方法 用于从当前元素开始向上遍历DOM树并获取与选择器匹配的第1个元素。其中参数context是可选的 代表一个DOM元素,用于匹配该元素。
例:$("li.item-a").closest("ul"); //访问一个应用了类item-a的li标签,查找其上面的第一个ul标签对象。
(5)$("selector").offsetParent(); //.offsetParent()方法 用于搜索符合selector的上级的第一个已定位(含有position:relative、absolute或fixed属性)的元素
七、搜索同辈元素
(1)$("selector").next([selector1]); //.next()方法 获取匹配元素之后的单个同辈元素,可选参数selector1是对同辈元素的筛选。
(2)$("selector").nextAll([selector1]); //.nextAll()方法 获取匹配元素之后的所有同辈元素,可选参数selector1是对同辈元素的筛选。
(3)$("selector").nextUntil([selector1]); //.nextUntil()方法 获取匹配元素之后的所有同辈元素直至符合selector1条件为止。
(4)$("selector").prev([selector1]); //.prev()方法 获取匹配元素之前的单个同辈元素,与.next()方法相反
(5)$("selector").prevAll([selector1]); //.prevAll()方法 获取匹配元素之前的所有同辈元素,与.nextAll()方法相反
(6)$("selector").prevUntil([selector1]);
(7)$("selector").siblings([selector1]); //.siblings()方法 获取匹配元素的所有同辈元素
八、搜索子元素
(1)$("selector").children([selector1]); //.children()方法 获取匹配元素的子元素集合,可以通过可选参数selector1进行进一步的筛选。
(2)$("selector").contents(); //.contents()方法 获取每个匹配元素中的所有子节点(包括文本节点)或文档内容(正对iframe元素,可以获得其内嵌页面的html)。
(3)$("selector").find(selector1); //.find()方法 在匹配selector元素集合中查找匹配元素集合selector1的元素集合。
例:$("div").find("span"); 在所有的div标签中找到其中的所有span标签。
九、添加元素
(1)$("selector").add(selector1[,context]); //.add()方法 该方法是在匹配元素集合中添加selectior1元素,与not()方法的作用相反。其中selector1可以是一个jQuery对象、DOM对象以及HTML标签。而可选参数context是指定要插入上下文的位置。
十、串联操作
(1)$("selector").end(); //.end()方法 主要是用于恢复到上一次结构改变前的状态(当我们对一个集合进行多次筛选时会不对的该表集合的结构)。
例:$("li").next().end()<==>$("li")
(2)$("selector").andSelf(); //.andSelf()方法 主要是将先前选择的元素添加到当前选择的元素集合中。
例:$("#xxx").nextAll().andSelf(); //代表id为xxx的元素 和其之后所有同辈元素的总和。
十一、对象操作
(1)$.each(collection,callback(indexInArray,valueOfElement)); //.each()方法 用于遍历collection数组 ,其中callback是回调函数 注:该方法与$("selector").each(function(){})不同,$.each()方法可以遍历所有的的数组,而$("selector").each(function(){});只能遍历jQuery对象数组。
(2)$.contains(container,contained); //.contains()方法 用于检测一个contained对象是否包含在container对象中,若包含返回true否则返回false。
例:$.contains($("div")[],$("p")[0]); //检测第一个p标签是不是在第一个div标签内。
(3)$.isEmptyObject(object); //.isEmptyObject()方法 用于判定一个对象是否为空(不包含任何属性的对象为空),若为空返回true
例:$.isEmptyObject({}); //返回 true
$.isEmptyObject({foo:"bar"}); //返回false
(4)$.isPlainObject(object); //.isPlainObject()方法 用于判定object是否为一个普通对象(如:“{}”或者 new Object对象)。
(5)$.isXMLDoc(node); //.isXMLDoc()方法 用于判定node节点师傅位于一个XML文档中(或是否为文档)
(6)$.extend(target,object1); //.extend()方法 将两个或多个对象的内容合并到第一个对象target中,以实现第一个对象的扩展并返回被修改的对象。
例:$.extend({foo:"aa"},{bar:"bb"}); //结果为:{foo:"aa",bar:"bb"}
十二、数组处理
(1)$.grep(array,function(elementOfArray,indexInArray)); //.grep()方法 此方法是从一个数组中查找满足指定筛选函数的元素,但不回音响原始数组。其中array是待遍历的数组,function方法是用来进行筛选的函数。最后得到的数组均是该函数返回值为true的元素组成的数组。
(2)$.inArray(value,array); //.inArray()方法 此方法是在array数组中查找值为value的元素 索引,若没有找到返回-1
(3)$.makeArray(obj); //.makeArray()方法 该方法是将obj对象转化为真正的javascript数组。
(4)$.map(array,callback(elementOfArray,indexInArray)); //.map()方法 该方法是将数组array中的元素值通过函数callback转换。
(5)$.merge(first,second); //.merge()方法 该方法是将两个数组进行合并,最后返回修改后的第一个数组。
(6)$.unique(array); //.unique()方法 用于取出array数组中的重复项。
(7)$.isArray(obj); //.isArray()方法 用于判断obj是否是一个数组。
(8)$(selector).toArray(); //.toArray()方法 该方法是将匹配元素集合中的所有DOM元素恢复为一个数组。
(9)$.parseJSON(json); //.parseJSON()方法 该方法是对一个JSON字符串进行解析并返回生成的JavaScript对象。
例:var user=$.parseJSON('{"name":"张三"}');
alert(user.name); //弹出"张三"
十三、函数处理
(1)$.globalEval(code); //.globalEval()方法 该方法用于执行全局JavaScript代码.
例:$.globalEval("var msg="hello!";");
$.globalEval("alert(msg);");
(2)$.isFunction(obj); //.isFunction()方法 用于检测obj对象是否为一个函数
(3)$.proxy(function,context); //.proxy()方法 此方法接受一个函数funciton,并返回一个具有特定上下文context的新函数。
例:var obj={name:"张三",test:funciton(){alert(this.name);}};
$("#test").click($.proxy(obj.test,obj));
(4)$.noop(); //.noop()方法 该方法返回一个空函数,在有些方法调用是需要传入函数,但有些特殊情况是需要传入空函数的。那么这个函数就派上用场了。
十四、字符串处理
(1)$.trim(str); //.trim()方法 取出str两端的空格。
十五、数据存储
(1)$(selector).data(key,value/obj/key/无); //.data()方法 可用于存储与匹配元素相关联的任意数据并返回jQuery对象
例:$("body").data("foo",52);
$("body").data("bar",{myType:"test",count:40});
$("body").data("foo"); //得到 值 52
$("body").data(); //得到:{foo:52,bar:{myType:"test",count:40}}
(2)$(selector).removeData([name]); //.removData()方法 用于移除先前在元素中存储的数据并返回jQuery对象,其中name是可选参数,用于指定要删除的数据。若不指定则删除所有数据。
十六、检测浏览器
(1)$.browser //.browser属性 该属性可以获得当前浏览器的版本信息
例:if($.browser.msie) alert("浏览器是IE:"+$.browser.version);
if($.browser.mozilla) alert("浏览器是Firefox:"+$.browser.version);
(2)$.support //.support属性 该属性用于战士不同浏览器各自特性和bug的集合
到这已将jQuery中常用的《遍历DOM元素》方法进行了罗列,后面会罗列出一些《jQuery文档处理》方法。