.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(, ).wrapInner("");
选中所有段落,然后将所选内容缩减为只包含第一和第二个段落

————————————————————各种找爹找儿子找同胞————————————————————

jQuery 遍历的更多相关文章

  1. 【转】 jquery遍历json数组方法

    $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...

  2. jQuery 遍历函数

    转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...

  3. Jquery遍历选中的input标签

    $("input[name='chkAgent']:[checked]").each(function () { alert($(this).attr("value&qu ...

  4. jquery遍历

    http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和 ...

  5. jQuery 遍历(上)

    目录: 一:定义二:遍历 DOM三:jQuery 参考手册 - 遍历 定义:什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找" ...

  6. jquery 遍历 数组1

    使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr ...

  7. JQuery:JQuery遍历详解

    JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...

  8. jquery遍历对象,数组,集合

    1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...

  9. jQuery 遍历函数(w3school)

    jQuery 遍历函数包括了用于筛选.查找和串联元素的方法.   函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .childr ...

  10. Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数

    JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数                             ...

随机推荐

  1. SQL统计不重复字段的个数.

    注意:下面的举例适用于ORCLE和MSSQL,不能在Access中使用. 语法 SELECT COUNT(DISTINCT column(s)) FROM table 举例 With this &qu ...

  2. JAVA 函数式接口与c#委托对应关系(一)

    C# Action委托 VS JAVA Action 接口函数 1.c#:Action 封装一个方法,该方法不具有参数并且不返回值. 构造实体类类 using System; namespace Ac ...

  3. Oracle 11g-R2 SQL Developer连接MSSQL2008

    操作系统环境:WINDOWS8.1 工具: Oracle 11g-R2  SQL Developer 网络资源:http://sourceforge.net/project/showfiles.php ...

  4. SQL Server中Id自增列的最大Id是多少

    什么是自增列 在SQL Server中可以将Id列设为自增.即无需为Id指定值,由SQL Server自动给该列赋值,每新增一列Id的值加一,初始值为1. 需要注意的是即使将原先添加的所有数据都删除, ...

  5. Object-C内存管理基础

    如果你通过手工alloc的方式分配内存实例化创建一个对象,之后你需要release这个对象,同理你也不能手工释放(release)一个能自动释放(autoreleased)的对象,因为这个样子会使你的 ...

  6. 数据库(学习整理)----2--关于Oracle用户权限的授权和收权

    知识点: 1.Oracle数据库中所用的用户等级是平级的!只是每个用户的权限不同而已! 2.在一个用户登录后,可以在自己的登录状态下访问其他用户的数据缓冲区.表.以及表的操作!(只要该用户用权限!) ...

  7. 百练_2409 Let it Bead(Polya定理)

    描述 "Let it Bead" company is located upstairs at 700 Cannery Row in Monterey, CA. As you ca ...

  8. Visual studio 2015程序转Eclipse gun编译出现的问题总结

    Visual studio 2015程序转Eclipse gun编译出现的问题总结 1.C++11支持 1)Project settings project右键-> c/c++ build -& ...

  9. 用3种方法在 operator= 中处理“自我赋值”

    假设你建立一个class 用来保存一个指针指向一块动态分配的位图. class Bitmap {......}; class Widget{ ... private: Bitmap* pb ; }; ...

  10. C++ 虚函数与纯虚函数

    #include<iostream> #include<string> using namespace std; class A{ public: virtual void f ...