jQuery查找和过滤

最新推荐文章于 2024-08-23 10:06:28 发布

Tony_Liu0611

最新推荐文章于 2024-08-23 10:06:28 发布

阅读量306

点赞数

分类专栏： web前段(jQuery)

本文链接：https://blog.youkuaiyun.com/Tony_Liu0611/article/details/51931218

版权

web前段(jQuery) 专栏收录该内容

14 篇文章

订阅专栏

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>查找和过滤</title>
	<script type="text/javascript" src="../jquery-2.2.3.js"></script>
	</head>
	<body>

	<div class="my_div">
	<ul class="lang">
	<li class="lang_js">javascript</li>
	<li class="lang_python">python</li>
	<li class="lang_java">java</li>
	<li class="lang_ruby">ruby</li>
	<li class="lang_php">php</li>
	</ul>
	</div>

	<script type="text/javascript">
	/*
	查找和过滤：对结果集在进一步的查找或过滤
	*/
	/*
	注意：和之前的:first、:last、:eq 一样，获取的是一个元素
	first():查找结果集里的第一个
	last(): 查找结果集里的最后一个
	eq(): 查找结果集里的某一个
	*/

	var f1 = $("ul.lang li").first();
	console.log(f1.html());

	var f2 = $("ul.lang li").last();
	console.log(f2.html());

	var f3 = $("ul.lang li").eq(2);
	console.log(f3.html());

	/*
	next(): 获取下一个元素（描述的是兄弟之间的关系）
	prev(): 获取上一个元素（描述的是兄弟之间的关系）
	*/

	//获取ul下的第3个li的下一个元素
	var f4 = $("ul li").eq(2).next();
	console.log(f4.length);
	console.log(f4.html());

	//获取ul下的第2个li元素的上一个元素
	var f5 = $("ul li").eq(1).prev();
	console.log(f5.length);
	console.log(f5.html());

	//获取ul下的最后一个元素的上一个元素的上一个元素
	var f6 = $("ul li").last().prev().prev();
	console.log(f6.length);
	console.log(f6.html());


	/*
	描述的是祖先和晚辈、父与子的关系
	parent():获取父元素
	parents():获取祖先们
	children():获取孩子们
	*/
	var f7 = $("ul li").first().parent();
	console.log(f7.length);
	console.log(f7.html());

	var f8 = $("ul li").first().parents();
	console.log(f8.length);


	var f9 = $("ul li").first().parents("div");
	console.log(f9.length);
	console.log(f9.html());

	//获取ul下的所有孩子
	var f10 = $("ul").children();
	console.log(f10.length);

	//获取class为ruby的孩子
	var f11 = $("ul").children("[class = lang_ruby]");
	console.log(f11.length);
	console.log(f11.html());


	/*
	描述的都是同级关系
	siblings(): 获得当前元素的所有邻居元素
	nextAll(): 获取当前元素的后面所有元素
	prevAll(): 获取当前远的前面所有元素
	*/

	var f12 = $("ul li").eq(3).siblings();
	console.log(f12.length);

	var f13 = $("ul li").eq(3).siblings(":first");
	console.log(f13.length);
	console.log(f13.html());

	var f14 = $("ul li").first().siblings().last();
	console.log(f14.length);
	console.log(f14.html());

	var f15 = $("ul li").eq(2).nextAll();
	console.log(f15.length);

	var f16 = $("ul li").eq(2).nextAll(":eq(1)");
	console.log(f16.length);
	console.log(f16.html());

	//注意：prevAll()后，第一个元素是最靠近调用的那个元素。
	var f17 = $("ul li").last().prevAll().last().next();
	console.log(f17.length);
	console.log(f17.html());

	/*
	find(): 按照条件查找某些子元素
	filter():通过结果集，按照条件过滤
	not: 通过结果集，利用not去排除
	*/

	var f18 = $("ul").find("[class = lang_java]");
	console.log(f18.length);
	console.log(f18.html());

	var f19 = $("ul li").filter("[class = lang_java]");
	console.log(f19.length);
	console.log(f19.html());

	var f20 = $("ul li").not("[class = lang_php]");
	console.log(f20.length);

	/*
	is(): 判断结果集里面是否有某个元素，返回值是true或false
	*/

	var f21 = $("ul li").is("li");
	console.log(f21);

	/*
	hasClass(): 判断结果集里是否有某个类，返回值是true或false
	*/

	var f22 = $("ul li").first().hasClass("lang_js");
	console.log(f22);


	</script>
	</body>
	</html>