JQuery学习06篇(基础过滤器)

最新推荐文章于 2023-03-13 22:06:30 发布

程宇寒

最新推荐文章于 2023-03-13 22:06:30 发布

阅读量148

点赞数

文章标签： JQuery js javaScript 基础过滤器前端开发

本文链接：https://blog.csdn.net/czh500/article/details/103572658

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习06篇(基础过滤器)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习06篇(基础过滤器)</h3>
	过滤器类似于sql中的having(即在选择器选出的结果的基础上再次筛选)
<pre>
如果选择器选出的结果仍不够细,可以用过滤器,进一步筛选.
过滤器一般写在"选择器"之后,如"选择器:过滤器"
基础过滤器是根据对象的"索引"值来查找
</pre>
	<ul>
		<li>令狐冲</li>
		<li>韦小宝</li>
		<li>杨过</li>
		<li>郭靖</li>
		<li>张无忌</li>
	</ul>
	<ul>
		<li>于都县</li>
		<li>兴国县</li>
		<li>会昌县</li>
	</ul>
	<ol>
		<li>赣南脐橙</li>
		<li>于都番薯干</li>
		<li>于都酸萝卜</li>
	</ol>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//标签选择器
$("li").css("background", "gray");

//过滤器(在选择器的基础上再次筛选)
$("li:first").css("background", "Coral");
$("li:last").css("background", "red");
$("ul li:first").css("background", "green");
$("ul").find("li:last").css("background", "IndianRed");
$("ul li:first-child").css("background", "yellow");
$("li:first-child").css("background", "CornflowerBlue");
//找奇数个，从0开始
$("li:odd").css("background", "BurlyWood");
//找偶數个，从0开始
$("li:even").css("background", "DarkSlateBlue");
//找第几个，从0开始
$("li:eq(3)").css("background", "LimeGreen");
</script>
</html>

程宇寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习06篇(基础过滤器)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JQuery学习06篇(基础过滤器)</title><link rel="stylesheet" type="text/css" href="inputAndDiv.css">&...
复制链接

扫一扫