jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。
函数 | 描述 | |||||||||||||||||||||||
实例找到所有 div 并添加边框。然后将所有段落添加到该 jQuery 对象,并把它们的背景设置为黄色: $("div").css("border", "2px solid red") .add("p") .css("background", "yellow"); 定义和用法add() 方法将元素添加到匹配元素的集合中。 语法 1.add(selector)
语法 2.add(elements)
语法 3.add(html)
语法 4.add(jQueryObject)
语法 5.add(selector, context)
| ||||||||||||||||||||||||
实例找到所有 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> ]}。 | ||||||||||||||||||||||||
获得匹配元素集合中每个元素的所有子元素。 | ||||||||||||||||||||||||
从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。 | ||||||||||||||||||||||||
获得匹配元素集合中每个元素的子元素,包括文本和注释节点。 | ||||||||||||||||||||||||
定义和用法each() 方法规定为每个匹配元素规定运行的函数。 提示:返回 false 可用于及早停止循环。 语法$(selector).each(function(index,element))
| ||||||||||||||||||||||||
结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。 定义和用法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')
这条命令链检索第一个列表中类名为 foo 的项目,并把它们的背景设置为红色。end() 会将对象还原为调用 find() 之前的状态,所以第二个 find() 查找的是 <ul class="first"> 内的 '.bar' ,而不是在列表的 <li class="foo"> 中查找,并将匹配元素的背景设置为绿色。最后的结果是第一个列表中的项目 1 和项目 3 被设置了带颜色的背景,而第二个列表中的项目没有任何变化。 | ||||||||||||||||||||||||
将匹配元素集合缩减为位于指定索引的新元素。 | ||||||||||||||||||||||||
定义和用法filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。 语法.filter(selector)
| ||||||||||||||||||||||||
获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。 语法.find(selector)
| ||||||||||||||||||||||||
将匹配元素集合缩减为集合中的第一个元素。 | ||||||||||||||||||||||||
将匹配元素集合缩减为包含特定元素的后代的集合。 定义和用法has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。 语法.has(selector)
| ||||||||||||||||||||||||
根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。 定义和用法is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。 语法.is(selector)
| ||||||||||||||||||||||||
将匹配元素集合缩减为集合中的最后一个元素。 | ||||||||||||||||||||||||
把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。 定义和用法map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。 语法.map(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')
本次调用的结果是字符串:"two,four,six,eight"。 在 callback 函数内部,this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项,或者是要被插入结果集中的数据项的数组。如果返回的是数组,数组内的元素会被插入集合中。如果函数返回 null 或 undefined,则不会插入任何元素。 |
| |||||||||||||||||||||||
获得匹配元素集合中每个元素紧邻的同辈元素。 | ||||||||||||||||||||||||
获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。 | ||||||||||||||||||||||||
获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。 | ||||||||||||||||||||||||
从匹配元素集合中删除元素。 定义和用法not() 从匹配元素集合中删除元素。 语法 1.not(selector)
语法 2.not(element)
语法 3.not(function(index))
| ||||||||||||||||||||||||
获得用于定位的第一个父元素。 语法.offsetParent() 请思考带有基本嵌套列表的页面,其中带有定位元素: <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')
| ||||||||||||||||||||||||
获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。 | ||||||||||||||||||||||||
定义和用法 parents() 获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的。 .parents(selector)
| ||||||||||||||||||||||||
定义和用法parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到(但不包括)被选择器、DOM 节点或 jQuery 对象匹配的元素。 语法 1.parentsUntil(selector,filter)
语法 2.parentsUntil(element,filter)
详细说明如果给定一个表示 DOM 元素集合的 jQuery 对象,.parentsUntil() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,直到遇到被选择器(传递到方法中的参数)匹配的元素为止。返回的 jQuery 对象包含所有祖先元素,但不包括由 .parentsUntil() 方法规定的选择器匹配的那个元素。 如果不匹配或未应用选择器,则将选区所有祖先元素;在这种情况下,该方法选取的元素与未提供选择器时的 .parents() 相同。 对于 jQuery 1.6,DOM 节点或 jQuery 对象,而不是选择器,可用作 .parentsUntil() 方法的第一个参数。 该方法接受可选的选择器表达式作为其第二参数。如果应用这个参数,则将通过检测元素是否匹配该选择器对元素进行筛选。 | ||||||||||||||||||||||||
获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。 语法: .prev(selector) 参数 描述 selector 字符串值,包含用于匹配元素的选择器表达式。 | ||||||||||||||||||||||||
获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。 语法 .prevAll(selector) 参数 描述 selector 字符串值,包含用于匹配元素的选择器表达式。 | ||||||||||||||||||||||||
获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。 语法 1 .prevUntil(selector, filter) 参数 描述 selector 可选。字符串值,包含指示在何处停止匹配前方同胞元素的选择器表达式。 filter 可选。字符串值,包含用于匹配元素的选择器表达式。 语法 2 .prevUntil(element, filter) 参数 描述 element 可选。指示在何处停止匹配前方同胞元素的 DOM 节点或 jQuery 对象。 filter 可选。字符串值,包含用于匹配元素的选择器表达式。 | ||||||||||||||||||||||||
获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。 .siblings(selector) | ||||||||||||||||||||||||
将匹配元素集合缩减为指定范围的子集。 .slice(selector,end)
|