1.列表
jQuery 遍历函数
jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。
函数 | 描述 |
---|---|
.add() | 将元素添加到匹配元素的集合中。 |
.andSelf() | 把堆栈中之前的元素集添加到当前集合中。 |
.children() | 获得匹配元素集合中每个元素的所有子元素。 |
.closest() | 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。 |
.contents() | 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。 |
.each() | 对 jQuery 对象进行迭代,为每个匹配元素执行函数。 |
.end() | 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。 |
.eq() | 将匹配元素集合缩减为位于指定索引的新元素。 |
.filter() | 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。 |
.find() | 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。 |
.first() | 将匹配元素集合缩减为集合中的第一个元素。 |
.has() | 将匹配元素集合缩减为包含特定元素的后代的集合。 |
.is() | 根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。 |
.last() | 将匹配元素集合缩减为集合中的最后一个元素。 |
.map() | 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。 |
.next() | 获得匹配元素集合中每个元素紧邻的同辈元素。 |
.nextAll() | 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。 |
.nextUntil() | 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。 |
.not() | 从匹配元素集合中删除元素。 |
.offsetParent() | 获得用于定位的第一个父元素。 |
.parent() | 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。 |
.parents() | 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。 |
.parentsUntil() | 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。 |
.prev() | 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。 |
.prevAll() | 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。 |
.prevUntil() | 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。 |
.siblings() | 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。 |
.slice() | 将匹配元素集合缩减为指定范围的子集。 |
2.jQuery 遍历 - add() 方法
实例
找到所有 div 并添加边框。然后将所有段落添加到该 jQuery 对象,并把它们的背景设置为黄色:
$("div").css("border", "2px solid red") .add("p") .css("background", "yellow");
定义和用法
add() 方法将元素添加到匹配元素的集合中。
语法 1
.add(selector)
参数 | 描述 |
---|---|
selector | 字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式。 |
语法 2
.add(elements)
参数 | 描述 |
---|---|
elements | 添加到匹配元素集合的一个或多个元素。 |
语法 3
.add(html)
参数 | 描述 |
---|---|
html | 添加到匹配元素集合的 HTML 片段。 |
语法 4
.add(jQueryObject)
参数 | 描述 |
---|---|
jQueryObject | 添加到匹配元素集合的已有 jQuery 对象。 |
语法 5
.add(selector, context)
参数 | 描述 |
---|---|
selector | 字符串值,表示查找供添加到匹配元素集合的元素的选择器表达式。 |
context | 选择器开始进行匹配的位置。 |
3.jQuery 遍历 - andSelf() 方法
实例
找到所有 div,以及其中的所有段落,并为它们添加两个类名。请注意,由于未使用 .andSelf(),div 没有黄色背景色。
$("div").find("p").andSelf()
.addClass("border");
$("div").find("p").addClass("background");
定义和用法
add() 方法把堆栈中之前的元素集添加到当前集合。
语法
.andSelf()
详细说明
请思考这个拥有简单列表的页面:
<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>
以下代码的结果是项目 3,4,5 拥有红色背景:
$("li.third-item").nextAll().andSelf() .css("background-color", "red");
首先,初始的选择器会定位项目 3,初始化的堆栈存有仅包含该项目的集合。调用 .nextAll() 会将项目 4, 5 的集合推入堆栈。最后,调用 .andSelf() 会合并这两个集合,所创建的 jQuery 对象指向按照文档顺序的所有三个项目:{[<li.third-item>,<li>,<li> ]}。
4.jQuery 遍历 - children() 方法
定义和用法
add() 方法返回匹配元素集合中每个元素的子元素,添加可选参数可通过选择器进行过滤。
语法
.children(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含匹配元素的选择器表达式。 |
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.children() 方法允许我们检索 DOM 树中的这些元素,并用匹配元素构造新的 jQuery 对象。.find() 和 .children() 方法类似,不过后者只沿着 DOM 树向下遍历单一层级。
请注意,与大多数 jQuery 方法一样,.children() 不返回文本节点;如果需要获得包含文本和注释节点在内的所有子节点,请使用 .contents()。
该方法接受一个选择器表达式作为可选参数,与我们传递到 $() 的参数的类型是相同的。如果应用该选择器,将测试元素是否匹配该表达式,以此筛选这些元素。
请思考这个带有基础的嵌套列表的页面:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
如果我们从 level-2 列表开始,我们可以找到它的子元素:
$('ul.level-2').children().css('background-color', 'red');
这行代码的结果是,项目 A, B, C 得到红色背景。由于我们没有应用选择器表达式,返回的 jQuery 对象包含了所有子元素。如果应用一个选择器的话,那么只会包括匹配的项目。
5.jQuery 遍历 - closest() 方法
实例
本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景:
$( document ).bind("click", function( e ) {
$( e.target ).closest("li")
.toggleClass("hilight");
});
定义和用法
closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
语法
.closest(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含匹配元素的选择器表达式。 |
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙,却很重要:
.closest() | .parents() |
---|---|
从当前元素开始 | 从父元素开始 |
沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 | 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。 |
返回包含零个或一个元素的 jQuery 对象 | 返回包含零个、一个或多个元素的 jQuery 对象 |
请看下面的 HTML 片段:
<ul id="one" class="level-1"> <li class="item-i">I</li> <li id="ii" class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
例子 1
假设我们执行一个从项目 A 开始的对 <ul> 元素的搜索:
$('li.item-a').closest('ul').css('background-color', 'red');
这会改变 level-2 <ul> 的颜色,这是因为当向上遍历 DOM 树时会第一个遇到该元素。
例子 2
假设我们搜索的是 <li> 元素:
$('li.item-a').closest('li').css('background-color', 'red');
这会改变列表项目 A 的颜色。在向上遍历 DOM 树之前,.closest() 方法会从 li 元素本身开始搜索,直到选择器匹配项目 A 为止。
例子 3
我们可以传递 DOM 元素作为 context,在其中搜索最接近的元素。
var listItemII = document.getElementById('ii'); $('li.item-a').closest('ul', listItemII).css('background-color', 'red'); $('li.item-a').closest('#one', listItemII).css('background-color', 'green');
以上代码会改变 level-2 <ul> 的颜色,因为它既是列表项 A 的第一个 <ul> 祖先,同时也是列表项 II 的后代。它不会改变 level-1 <ul> 的颜色,因为它不是 list item II 的后代。
6.jQuery 遍历 - contents() 方法
实例
找到段落中的所有文本节点,并用粗体标签包装它们。
$("p").contents()
.filter(function(){ return this.nodeType != 1; }).wrap("<b/>");
定义和用法
contents() 方法获得匹配元素集合中每个元素的子节点,包括文本和注释节点。
语法
.contents()
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.contents() 方法允许我们检索 DOM 树中的这些元素的直接子节点,并用匹配元素构造新的 jQuery 对象。.contents() 和.children() 方法类似,不同的是前者在结果 jQuery 对象中包含了文本节点以及 HTML 元素。
.contents() 方法也可以用于获得 iframe 的内容文档,前提是该 iframe 与主页面在同一个域。
请思考下面这个带有一些文本节点的 <div>,每个节点被两个折行元素 (<br />) 分隔:
<div class="container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br /><br /> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br /> <br /> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div>
我们可以使用 .contents() 方法来把文本块转换为形式良好的段落:
$('.container').contents().filter(function() { return this.nodeType == 3; }) .wrap('<p></p>') .end() .filter('br') .remove();
这段代码首先会接收 <div class="container"> 的内容,然后滤过其文本节点,将文本节点封装入段落标签中。这是通过测试元素的 .nodeType 属性实现的。该属性存有指示节点类型的数字代码;文本节点使用代码 3。内容会被再次过滤,这次针对 <br /> 元素,这些元素会被移除。
7.jQuery 遍历 - each() 方法
实例
输出每个 li 元素的文本:
$("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); });
定义和用法
each() 方法规定为每个匹配元素规定运行的函数。
提示:返回 false 可用于及早停止循环。
语法
$(selector).each(function(index,element))
参数 | 描述 |
---|---|
function(index,element) | 必需。为每个匹配元素规定运行的函数。
|
8.jQuery 遍历 - end() 方法
实例
选择所有段落,找到这些段落中的 span 元素,然后将它们恢复为段落,并把段落设置为两像素的红色边框:
$("p").find("span").end()
.css("border", "2px red solid");
定义和用法
end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。
语法
.end()
详细说明
大多数 jQuery 的遍历方法会操作一个 jQuery 对象实例,并生成一个匹配不同 DOM 元素集的新对象。当发生这种情况时,应该会把新的元素集推入维持在对象中的堆栈内。每次成功的筛选方法调用都会把新元素推入堆栈中。如果我们需要老的元素集,可以使用 end() 从堆栈中弹出新集合。
假设页面中有一对很短的列表:
<ul class="first"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li> </ul> <ul class="second"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li> </ul>
例子 1
主要是在利用 jQuery 的链条属性(命令链)时,jQuery 会比较有用。如果不使用命令链,我们一般是通过变量名来调用之前的对象,这样我们就不需要操作堆栈了。不过通过 end(),我们可以把所有方法调用串联在一起:
$('ul.first').find('.foo').css('background-color', 'red')
.end()
.find('.bar').css('background-color', 'green');
这条命令链检索第一个列表中类名为 foo 的项目,并把它们的背景设置为红色。end() 会将对象还原为调用 find() 之前的状态,所以第二个 find() 查找的是 <ul class="first"> 内的 '.bar' ,而不是在列表的 <li class="foo"> 中查找,并将匹配元素的背景设置为绿色。最后的结果是第一个列表中的项目 1 和项目 3 被设置了带颜色的背景,而第二个列表中的项目没有任何变化。
例子 2
这条长长的 jQuery 链可以可视化为结构化的代码块,筛选方法打开嵌套代码块,而 end() 方法用来关闭代码块:
$('ul.first').find('.foo')
.css('background-color', 'red')
.end()
.find('.bar')
.css('background-color', 'green')
.end();
最后这个 end() 不是必需的,因为我们随后会丢弃这个 jQuery 对象。不过,如果按照这种形式编写代码,end() 就能提供视觉上的对称,以及规整程序的感觉,至少对于开发者来说更易阅读,当然代价则是由于进行了额外的调用,会有一点点性能损失。
9.jQuery 遍历 - eq() 方法
定义和用法
eq() 方法将匹配元素集缩减值指定 index 上的一个。
语法
.eq(index)
参数 | 描述 |
---|---|
index | 整数,指示元素的位置(最小为 0)。 如果是负数,则从集合中的最后一个元素往回计数。 |
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。所使用的 index 参数标示集合中元素的位置。
请看下面这个简单的列表:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
例子 1
我们可以把该方法应用到这个列表项目集:
$('li').eq(2).css('background-color', 'red');
这个调用的结果是为项目 3 设置了红色背景。请注意,index 是基于零的,并且是在 jQuery 对象中引用元素的位置,而不是在 DOM 树中。
例子 2
如果提供负数,则指示从集合结尾开始的位置,而不是从开头开始。例如:
$('li').eq(-2).css('background-color', 'red');
这次,项目 4 的背景变为红色,这是因为它是集合结尾开始的第二个。
例子 3
如果无法根据指定的 index 参数找到元素,则该方法构造带有空集的 jQuery 对象,length 属性为 0。
$('li').eq(5).css('background-color', 'red');
这里,没有列表项会变为红色,这是因为 .eq(5) 指示的第六个列表项。
10.jQuery 遍历 - filter() 方法
实例
改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框:
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
定义和用法
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
语法
.filter(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含供匹配当前元素集合的选择器表达式。 |
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素;所有匹配该选择器的元素都会包含在结果中。
请思考下面这个拥有简单列表的页面:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul>
我们可以向这个列表项集合应用该方法:
$('li').filter(':even').css('background-color', 'red');
此调用的结果是将项目 1, 3, 5 的背景设置为红色,这是因为它们都匹配选择器(回忆一下,:even 和 :odd 均使用基于 0 的 index)。
使用过滤函数
使用该方法的第二个形式是,通过函数而不是选择器来筛选元素。对于每个元素,如果该函数返回 true,则元素会被包含在已筛选集合中;否则,会排除这个元素。
请看下面这段稍显复杂的 HTML 片段:
<ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul>
我们可以选取这些列表项,然后基于其内容来筛选它们:
$('li').filter(function(index) { return $('strong', this).length == 1; }).css('background-color', 'red');
11.jQuery 遍历 - find() 方法
定义和用法
find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
语法
.find(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含供匹配当前元素集合的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.find() 方法允许我们在 DOM 树中搜索这些元素的后代,并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。
.find() 方法第一个明显特征是,其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。
请思考下面这个简单的嵌套列表:
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
我们将从列表 II 开始来查找其中的列表项:
$('li.item-ii').find('li').css('background-color', 'red');
这次调研的结果是,项目 A、B、1、2、3 以及 C 均被设置了红色背景。即使项目 II 匹配选择器表达式,它也不会被包含在结果中;只会对后代进行匹配。
与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。
选择器 context 是由 .find() 方法实现的;因此,$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。
对于 jQuery 1.6,我们还可以使用给定的 jQuery 集合或元素来进行筛选。还是上面的嵌套列表,我们首先这样写:
var $allListElements = $('li');
然后将这个 jQuery 对象传递给 find 方法:
$('li.item-ii').find( $allListElements )
;
上面的代码会返回一个 jQuery 集合,其中包含属于列表 II 后代的列表元素。
类似地,也可以传递一个元素:
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 )
.css('background-color', 'red');
这次调用的结果是项目 1 被设置为红色背景。
12.jQuery 遍历 - first() 方法
定义和用法
first() 将匹配元素集合缩减为集合中的第一个元素。
语法
.first()
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.first() 方法会用第一个匹配元素构造一个新的 jQuery 对象。
请思考下面这个带有简单列表的页面:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
我们可以对这个列表项集合应用该方法:
$('li').first()
.css('background-color', 'red');
这次调用的结果是,第一个项目被设置为红色背景。
13.jQuery 遍历 - has() 方法
实例
检测某个元素是否在另一个元素中:
$("ul").append("<li>" + ($("ul").has("li")
.length ? "Yes" : "No") + "</li>"); $("ul").has("li")
.addClass("full");
定义和用法
has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。
语法
.has(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.has() 方法用匹配元素的子集来构造一个新的 jQuery 对象。所使用的选择器用于检测匹配元素的后代;如果任何后代元素匹配该选择器,该元素将被包含在结果中。
请思考下面这个带有嵌套列表的页面:
<ul> <li>list item 1</li> <li>list item 2 <ul> <li>list item 2-a</li> <li>list item 2-b</li> </ul> </li> <li>list item 3</li> <li>list item 4</li> </ul>
我们可以对列表项集合应用该方法,就像这样:
$('li').has('ul')
.css('background-color', 'red');
该调用的结果是,项目 2 的背景被设置为红色,这是因为该项目是后代中唯一拥有 <ul> 的 <li>。
14.jQuery 遍历 - is() 方法
实例
返回 false,因为 input 元素的父元素是 p 元素:
var isFormParent = $("input[type='checkbox']").parent().is("form")
;
$("div").text("isFormParent = " + isFormParent);
定义和用法
is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。
语法
.is(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含匹配元素的选择器表达式。 |
详细说明
与其他筛选方法不同,.is() 不创建新的 jQuery 对象。相反,它允许我们在不修改 jQuery 对象内容的情况下对其进行检测。这在 callback 内部通常比较有用,比如事件处理程序。
假设我们有一个列表,其中两个项目包含子元素:
<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul>
您可以向 <ul> 元素添加 click 处理程序,然后把代码限制为只有当列表项本身,而非子元素,被点击时才进行触发:
$("ul").click(function(event) {
var $target = $(event.target);
if ( $target.is("li")
) {
$target.css("background-color", "red");
}
});
现在,当用户点击的是第一个列表项中的单词 "list" 或第三个列表项中的任何单词时,被点击的列表项会被设置为红色背景。不过,当用户点击第一个列表项中的 item 1 或第二个列表项中的任何单词时,都不会有任何变化,这是因为这上面的情况中,事件的目标分别是 <strong> 是 <span>。
请您注意,对于带有位置性选择器的选择器表达式字符串,比如 :first、:gt() 或者 :even,位置性筛选是针对传递到 .is() 的 jQuery 对象进行的,而非针对包含文档。所以对于上面的 HTML 来说,诸如 $("li:first").is("li:last") 的表达式返回 true,但是 $("li:first-child").is("li:last-child") 返回 false。
使用函数
该方法的第二种用法是,对基于函数而非选择器的相关元素的表达式进行求值。对于每个元素来说,如果该函数返回 true,则 .is() 也返回 true。例如,下面是稍微复杂的 HTML 片段:
<ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
您可以向每个 <li> 添加 click 处理程序,以计算在被点击的 <li> 内部 <strong> 元素的数目:
$("li").click(function() {
var $li = $(this),
isWithTwo = $li.is(function() {
return $('strong', this).length === 2;
})
;
if ( isWithTwo ) {
$li.css("background-color", "green");
} else {
$li.css("background-color", "red");
}
});
15.jQuery 遍历 - last() 方法
定义和用法
last() 将匹配元素集合缩减为集合中的最后一个元素。
语法
.last()
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.last() 方法会用最后一个匹配元素构造一个新的 jQuery 对象。
请思考下面这个带有简单列表的页面:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
我们可以对这个列表项集合应用该方法:
$('li').last()
.css('background-color', 'red');
这次调用的结果是,最后一个项目被设置为红色背景。
16.jQuery 遍历 - map() 方法
实例
构建表单中所有值的列表:
$("p").append( $("input").map(function(){
return $(this).val();
})
.get().join(", ") );
定义和用法
map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
语法
.map(callback(index,domElement))
参数 | 描述 |
---|---|
callback(index,domElement) | 对当前集合中的每个元素调用的函数对象。 |
详细说明
由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。
.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单:
<form method="post" action=""> <fieldset> <div> <label for="two">2</label> <input type="checkbox" value="2" id="two" name="number[]"> </div> <div> <label for="four">4</label> <input type="checkbox" value="4" id="four" name="number[]"> </div> <div> <label for="six">6</label> <input type="checkbox" value="6" id="six" name="number[]"> </div> <div> <label for="eight">8</label> <input type="checkbox" value="8" id="eight" name="number[]"> </div> </fieldset> </form>
我们能够获得复选框 ID 组成的逗号分隔的列表:
$(':checkbox').map(function() {
return this.id;
})
.get().join(',');
本次调用的结果是字符串:"two,four,six,eight"。
在 callback 函数内部,this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项,或者是要被插入结果集中的数据项的数组。如果返回的是数组,数组内的元素会被插入集合中。如果函数返回 null 或 undefined,则不会插入任何元素。
17.jQuery 遍历 - next() 方法
定义和用法
next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。
语法
.next(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素,并用匹配元素构造新的 jQuery 对象。
该方法接受可选的选择器表达式,类型与我传递到 $() 函数中的相同。如果紧跟的同胞元素匹配该选择器,则会留在新构造的 jQuery 对象中;否则会将之排除。
请思考下面这个带有简单列表的页面:
<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').next()
.css('background-color', 'red');
这次调用的结果是,项目 4 被设置为红色背景。由于我们没有应用选择器表达式,紧跟的这个元素很明确地被包括为对象的一部分。如果我们已经应用了选择器,在包含它之前会检测是否匹配。
18.jQuery 遍历 - nextAll() 方法
定义和用法
nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素,由选择器筛选是可选的。
语法
.nextAll(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.nextAll() 方法允许我们搜索 DOM 树中的元素跟随的同胞元素,并用匹配元素构造新的 jQuery 对象。
该方法接受可选的选择器表达式,类型与我传递到 $() 函数中的相同。如果应用选择器,则将通过检测元素是否匹配来对它们进行筛选。
请思考下面这个带有简单列表的页面:
<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().css('background-color', 'red');
这次调用的结果是,项目 4 和 5 被设置为红色背景。由于我们没有应用选择器表达式,紧跟的这个元素很明确地被包括为对象的一部分。如果我们已经应用了选择器,在包含它之前会检测是否匹配。
19.jQuery 遍历 - nextUntil() 方法
实例
查找跟随 <dt id="term-2"> 的同胞元素,直到下一个 <dt>,然后将它们设置为红色背景色。同时,找到跟随 <dt id="term-1"> 的 <dd> 同胞元素,直到 <dt id="term-3">,并为它们设置蓝色文本颜色。
$("#term-2").nextUntil("dt")
.css("background-color", "red"); var term3 = document.getElementById("term-3"); $("#term-1").nextUntil(term3, "dd")
.css("color", "blue");
定义和用法
nextUntil() 获得每个元素所有跟随的同胞元素,但不包括被选择器、DOM 节点或已传递的 jQuery 对象匹配的元素。
语法 1
.nextUntil(selector,filter)
参数 | 描述 |
---|---|
selector | 字符串值,包含指示在何处停止匹配跟随的同胞元素的选择器表达式。 |
filter | 字符串值,包含用于匹配元素的选择器表达式。 |
语法 2
.nextUntil(element,filter)
参数 | 描述 |
---|---|
element | 指示在何处停止匹配跟随的同胞元素的 DOM 节点或 jQuery 对象。 |
filter | 字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.nextUntil() 方法允许我们搜索 DOM 树中的元素跟随的同胞元素,当遇到被该方法的参数所匹配的元素时会停止搜索。返回的新 jQuery 对象包含所有跟随的同胞元素,但不包含被参数匹配的元素。
如果选择器不匹配或未规定选择器,则会选取所有跟随的同胞;如果不提供供筛选的选择器,则该方法选取的元素与 .nextAll() 方法相同。
对于 jQuery 1.6,DOM 节点或 jQuery 对象,而不是选择器,可传递到 .nextUntil() 方法。
该方法接受可选的选择器表达式作为其第二参数。如果指定该参数,则将通过检测元素是否匹配该选择器来筛选它们。
20.jQuery 遍历 - not() 方法
定义和用法
not() 从匹配元素集合中删除元素。
语法 1
.not(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的选择器表达式。 |
语法 2
.not(element)
参数 | 描述 |
---|---|
element | 一个或多个需要从匹配集中删除的 DOM 元素。 |
语法 3
.not(function(index))
参数 | 描述 |
---|---|
function(index) | 用于检测集合中每个元素的函数。this 是当前 DOM 元素。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.not() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所应用的选择器会检测每个元素;不匹配该选择器的元素会被包含在结果中。
请思考下面这个带有简单列表的页面:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
我们可以向列表项集应用该方法:
$('li').not(':even')
.css('background-color', 'red');
这次调用的结果是将项目 2 和 4 设置为红色背景,这是因为它们不匹配选择器(回忆一下,:even 和 :odd 均使用基于 0 的 index)。
移除具体的元素
.not() 方法的第二个版本允许我们从匹配集中删除元素,假设我们之前已经通过其他手段找到了这些元素。例如,设想一个列表已经将 id 应用到其中一个项目中:
<ul> <li>list item 1</li> <li>list item 2</li> <li id="notli">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
我们可以使用原生的 JavaScript 函数 getElementById() 读取第三个列表项,然后把它从 jQuery 对象中删除:
$('li').not(document.getElementById('notli'))
.css('background-color', 'red');
这条语句改变项目 1、2、3 和 5 的背景色。我们可以用更简单的 jQuery 表达式来完成同样的事情,但是这项技术在比方说其他库提供对纯 DOM 节点的引用时会很有用。
对于 jQuery 1.4,.not() 方法能够采用函数作为其参数,与 .filter() 方法相同。其函数返回 true 的元素会被排除在过滤集之外;所有其他元素将被包含其中。
21.jQuery 遍历 - offsetParent() 方法
定义和用法
offsetParent() 获得被定位的最近祖先元素。
语法
.offsetParent()
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.offsetParent() 方法允许我们搜索 DOM 树中元素的祖先,并构造一个由最近的定位祖先元素包围的 jQuery 对象。定位元素指的是,元素的 CSS position 属性设置为 relative、absolute 或 fixed。在为表演动画计算偏移或在页面上放置对象时,该信息会很有用处。
请思考带有基本嵌套列表的页面,其中带有定位元素:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii" style="position: relative;">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
如果我们从项目 A 开始,我们可以找到其定位祖先元素:
$('li.item-a').offsetParent()
.css('background-color', 'red');
这会改变被定位的项目 II 的背景色。
22.jQuery 遍历 - parent() 方法
定义和用法
parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的。
.parent(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.parent() 方法允许我们在 DOM 树中搜索这些元素的父元素,并用匹配元素构造一个新的 jQuery 对象。.parents() 和 .parent() 方法类似,不同的是后者沿 DOM 树向上遍历单一层级。
该方法接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面:
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
如果我们从项目 A 开始,则可找到其父元素:
$('li.item-a').parent()
.css('background-color', 'red');
此次调用的结果是,为 level-2 列表设置红色背景。由于我们未应用选择器表达式,父元素很自然地成为了对象的一部分。如果已应用选择器,则会在包含元素之前,检测元素是否匹配选择器。
23.jQuery 遍历 - parents() 方法
定义和用法
parents() 获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的。
.parents(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。元素是按照从最近的父元素向外的顺序被返回的。.parents() 和.parent() 方法类似,不同的是后者沿 DOM 树向上遍历单一层级。
该方法接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面:
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
如果我们从项目 A 开始,则可找到其祖先元素:
$('li.item-a').parents()
.css('background-color', 'red');
此次调用的结果是,level-2 列表、项目 II 以及 level-1 列表等元素(沿 DOM 树一路向上直到 <html>)设置红色背景。由于我们未应用选择器表达式,父元素很自然地成为了对象的一部分。如果已应用选择器,则会在包含元素之前,检测元素是否匹配选择器。由于我们未应用选择器表达式,所有祖先元素都是返回的 jQuery 对象的组成部分。如果已应用选择器,则只会包含其中的匹配项目。
24.jQuery 遍历 - parentsUntil() 方法
实例
查找 <li class="item-a"> 的祖先元素,直到 <ul class="level-1">,并将它们设置为红色背景。同时,找到 <li class="item-2"> 的所有类名为 "yes" 的祖先元素,直到 <ul class="level-1">,然户为它们设置蓝色边框:
$("li.item-a").parentsUntil(".level-1")
.css("background-color", "red"); $("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
.css("border", "3px solid blue");
定义和用法
parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到(但不包括)被选择器、DOM 节点或 jQuery 对象匹配的元素。
语法 1
.parentsUntil(selector,filter)
参数 | 描述 |
---|---|
selector | 可选。字符串值,规定在何处停止对祖先元素进行匹配的选择器表达式。 |
filter | 可选。字符串值,包含用于匹配元素的选择器表达式。 |
语法 2
.parentsUntil(element,filter)
参数 | 描述 |
---|---|
element | 可选。DOM 节点或 jQuery 对象,指示在何处停止对祖先元素的匹配。 |
filter | 可选。字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.parentsUntil() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,直到遇到被选择器(传递到方法中的参数)匹配的元素为止。返回的 jQuery 对象包含所有祖先元素,但不包括由 .parentsUntil() 方法规定的选择器匹配的那个元素。
如果不匹配或未应用选择器,则将选区所有祖先元素;在这种情况下,该方法选取的元素与未提供选择器时的 .parents() 相同。
对于 jQuery 1.6,DOM 节点或 jQuery 对象,而不是选择器,可用作 .parentsUntil() 方法的第一个参数。
该方法接受可选的选择器表达式作为其第二参数。如果应用这个参数,则将通过检测元素是否匹配该选择器对元素进行筛选。
25.jQuery 遍历 - prev() 方法
定义和用法
prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的。
.prev(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.prev() 方法允许我们在 DOM 树中搜索这些元素的前一个同胞元素,并用匹配元素构造一个新的 jQuery 对象。
该方法接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面:
<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').prev()
.css('background-color', 'red');
此处调用的结果是将项目 2 设置为红色背景。由于我们未应用选择器表达式,前一个元素很自然地成为了对象的一部分。如果已应用选择器,则会在包含元素之前,检测元素是否匹配选择器。
26.jQuery 遍历 - prevAll() 方法
定义和用法
prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素,使用选择器进行筛选是可选的。
语法
.prevAll(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.prevAll() 方法允许我们在 DOM 树中搜索这些元素前面的同胞元素,并用匹配元素构造一个新的 jQuery 对象。
该方法接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面:
<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').prevAll()
.css('background-color', 'red');
此处调用的结果是将项目 2 和项目 1 设置为红色背景。由于我们未应用选择器表达式,这些前面的元素很自然地成为了对象的一部分。如果已应用选择器,则会在包含元素之前,检测这些元素是否匹配选择器。
27.jQuery 遍历 - prevUntil() 方法
实例
查找 <dt id="term-2"> 之前的同胞元素,直到前一个 <dt>,并将它们设置为红色。同时,查找 <dt id="term-3"> 前面的 <dd> 同胞,直到 <dt id="term-1">,并把它们设置为蓝色文本:
$("#term-2").prevUntil("dt")
.css("background-color", "red"); var term1 = document.getElementById('term-1'); $("#term-3").prevUntil(term1, "dd")
.css("color", "green");
定义和用法
prevUntil() 方法获得当前匹配元素集合中每个元素的前面的同胞元素,但不包括被选择器、DOM 节点或 jQuery 对象匹配的元素。
语法 1
.prevUntil(selector, filter)
参数 | 描述 |
---|---|
selector | 可选。字符串值,包含指示在何处停止匹配前方同胞元素的选择器表达式。 |
filter | 可选。字符串值,包含用于匹配元素的选择器表达式。 |
语法 2
.prevUntil(element, filter)
参数 | 描述 |
---|---|
element | 可选。指示在何处停止匹配前方同胞元素的 DOM 节点或 jQuery 对象。 |
filter | 可选。字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.prevUntil() 方法允许我们在 DOM 树中搜索这些元素前面的同胞元素,直到遇到被选择器(传递到方法中的参数)匹配的元素为止。返回的 jQuery 新对象包含所有前面的同胞元素,但不包括由 .prevUntil() 方法规定的选择器匹配的那个元素;所返回元素的顺序是从最近的同胞元素到最远的那个。
如果不匹配或未应用选择器,则将选区所有前面的同胞元素;在这种情况下,该方法选取的元素与未提供选择器时的 .prevAll() 相同。
对于 jQuery 1.6,DOM 节点或 jQuery 对象,而不是选择器,可用作 .prevUntil() 方法的第一个参数。
该方法接受可选的选择器表达式作为其第二参数。如果应用这个参数,则将通过检测元素是否匹配该选择器对元素进行筛选。
28.jQuery 遍历 - siblings() 方法
定义和用法
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。
语法
.siblings(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的选择器表达式。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.siblings() 方法允许我们在 DOM 树中搜索这些元素的同胞元素,并用匹配元素构造一个新的 jQuery 对象。
该方法接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面:
<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').siblings()
.css('background-color', 'red');
此处调用的结果是将项目 1、2、4 和 5 的背景设置为红色。 设置为红色背景。由于我们未应用选择器表达式,所有同胞元素很自然地成为了对象的一部分。如果已应用选择器,则只会包含四个列表中的匹配的项目。
原始元素不包含在同胞元素中,当我们打算找到 DOM 树的特定层级上的所有元素时,记住一点很重要。
29.jQuery 遍历 - slice() 方法
定义和用法
slice() 把匹配元素集合缩减为指定的指数范围的子集。
语法
.slice(selector,end)
参数 | 描述 |
---|---|
selector | 基于 0 的整数值,指示开始选取元素的位置。 如果是负数,则指示从集合末端开始的偏移量。 |
end | 基于 0 的整数值,指示结束选取元素的位置。 如果是负数,则指示从集合末端开始的偏移量。 如果省略,则选取范围会在集合末端结束。 |
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.slice() 方法用匹配元素的子集构造一个新的 jQuery 对象。已应用的 index 参数集合中其中一个元素的位置;如果省略 end 参数,则 index 之后的所有的所有元素都会包含在结果中。
请思考这个带有简单列表的页面:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
我们可以向列表项集合应用该方法:
$('li').slice(2)
.css('background-color', 'red');
此次调用的结果是项目 3、4 和 5 的背景被设置为红色。请注意,已应用的 index 参数基于零,引用的是 jQuery 对象中元素的位置,而非 DOM 树中的。
end 参数允许我们更进一步地限制选取范围。比如:
$('li').slice(2, 4)
.css('background-color', 'red');
现在,只有项目 3 和 4 会被选取。再次说明,index 是基于零的;范围会延伸到(但不包含)指定的 index。
负的指数
jQuery 的 .slice() 方法模仿了 JavaScript 数组对象的 .slice() 方法。它所模仿的特性之一是向 start 或 end 参数传递负数的能力。如果提供负数,则指示的是从集合结尾开始的一个位置,而非从开头。例如:
$('li').slice(-2, -1)
.css('background-color', 'red');
这次,只有列表项 4 会变红,这是因为该项目是介于从结尾计数的二 (-2) 与从结尾计数的一 (-1) 的之间的范围中的唯一项目。
___________________________________________________________________________________________________________________________________
转载出处:http://blog.csdn.net/eqera/article/details/8441722