增加,筛选元素学习笔记

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="box" id="box">
		<div class="box1" id="box1">
			<div class="box2" id="box2">
				<ul class="box3" id="box3">
					<li class="li1" id="li1">我是li1</li>
					<p class="p1" id="p1">我是p标签</p>
					<li class="li2" id="li2">我是li2</li>
					<li class="li3" id="li3">我是li3
						<h1></h1></li>
					<li class="li4" id="li4">我是li4</li>
					<li class="li5" id="li5">我是li5</li>
					<li class="li6" id="li6">我是li6</li>
				</ul>
			</div>
		</div>
	</div>
	<script src="../jquery/jquery-3.3.1.js"></script>
	<script>
		$(function(){
			console.log($(".li2").add(".li1"));//在选择的jQuery对象中增加元素
			console.log($(".li2",".li1"));//在选择的jQuery对象为class=li1和li2,结果与add(select)一样。
			console.log($("li").not(".li4"));//在选择的jQuery对象中过滤掉class为li4的元素,
			console.log($("li").filter(".li5"));//在选择的jQuery对象中过滤掉class为li5之外的的元素,
			console.log($("li").has("h1"));//选择的jQuery对象中所有的li,再过滤掉li有后代元素h1之外的元素,返回li里有后代h1的li  jQuery对象。
			console.log($("li").slice(3,5));//slice是在返回li jQuery对象集合中筛选出index=3-4的元素,也相当于[3,5)区间。
		})
	</script>
</body>
</html>

结果如下图所示:

猜你喜欢

转载自blog.csdn.net/zhangqling/article/details/79951740