1.筛选
1.1过滤
first() 获取匹配的第一个元素
last() 获取匹配的最后一个元素
eq(N) 获取匹配的第N或-N个元素
filter(selector) 筛选出与指定表达式匹配的元素集合
has(selector) 筛选出包含特定特点的元素的集合
not(selector) 筛选出不包含特定特点的元素的集合
案例:演示所有过滤方法
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14//从元素数组中找到第一个元素 $("ul>li").first() //从元素数组中找到最后一个元素 $("ul>li").last() //从元素数组中找到指定的某一个元素 $("ul>li").eq(3) //从元素数组中找到属性title为a的元素 $("ul>li").filter("[title=a]") //从元素数组中筛选出有title属性的元素集合 $("ul>li").filter("[title]") //从与那苏数组中筛选出有<span>标签的元素集合 $("ul>li").has("span") //从元素数组中筛选出没有title属性的元素集合 $("ul>li").not("[title]")
1.2查找
children() 子标签中找
find() 后代标签中找
parent() 父标签
prevAll() 前面所有的兄弟标签
nextAll() 后面所有的兄弟标签
siblings() 前后所有的兄弟标签
案例:演示查找所有的方法
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13//查找 //查找ul的所有子标签,并且指定为li子标签 $("ul").children("li") //查找ul下面所有的span标签 $("ul").find("span") //查找b标签的父元素标签 $("b").parent() //查找第三个li标签前面所有的兄弟标签 $("ul").children("li").eq(2).prevAll("li") //查找第三个li标签后面所有的兄弟标签,并且只能是li标签 $("ul").children("li").eq(2).nextAll("li") //查找第三个li标签的所有兄弟标签 $("ul").children("li").siblings("li")
2.文档处理
2.1增
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13//增 //插入到最后面(给ul中最后一个li中插入一个a) $(".oBox>ul").children("li").last().append($("<a>哈哈哈</a>")) //插入到最后面(给ul中最后一个li中插入一个a),使用appendTo() $("<a>哈哈哈</a>").appendTo($(".oBox>ul").children("li").last()) //插入到最前面(给ul中第一个li中插入一个a) $(".oBox>ul").children().first().prepend($("<button>hh</button>")) //插入到最前面(给ul中第一个li中插入一个a),使用prependTo $("<button>hh</button>").prependTo($(".oBox>ul").children().first()) //在属性title为b前面添加一个li $(".oBox>ul").children("li").filter("[title=b]").before("<li>h</li>") //在属性title为b后面添加一个li $(".oBox>ul").children("li").filter("[title=b]").after("<li>h</li>")
2.2删
复制代码
1
2
3
4
5//删 //清空ul中所有li的内容,使用empty() $(".oBox>ul").children("li").empty() //移除ul中所有的li,使用remove() $(".oBox>ul").children("li").remove()
2.3改
复制代码
1
2
3//改 //把li下面所有的span标签替换为<a>标签 $(".oBox>ul").find("span").replaceWith("<a href='#'>aa</a>")
最后
以上就是友好八宝粥最近收集整理的关于jQuery筛选和文档处理1.筛选的全部内容,更多相关jQuery筛选和文档处理1内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复