jQuery 遍历
.add()
add() 方法将元素添加到匹配元素的集合中 .add(selector)//字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式。 .add(elements)//添加到匹配元素集合的一个或多个元素 .add(html)//添加到匹配元素集合的 HTML 片段 .add(jQueryObject)//添加到匹配元素集合的已有 jQuery 对象 .add(selector, context)//字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式;选择器开始进行匹配的位置。 $("div").css("border", "2px solid red") .add("p") .css("background", "yellow");//找到所有 div 并添加边框。然后将所有段落添加到该 jQuery 对象,并把它们的背景设置为黄色
.andSelf()
把堆栈中之前的元素集添加到当前集合 $("div").find("p").andSelf().addClass("border"); $("div").find("p").addClass("background");//找到所有 div,以及其中的所有段落,并为它们添加两个类名。请注意,由于未使用 .andSelf(),div 没有黄色背景色 <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> $("li.third-item").nextAll().andSelf() .css("background-color", "red");//代码的结果是项目 3,4,5 拥有红色背景 首先,初始的选择器会定位项目 3,初始化的堆栈存有仅包含该项目的集合。调用 .nextAll() 会将项目 4, 5 的集合推入堆栈。最后,调用 .andSelf() 会合并这两个集合,所创建的 jQuery 对象指向按照文档顺序的所有三个项目:{[<li.third-item>,<li>,<li> ]} 个人理解:把之前匹配道德集合和当前集合合并在一起
.children()
$("div").children(".selected").css("color", "blue");//找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色 .children(selector)//字符串值,包含匹配元素的选择器表达式 返回匹配元素集合中每个元素的子元素,添加可选参数可通过选择器进行过滤 .find() 和 .children() 方法类似,不过后者只沿着 DOM 树向下遍历单一层级。 与大多数 jQuery 方法一样,.children() 不返回文本节点;如果需要获得包含文本和注释节点在内的所有子节点,请使用 .contents()。
.closest()
.closest(selector)//closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上 $( document ).bind("click", function( e ) { $( e.target ).closest("li").toggleClass("hilight"); });//当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景
.parents() 和 .closest() 方法
.closest() | .parents() |
---|---|
从当前元素开始 | 从父元素开始 |
沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 | 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。 |
返回包含零个或一个元素的 jQuery 对象 | 返回包含零个、一个或多个元素的 jQuery 对象 |
.contents()
.contents() 获得匹配元素集合中每个元素的子节点,包括文本和注释节点 $("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");//找到段落中的所有文本节点,并用粗体标签包装它们
.each()
$(selector).each(function(index,element))//each() 方法为每个匹配元素规定运行的函数。返回 false 可用于及早停止循环 index - 选择器的 index 位置;element - 当前的元素(也可使用 "this" 选择器) $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); });//输出每个 li 元素的文本
.end()
end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态 $('ul.first').find('.foo').css('background-color', 'red') .end().find('.bar').css('background-color', 'green');//把所有方法调用串联在一起
.eq()
.eq(index)将匹配元素集缩减值指定 index 的一个 $("body").find("div").eq(2).addClass("blue");//通过为 index 为 2 的 div 添加适当的类,将其变为蓝色
.filter()
将匹配元素集合缩减为匹配指定选择器的元素 .filter(selector)//字符串值,包含供匹配当前元素集合的选择器表达式 $("div").css("background", "#c8ebcc") .filter(".middle") .css("border-color", "red");//改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框
.find()
find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选 .find(selector) $("p").find("span").css('color','red');//搜索所有段落中的后代 span 元素,并将其颜色设置为红色
.first()
first() 将匹配元素集合缩减为集合中的第一个元素 $("p span").first().addClass('highlight');//高亮显示段落中的第一个 span
.has()
has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集 .has(selector)//字符串值,包含匹配元素的选择器表达式 $('li').has('ul').css('background-color', 'red') 该调用的结果是,项目 2 的背景被设置为红色,这是因为该项目是后代中唯一拥有 <ul> 的 <li> 详细说明 如果给定一个表示 DOM 元素集合的 jQuery 对象,.has() 方法用匹配元素的子集来构造一个新的 jQuery 对象。所使用的选择器用于检测匹配元素的后代;如果任何后代元素匹配该选择器,该元素将被包含在结果中。
.is()
.is(selector) 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true var isFormParent = $("input[type='checkbox']").parent().is("form"); $("div").text("isFormParent = " + isFormParent);//返回 false,因为 input 元素的父元素是 p 元素,若改为.parents(),则true
.last()
last() 将匹配元素集合缩减为集合中的最后一个元素 $("p span").last().addClass('highlight');//高亮显示段落中的最后一个 span
.map()
.map(callback(index,domElement))//把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象 $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") );//构建表单中所有值的列表
.next()
.next(selector)//next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素 $("p").next(".selected").css("background", "yellow");//查找每个段落的下一个同胞元素,仅选中类名为 "selected" 的段落 <p>Hello</p> <p class="selected">Hello Again</p> <div><span>And Again</span></div>选中每个<p>的后一个元素,即第二个<p>和<div>
.nextAll()
nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素,由选择器筛选是可选的。.nextAll(selector) $("div:first").nextAll().addClass("after")//查找第一个 div 之后的所有类名,并为他们添加类名
.nextUntil()
nextUntil() 获得每个元素所有跟随的同胞元素,但不包括被选择器、DOM 节点或已传递的 jQuery 对象匹配的元素 .nextUntil(selector,filter) .nextUntil(element,filter) selector 字符串值,包含指示在何处停止匹配跟随的同胞元素的选择器表达式。 element 指示在何处停止匹配跟随的同胞元素的 DOM 节点或 jQuery 对象。 filter 字符串值,包含用于匹配元素的选择器表达式。 $("#term-2").nextUntil("dt").css("background-color", "red"); var term3 = document.getElementById("term-3"); $("#term-1").nextUntil(term3, "dd").css("color", "blue");一个参数查找跟随 <dt id="term-2"> 的同胞元素,直到下一个 <dt>,然后将它们设置为红色背景色。两个参数同时,找到跟随 <dt id="term-1"> 的 <dd> 同胞元素,直到 <dt id="term-3">,并为它们设置蓝色文本颜色。
.not()
.not(element) .not(selector) $("p").not("#selected")//从包含所有段落的集合中删除 id 为 "selected" 的段落
.offsetParent()
offsetParent() 获得被定位的最近祖先元素//类似position: relative; $('li.item-a').offsetParent().css('background-color', 'red');//设置类名为 item-a 的 li 元素的最近定位父元素的背景色
.parent()
.parent(selector)//parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的 $("p").parent(".selected")//查找每个段落的带有 "selected" 类的父元素
.parents()
.parents(selector)//获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的 $("b").parents()//查找每个 b 元素的所有父元素
.parentsUntil()
.parentsUntil(selector,filter) .parentsUntil(element,filter) $("li.item-a").parentsUntil(".level-1") .css("background-color", "red"); $("li.item-2").parentsUntil( $("ul.level-1"), ".yes" ) .css("border", "3px solid blue");//查找 <li class="item-a"> 的祖先元素,直到 <ul class="level-1">,并将它们设置为红色背景。同时,找到 <li class="item-2"> 的所有类名为 "yes" 的祖先元素,直到 <ul class="level-1">,然户为它们设置蓝色边框 在 .level-1中查找 item-a的父元素,但查找结果不包括 .level-1的内容
.prev()
.prev(selector)//prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的 $("p").prev(".selected")//检索每个段落,找到类名为 "selected" 的前一个同胞元素
.prevAll()
.prevAll(selector)//prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素,使用选择器进行筛选是可选的 $("div:last").prevAll().addClass("before");//定位最后一个 div 之前的所有 div,并为它们添加类
.prevUntil()
.prevUntil(selector, filter) .prevUntil(element, filter) prevUntil() 方法获得当前匹配元素集合中每个元素的前面的同胞元素,但不包括被选择器、DOM 节点或 jQuery 对象匹配的元素 $("#term-2").prevUntil("dt").css("background-color", "red"); var term1 = document.getElementById('term-1'); $("#term-3").prevUntil(term1, "dd").css("color", "green"); 查找 <dt id="term-2"> 之前的同胞元素,直到前一个 <dt>,并将它们设置为红色。同时,查找 <dt id="term-3"> 前面的 <dd> 同胞,直到 <dt id="term-1">,并把它们设置为蓝色文本 $("#term-2").prevUntil("dt"),两个之间,不包括本身 $("#term-3").prevUntil(term1, "dd") #term-3前面的dd同胞,直到term1(包括term1下的子元素)
.siblings()
.siblings(selector) siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的 $("p").siblings(".selected")//查找每个 p 元素的所有类名为 "selected" 的所有同胞元素
.slice()
.slice(selector,end)//slice() 把匹配元素集合缩减为指定的指数范围的子集(基于 0 的整数值) $("p").slice(0, 2).wrapInner(""); 选中所有段落,然后将所选内容缩减为只包含第一和第二个段落
————————————————————各种找爹找儿子找同胞————————————————————