jQuery学习--------jQuery过滤器
each() 方法规定为每个匹配元素规定运行的函数。
过滤:
下标过滤:
eq(index) //获取第index个元素
类过滤:
hasClass(class) //检查当前元素是否含有某个特定的类,如果有,返回true
例如:$("div").hasClass("div1") //含有div1类的div元素
表达式过滤:
filter(expr) //筛选出与指定表达式expr匹配的元素集合,用逗号分隔多个表达式
filter(fn) //筛选出与指定函数fn返回值匹配的元素集合
例如:$("div").filter(".red")这里的表达式是指:选择器表达式
has(expr) //参数expr是一个jQuery选择器表达式字符串
也可以是一个元素或者一组元素
例如:$("p").has(span.red) 选择拥有子元素span,并且子元素类为red的p元素
判断:表达式判断的方法不直接过滤元素,
仅作为一个检测工具判断当前jQuery对象是否包含满足条件的元素
is(expr)
例如:$("div").is(.red) //判断是否有含有类red的div元素,如果有返回true
映射:将jQuery中的每个对象映射到一个数组
map(callback)
callback:给每个元素执行的函数
清洗:从jQuery对象中删除符合条件的元素,并返回这个清洗后的jQuery
not(expr)
截取:截取当前jQuery对象中的部分元素,并将部分元素装在一个jQuery对象中返回。
slice(start,[end])
start表示开始选择子集的位置,第一个元素是0,
如果该参数为负数,则表示从集合的尾部开始选起。
end如果不指定,则表示到集合的结尾
注意:被截取元素不包含end指定的位置
查找:
向下查找后代元素:
DOM提供了三种方法:
使用childNodes属性
使用firstChild和lastChild属性
使用getElementById()和getElementsByTagName()方法
jQuery访问后代元素:
children()方法:查找当前元素的所有或部分子元素
语法:children([expr])
contents()方法:返回所有的子元素,还可以获取文本节点、注释节点
语法:contents();该方法没有参数
find()方法:查找所有的后代元素
语法:find(expr)
例子:$("body").find("p") //返回body下所有的p元素
向上查找祖先元素:
DOM提供了parentNode属性来访问父元素。
jQuery访问父元素:
parents()方法:返回被选元素的所有祖先元素,直到根元素<html>
语法:parent([expr]):expr表达式过滤查询到的祖先元素
parent()方法:返回被选元素的直接父元素。
parentsUntil()方法:查找指定范围内的父元素。
例子:$("span").parentsUntil("ul")//返回的父元素到ul标签为止。
offsetParent()方法:返回被选元素的第一个定位父元素。
closest()方法:查找指定的父元素
语法:closest(expr,[context])
向上查找兄弟元素:
DOM提供了previousSibling属性
jQuery访问向上的兄弟节点:
prev()方法:返回上一个相邻的元素(不包括文本节点)
语法:prev([expr])
prevAll()方法:返回当前元素以上的所有同辈元素
语法:prevAll([expr])
prevUntil()方法:返回当前元素到selector(不包含selector选择的元素)的所有同辈元素
语法:prevUntil([selector])
向下查找兄弟元素:
DOM提供nextSibling属性
jQuery访问向下的兄弟节点:
next()方法:匹配下一个相邻的节点,不包括文本节点
语法:next([expr])
nextAll()方法
nextUntil()方法
查找兄弟元素:
jQuery方法:
siblings()方法:查找所以的兄弟元素。
添加查找对象:
add()方法:向查找结果中添加新的查找内容。
语法:add(expr,[context])
示例:$("div").css("border","solid 5px #000")
.add("p")
.css("background","#990044")
串联:
addSelf()方法:将堆栈中的元素加入到查找结果的中
示例:
<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> ]}。
end()方法:结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。