您的位置:首页 > Web前端 > JQuery

jQuery 遍历

2014-02-10 15:21 495 查看
.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("");
选中所有段落,然后将所选内容缩减为只包含第一和第二个段落


————————————————————各种找爹找儿子找同胞————————————————————
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: