我是靠谱客的博主 友好八宝粥,最近开发中收集的这篇文章主要介绍jQuery筛选和文档处理1.筛选,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

1.筛选

1.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]")

1.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")

2.文档处理

2.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.2删

//删
//清空ul中所有li的内容,使用empty()
$(".oBox>ul").children("li").empty()
//移除ul中所有的li,使用remove()
$(".oBox>ul").children("li").remove()

2.3改

//改
//把li下面所有的span标签替换为<a>标签
$(".oBox>ul").find("span").replaceWith("<a href='#'>aa</a>")

最后

以上就是友好八宝粥为你收集整理的jQuery筛选和文档处理1.筛选的全部内容,希望文章能够帮你解决jQuery筛选和文档处理1.筛选所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(50)

评论列表共有 0 条评论

立即
投稿
返回
顶部