遍历同辈节电的方法_第三章《遍历DOM元素》

在本章节中我会给大家提到一些使用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文档处理》方法。