jQuery基本过滤器

最新推荐文章于 2024-07-05 16:41:23 发布

hello我的朋友

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量246

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_62394372/article/details/126588114

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<h1>qaq</h1>
		<h2>基本过滤选择器</h2>
		<ul>
			<li>11</li>
			<li>22</li>
			<li class="active">33</li>
			<li class="active">44</li>
			<li>55</li>
			<li>66</li>
		</ul>
		<script src="jquery/jquery-3.6.0.js"></script>
		<script>
							/* 
							1、基本选择器 $("基本选择器")
							2、层次选择器 $("E>F")
							3、属性选择器 $("input[type=text]")
							4、过滤选择器
							    基本过滤选择器
								内容过滤选择器
								可见性过滤选择器
								表单对象过滤选择器 
							*/
			$("li:first").css({"background-color":"red"})
			$("li:last").css({"background-color":"pink"})
			
			//奇偶行
			$("li:even").css({"background-color":"green"})
			$("li:odd").css({"background-color":"blue"})
			
			//选择指定行
			$("li:eq(2)").css({"background-color":"yellow"})
			
			//大于小于
			$("li:gt(2)").css({"background-color":"pink"})
			$("li:lt(2)").css({"background-color":"orange"})
			//排除行
			$("li:not(.active)").css({"color":"white"})
			
			//获取所有标题元素
			
			console.log($(":header"));
			
		</script>
	</body>
</html>