使用筛选器获取元素

1 过滤

本质

选择器的方法|jQuery对象的方法,方法的参数还可以加入选择器

语法

$('li').filter('.item').css('border', '2px solid red');

eq(index|-index)

获取当前链式操作中第N个jQuery对象，返回jQuery对象

first()

获取第一个元素

last()

获取最后个元素

filter(expr|obj|ele|fn)

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

not(expr|ele|fn)

从匹配元素的集合中删除与指定表达式匹配的元素

<li>Lorem ipsum 小丽丽 dolor.</li>
				<li>Lorem ipsum dolor.</li>
				<li>Lorem ipsum dolor.</li>
				<li class='item'>Lorem ipsum dolor.</li>
				<li>Lorem ipsum dolor.</li>



$('li').filter('.item').css('border', '2px solid red');

has(expr|ele)

保留包含特定后代的元素，去掉那些不含有指定后代的元素。

slice(start,[end])

选取一个匹配的子集

2 查找

语法

$('#myItem').children().css('border', '2px solid red');

破坏性操作

和过滤的区别就是查找出来的是元素的一部分

children([expr])

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

find(e|o|e)

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

find的()里面可以指定找什么样的后代元素

parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合

parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）

// $("#myItem").parents('ul').css('border', '2px solid green');  //所有的祖先元素

parentsUntil([e|e][,f])

查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

// $("#myItem").parentsUntil('body').css('border', '2px solid green');  //所有的祖先元素 指定一个结束位置

offsetParent()

返回第一个匹配元素用于定位的父节点。

没写是html定位

看谁加了position: relative;

后next([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

nextAll([expr])

查找当前元素之后所有的同辈元素

nextUntil([e|e][,f])

查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止

前prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

prevall([expr])

查找当前元素之前所有的同辈元素

prevUntil([e|e][,f])

查找前面所有的兄弟元素 并且为其指定一个终止位置

查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

siblings([expr]) 所有的兄弟

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

closest(e|o|e)

1.7* 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

3 串联

add(e|e|h|o[,c])

1.9* 把与表达式匹配的元素添加到jQuery对象中

andSelf()

1.8- 加入先前所选的加入当前元素中

addBack()

1.9+ 添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。

//addback() 是加上自己的意思
			// $('li.active').nextAll('li').addBack().css('border', '2px solid red')

contents()

查找匹配元素内部所有的子节点（包括文本节点）

end()

回到最近的一个”破坏性”操作之前

end()回到上一次被破坏之前的状态
			// $('li.active').nextAll('li').css('border', '2px solid red').end().css('background', 'pink');

改变元素

html(‘HELLO’)

等于box.innerHTML = '<ul><li>HELLO</li></ul>'

.text(‘HELLO’)

等于box.innerText = 'HELLO'

4 其他元素处理

is(expr|obj|ele|fn)        根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
map(callback)            将一组元素转换成其他数组（不论是否是元素数组）