jQuery 筛选&文档处理

最新推荐文章于 2024-10-04 17:24:00 发布

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈蛤

最新推荐文章于 2024-10-04 17:24:00 发布

阅读量306

点赞数 1

分类专栏：笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_62981243/article/details/123593975

版权

笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

jQuery 筛选：

1.过滤

在jQuery对象数组中，过滤出一部分元素来

1.first()：获取匹配的第一个元素

//获取ul中所有的li元素，然后找到第一个元素
$("ul>li").first().css("background","blue");
$("ul>li:first").css("background","red");

2.last()：获得匹配的最后一个元素

//从元素数组中找到最后一个元素
$("ul>li").last().css("background","blue");

3.eq(N)：获取匹配的第N或-N个元素

//从元素数组中找到指定的某一个元素
$("ul>li").eq(2).css("background","yellow");

4.filter(selector)：筛选出与指定表达式匹配的元素集合

//从元素数组中找到属性title为a的元素
$("ul>li").filter("[title=a]").css("background","red");
//筛选出有title属性的元素集合
$("ul>li").filter("[title]").css("background","red");
//筛选出有title属性或者title属性不等于b的元素集合
$("ul>li").filter("[title][title!=b]").css("background","red");

5.has(selector)：筛选出包含特定特点的元素的集合

//从元素数组中筛选出有<span>标签的元素集合
$("ul>li").has("span").css("background","red");

6.not(selector)：筛选出不包含特定特点的元素的集合

//从元素数组中筛选出没有title属性的元素集合
$("ul>li").not("[title]").css("background","red");

2.查找

在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签

1.children()：子标签中找

//查找ul的所有子标签,并且指定为li子标签
 $("ul").children("li").css("background","red");

2.find()：后代标签中找

//查找ul下面所有的span标签
$("ul").find("span").css("background","red");

3.parent()：父标签

//查找b标签的父元素标签
$("b").parent().parent().css("border","1px solid red");
//parents() 查找所有的父节点，直到根节点找到后结束
console.log($("b").parents());

4.prevAll()：前面所有的兄弟标签

//查找第三个li标签前面所有的兄弟标签
$("ul").children("li").eq(2).prevAll("li").css("background","red");

5.nextAll()：后面所有的兄弟标签

//查找第三个li标签后面所有的兄弟标签,并且只能是li标签
$("ul").children("li").eq(2).nextAll("li").css("background","red");

6.siblings()：前后所有的兄弟标签

//查找第三个li标签所有的兄弟标签
$("ul").children("li").eq(2).siblings("li").css("background","red");

jQuery 文档处理

增加

内部插入(后面)

1.append()：将内容添加到指定的元素后面

//插入到最后面(给ul中最后一个li中插入一个a)
$("ul").children("li").last().append($("<a href='#'>点一下</a>"));

2.appendTo()：和append()颠倒

//插入到最后面(给ul中最后一个li中插入一个a),使用appendTo()
($("<a href='#'>点一下</a>")).appendTo($("ul").children("li").last());

内部插入(前面)

3.prepend()：将内容添加到指定元素前面

//插入到最前面(给ul中第一个li中插入一个a)
$("ul").children("li").first().prepend($("<a href='#'>点一下</a>"));

4.prependTo():和prepend()颠倒

//插入到最前面(给ul中第一个li中插入一个a),使用prependTo
($("<a href='#'>点一下</a>")).prependTo($("ul").children("li").first());

外部插入

5.after()：在匹配元素之后插入内容

//在属性title为b前面添加一个li
$(".oBox>ul").children("li").filter("[title=b]").after($("<li>你好</li>"));

6.before()：在匹配元素之前插入内容

//在属性title为b后面添加一个li
$(".oBox>ul").children("li").filter("[title=b]").before($("<li>你好</li>"));

删除

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

//清空ul中所有li的内容，使用empty()
$(".oBox>ul").children("li").empty();

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

//移除ul中所有的li，使用remove()
$(".oBox>ul").children("li").remove();

修改

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

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

clone 复制ul中的第一个子节点追加到末尾

$(".oBox>ul").append($(".oBox>ul").children("li").first().clone(false));

城市选择案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			select {
				width: 200px;
				background-color: teal;
				height: 200px;
				font-size: 20px;
			}

			.btn-box {
				width: 30px;
				display: inline-block;
				vertical-align: top;
			}
		</style>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//全部到右边
				$("#btn-sel-all").click(function() {
					//拿到select所有option项，添加到右边
					$("#src-city>option").appendTo($("#tar-city"));
				});
				//全部到左边
				$("#btn-sel-none").click(function() {
					//拿到右边select所有option项，添加到左边
					$("#tar-city>option").appendTo($("#src-city"));
				});
				//选中的添加到右边
				$("#btn-sel").click(function() {
					//找到左边被选中的，添加到右边
					$("#src-city>option:selected").appendTo($("#tar-city"));
				});
				//选中的添加到左边
			 $("#btn-back").click(function() {
					//找到右边被选中的，添加到左边
					$("#tar-city>option:selected").appendTo($("#src-city"));
				});
			});
		</script>
	</head>
	<body>
		<h1>城市选择：</h1>
		<select id="src-city" name="src-city" multiple>
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">深圳</option>
			<option value="4">广州</option>
			<option value="5">西红柿</option>
		</select>
		<div class="btn-box">
			<!--实体字符-->
			<button id="btn-sel-all"> &gt;&gt; </button>
			<button id="btn-sel-none"> &lt;&lt; </button>
			<button id="btn-sel"> &gt;</button>
			<button id="btn-back"> &lt; </button>
		</div>
		<select id="tar-city" name="tar-city" multiple>
		</select>
	</body>
</html>