jquery的筛选与文档处理

筛选
1.过滤
first() 获取匹配的第一个元素
last() 获取匹配的最后一个元素
eq(N) 获取匹配的第N或-N个元素
filter(selector) 筛选出与指定表达式匹配的元素集合
has(selector) 筛选出包含特定特点的元素的集合
not(selector) 筛选出不包含特定特点的元素的集合
案例:
 
//从元素数组中找到第一个元素
            $("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]")
2.查找
children() 子标签中找
find() 后代标签中找
parent() 父标签
prevAll() 前面所有的兄弟标签
nextAll() 后面所有的兄弟标签
siblings() 前后所有的兄弟标签
案例:演示查找所有的方法
//查找
            //查找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")
 
文档处理
1.增
//增
            //插入到最后面(给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.删
empty():删除匹配的元素集合中所有的子节点(不包含匹配的元素)
remove():删除匹配的元素集合中所有的子节点(包含匹配的元素)
 
//删
            //清空ul中所有li的内容,使用empty()
            $(".oBox>ul").children("li").empty()
            
            //移除ul中所有的li,使用remove()
            $(".oBox>ul").children("li").remove()
3.改
replaceWith():将所有匹配的元素替换成指定的内容
 
//改
            //把li下面所有的span标签替换为<a>标签
            $(".oBox>ul").find("span").replaceWith("<a href='#'>aa</a>")

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值