×

跟着JQuery API学Jquery 之三 筛选

作者:Terry2017.02.14来源:Web前端之家浏览:8848评论:0
关键词:JQueryJS
1.过滤
eq(index) 看这个函数和基础里的:eq貌似是一样的(其实就是一样的)
比如我们对<div>1</div><div>1</div>做选择,那我们可以用$(“div”).eq(1)或$(“div:eq(1)”)
来选中第二个div效果是一样的

hasClass(class) 用来判断当前元素是否含有一个类 这个和is(“.”+class)是一样的,我们来看一下is()这个函数用来干吗的 ,它是用一个表达式来检查当前选择的元素的集合,如果其中至少有一个元素符合给定表达式就返回true。is(expr)里面的参数就是选择器的参数。

filter(expr) 用来选出带有匹配表达式的元素的集合,这个和is有点类似,只不过is是返回的bool型,用于判断,filter用来缩小范围,filter中的参数可以是一个函数,函数的返回值为bool型,当返回的是真的时候就保留节点。其实就是对对象做一个循环,然后删除不要的。比如有<p class="aa">asdf</p><p>2343</p>我们选择class为aa的那个 把他的文本改成一段文字
$("p").filter(function() { return $(this).hasClass("aa") }).text("选择的东西")

not(txpr) 用来删除匹配的元素,这个又和前面有一个:not()一样
slice(start,[end]) 选择一个段 从start开始到end 结束 如果没有end则到结尾
$("p").slice(0, 1),我总觉得这个函数的第二个变量该成num 要好一点 ,从哪一个开始,选择前num个。

2 查找
add(expr) 把与表达式匹配的添加到原来的对象中,这个有点像多选择器比如$(“#id,.cs”)
也可以写成$(“#id”).add(“.cs”)效果一样
Children([expr])得到所有子元素的集合
Contents() 查找匹配元素内部所有的子节点。如果是iframe则查找文档的内容。这个可以很方便的用来变更iframe里面的内容,比如文本编辑器。。
find(expr) 搜索与指定表达式匹配的内容,这个也可以用选择器来实现 比如 $(“ul li”)可以写成 $(“ul”).find(“li”)
next(expr) 搜索同辈元素中紧跟在后面的元素,这个有是 a+b的选择器形式 比如我们要选择div后面跟p标签的$(“div+p”)当然也可以用$(“div”).next(“p”)
nextAll() 搜索后面所有的同辈元素 这个和 a~b是一样的$(“div~p”)和$(“div”).nextAll(“p”)是一样的
Prev([expr]) 取得紧邻的同辈元素的前一个这个和next()刚好相反
PrevAll([expr])取得前面所有的元素这个和nextAll() 刚好相反
Siblings([expr]) 这个函数应该就是nextAll()和prevAll()的和了

offsetParent() 返回第一个元素的父节点,为什么是第一个元素呢,这个用JavaScript来实现是Parent(),但是我们这个用的是jquery,操作的是jquery对象,在很多的教程上都在强调我们要分清JQuery对象和JS对象,其实Jquery对象就是一个array数组,就是要我们注意操作时要把数组的值取出来了在用想用第一个就在后面价格索引[0]来得到第一个对象。
Parent(expr)取得所有元素的都包含的父元素,我们已经知道jquery对象是一个数组,那么里面可能包含多个节点,那么我们就要找出这多个节点共同的父节点,也就是找出一个能够包含他们所有的一个节点,就像有两个人一个是湖北一个是河南,你要找他的上一级,就是他们都是中国的。当然你也可以在里面填一个参数parent(湖北)那么最后我们得到了的节点是湖北。

3 串联
串联里面只有两个函数 andSelf() 和end()
andSelf() 加入先前所选的加入到当前的元素中,这个解释读起来有点绕口。这里就要提一下Jquery的链式操作。比如你选择了 中国-湖北 得到了湖北这个节点 然后你又用 andSelf()把中国在加进入,这个对你想操作你没有筛选前的元素会很有用。
end() 回到最近一个有“破坏性”的操作之前,那什么是破坏性呢,就是对一个集合做了在次的操作
比如前面我们说的next(),到这里我们就知道为什么我们能用$(“div+p”)完成的操作要写成$(“div”).next(“p”)了。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1487001600797.html

网友评论文明上网理性发言已有0人参与

发表评论: