Dom Sample

① parents()方法语法

parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

参数：

expr：用于筛选祖先元素的表达式

例子：获取id为radio-b的所有父元素集合

$('#radio-b').parents()

② children()方法语法

想知道这里 #form-fake 子元素数量：

$('#form-fake > *')

这里使用了极力不推荐使用的通用选择器。所以该使用 children() 方法。

$('#form-fake').children()

③ contents()方法语法

children() 方法不会返回文本节点。

对于处理文本节点的情况，使用 contents()。和 children() 的不同在于：contents() 不接收任何参数，还可以获得文本节点和框架内元素。

contents()：查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

④ find()方法语法

find(expr|obj|element)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

参数：

expr:用于查找的表达式

obj:一个用于匹配元素的jQuery对象

element:一个DOM元素

find() 的强大之处体现在 jQuery 的链式调用中，

$('#form-fake').children().find('span')

⑤ nextUntil()方法语法

nextUntil([expr|element][,filter])

查找当前元素之后所有的兄弟元素，但不包括那个选择器匹配到的元素。

参数：

[expr][,filter]:

expr: 用于筛选祖先元素的表达式。

filter: 一个字符串，其中包含一个选择表达式匹配元素。

[element][,filter]:

element: 用于筛选祖先元素的DOM元素。

filter: 一个字符串，其中包含一个选择表达式匹配元素。

看一个例子：

• First
• Second
• Third
• Fourth
• Fifth

查询样式为 awesome 的元素的兄弟元素，排除样式为 brilliant 和 amazing 的元素。

$('.awesome').nextUntil('.brilliant.amazing');

如果只想查找样式 good 的元素，这个函数的第二个参数是可选参数 filter，允许你来实现目标。

$('.awesome').nextUntil('.brilliant.amazing','.good');

3.2.4 分割集合

（1）集合中添加新元素（不是在html添加元素，是在选择器中添加）

① add()方法语法

$('img[alt]')

.addClass('red-border')

.add('img[title]')

.addClass('opaque')

（2）集合中删除元素

② not()方法语法

not(expr|ele|fn)

删除与指定表达式匹配的元素

参数：

expr：一个选择器字符串。

element：一个DOM元素

function(index)：一个用来检查集合中每个元素的函数。this是当前的元素

$("p").not( $("#selected")[0] )

当需要最大的灵活的时候，传递函数给 not() 方法。

$('div').not(function(index){

return $(this).children().length > 2 && index % 2 === 0;

});

③ filter()方法语法

filter(expr|obj|ele|fn)

筛选出与指定表达式匹配的元素集合

例子：创建所有包含正整数的 元素的集合。

$('td').filter(function(index) {

return this.innerHTML.match(/^\d+$/);

});

（3）获取集合的子集

④ slice()方法语法

slice(start, [end])

选取一个匹配的子集

参数：

start：开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起

end：结束选取自己的位置，如果不指定，则就是本身的结尾。

$('*').slice(12,19)

⑤ has()方法语法

has(selector)

创建并返回新的集合，只包含匹配 selector 选择器的子元素

参数：

selector（Selector|Element）包含选择器的字符串会应用到集合中元素的所有子元素上，或者测试 Dom 上。

$('div').has('img[alt]')

（4）转换集合的元素

⑥ map()方法语法

map(callback)

一组元素转换成其他数组（不论是否是元素数组）

（在集合中的每个元素调用 callback 函数，然后返回值到一个 jQuery 对象中。）

例子：页面上所有div元素的ID：

$('div').map(function(){

return this.id;

}).toArray();

//["sample-dom", "", "some-div", "", "", ""]

（5）遍历集合的元素

map()方法对于遍历集合元素后搜集值或转换为其他元素非常有用，但是很多时候为了达到其他目的才迭代元素。

⑦ each()方法语法

each(iterator)

遍历集合里的所有元素，然后为每个元素传入的 iterator（迭代器）函数

例子：为匹配集合中的每个元素设置一个属性值：

$('img').each(function(i){

this.alt = 'This is image['+ i +'] with an id of ' +this.id;

})

3.2.5 使用集合的其他方法

① is()方法语法

is(selector)

确定集合中是否有元素匹配给定的选择器，如果有一个就返回 true

---

$("input[type='checkbox']").parent().is("form")

//true

判断点击li标签增加背景色为红色，如果点击的是第2个strong,当前的li增加背景色为绿色

• list item 1 - one strong tag

• list item

  2 - two strong tags

• list item 3

----

$("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");

}

});

② end()方法语法

end()

在 jQuery 链式调用中使用该方法；

在当前调用链中结束最近的过滤操作，然后返回匹配元素的集合到之前的状态。

回到最近的一个"破坏性"操作之前（hide()不是）

$('img')

.filter('[title]')

.hide()

.end()

.addClass('red-border')

jQuery对象维护了一个内部栈来保存针对匹配元素的集合修改。调用诸如之前的方法时，新集合被压栈，调用 end() 方法时，顶部集合就会弹出，留出前一个集合来后续操作。

③ addBack()方法语法

addBack([selector])

把栈上前一个集合的元素添加到当前集合里，可以选择性提供选择器参数。

• list item 1
• list item 2
• list item 3
• list item 4
• list item 5

----

$('li.third-item').nextAll().addBack()

.css('background-color', 'red');

首先，初始选择位于第3项，初始化堆栈集合只包含这项。调用.nextAll() 后将第4和第5项推入堆栈。最后，调用.addBack() 合并这两个组元素在一起，创建一个jQuery对象，指向所有三个项元素