筛选和文档处理

最新推荐文章于 2024-10-02 05:39:15 发布

糖心何包蛋·

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量55

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/hmjcxy/article/details/123585057

版权

先给大家说下筛选，筛选我分为了过滤和查找

首先是过滤：first()：获取匹配的第一个元素
last()：获得匹配的最后一个元素
eq(N)：获取匹配的第N或-N个元素
filter(selector)：筛选出与指定表达式匹配的元素集合
has(selector)：筛选出包含特定特点的元素的集合
not(selector)：筛选出不包含特定特点的元素的集合

以下就是过滤的一些代码

                //--过滤出指定表达式匹配的元素
				// 获取ul中所有的li元素，然后找到第一个元素
 				$("ul li").css("background","yellow");
 				$("ul>li").first().css("background","yellow");
				// 找到最后一个元素
				 $("ul>li").last().css("background","yellow");
				// 找到指定的某一个元素，例如第3个
				 $("ul>li:eq(2)").css("background","yellow");
				 $("ul>li").eq(-1).css("background","yellow");

				// --过滤出指定表达式匹配的元素集合
				// 找到属性title为a的元素
				 $("ul>li").filter("[title=a]").css("background","yellow");
				
				//找到属性title不为a的元素集合
				 $("ul>li").filter("[title][title=a]").css("background","yellow");
				
				// 筛选出有title属性的元素集合
				 $("ul>li").filter("[title]").css("background","yellow");
				
				// 筛选出有<span>标签的元素集合
				 $("ul>li").has("span").css("background","yellow");
				// 筛选出没有title属性的元素集合
				 $("ul>li").not("[title]").css("background","yellow");

查找分为这些：
children()：子标签中找
find()：后代标签中找
parent()：父标签
prevAll()：前面所有的兄弟标签
nextAll()：后面所有的兄弟标签
siblings()：前后所有的兄弟标签

下面都是一些查找的例子，有注释的

                // 查找ul的所有子标签,并且指定为li子标签
				 $("ul>li").css("background","yellow");
				 $("ul").children("li").css("background","yellow");
				// 查找ul下面所有的span标签
				 $("ul span").css("background","yellow");
				 $("ul").find("span").css("background","yellow");
				// 查找b标签的父元素标签
				 $("b").parent().css("background","yellow");
				// 查找第三个li标签前面所有的兄弟标签
				 $("ul>li").eq(2).prevAll().("background","yellow");
				
				// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
				 $("ul>li").eq(2).nextAll("li").css("background","yellow");
				// 查找第三个li标签所有的兄弟标签
				$("ul>li").eq(2).siblings().css("background","yellow");

现在给大家分享一些文档处理，首先是增加，增加分为外部插入和内部插入

外部插入：after()：在匹配元素之后插入内容
before()：在匹配元素之前插入内容

                //--外部插入(之前和之后)
				//   在属性title为b的li前面插入一个a标签
				 $("ul>li").first().prepend("<a href=:'http://www.baidu.com'>sdfasdf</a>")
				//   在属性title为b的li后面插入一个a标签
				 $("ul>li").filter("[title=b]").before("<a href='#'>加自习</a>")

内部插入：append()：将内容添加到指定的元素后面
appendTo()：和append()颠倒
prepend()：将内容添加到指定元素前面
prependTo():和prepend()颠倒

                //--内部插入(前面和后面)
				//   插入到最后面(给ul中最后一个li中插入一个a标签)
				 $("ul>li:last").css("background","yellow");
				
				//   插入到最前面(给ul中第一个li中插入一个a标签)
				 $("ul>li").last().append("<a href=:'http://www.baidu.com'>sdfasdf</a>")
				 $("<a href=:'http://www.baidu.com'>sdfasdf</a>").appendTo($("ul>li").last())

接下来是删除：

empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）
remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）

//2.3 删				
				//清空ul中所有li的内容
				 $("ul li").empty();

				//移除ul中所有的li
				 $("ul li").remove();

最后是改：

replaceWith()：将所有匹配的元素替换成指定的内容

//把li下面所有的span标签替换为<a>标签
				 $("li span").replaceWith("<a href='#'>嗨害嗨</a>")

下面是body部分的，仅供参考

<body>
	<h2>筛选、文档处理</h2>
		<!-- 筛选和查找案例 -->
		<ul>
			<li>1</li>
			<li title="a">2</li>
			<li title="b">3</li>
			<li title="a"><span><b>4</b></span></li>
			<li title="b"><span>5</span></li>
			<ol>
				<li>6</li>
				<li>7</li>
			</ol>
			<span>8</span>
		</ul>
		<button id="btn">返回顶部</button>
</body>