jquery选择器

最新推荐文章于 2021-05-12 19:50:47 发布

人间巳时

最新推荐文章于 2021-05-12 19:50:47 发布

阅读量109

点赞数

分类专栏：前端框架jquery 文章标签： jquery 选择器

本文链接：https://blog.csdn.net/Shiny__boy/article/details/98216242

版权

前端框架jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jquery选择器

	<script src="js/jquery1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//$("p:first").css("background-color","red");//:first  获取p标签并匹配第一个p标签
			//$("p:even").css("background-color","red");//:even    匹配下标为偶数的p标签,下标从0开始
			//$("p:not(:odd)").css("background-color","red");//    匹配下标为偶数的p标签,下标从0开始
			//$("p:odd").css("background-color","red");//:odd			匹配下标为奇数的p标签,下标从0开始
			//$("p:not(:even)").css("background-color","red");//		匹配下标为奇数的p标签,下标从0开始
			//$("p:not(:first)").css("background-color","red");//:not		匹配非第一个p标签的标签,除第一个剩下的所有标签
			//$("p:eq(0)").css("background-color","red");   //:eq(index)  匹配下标为index的p标签,下标从0开始
			//$("p:gt(0)").css("background-color","red");   //:gt(index)  匹配下标大于index的p标签,下标从0开始
			//$("p:lt(8)").css("background-color","red");   //:lt(index)  匹配下标小于index的p标签,下标从0开始
			//$("p:lt(8):gt(2)").css("background-color","red");            //匹配小于下标为8的所有p标签,从匹配之后的结果中匹配下标大于2的p标签
			//$("p:gt(4):lt(2)").css("background-color","red");            //匹配大于下标为4的所有p标签,从匹配之后的结果中匹配下标小于2的p标签
			//$("p:lang(en)").css("background-color","red"); //:lang(language)  匹配语言为language的p标签
			//$("p:last").css("background-color","red");  //:last  匹配最后一个p标签
			
			//$(":header").css("background-color","red"); //:header 匹配如 h1, h2, h3之类的标题元素
			//$("p:not(:animated)").css("background-color","red");  //:animated    匹配所有正在执行动画效果的元素
			//$(":root").css("background-color","red"); //:root  选择该文档的根元素,html元素
			//$("#d1p").css("background-color","red"); //#id  id选择器
			//$(".d2p").css("background-color","red");   //.class   类选择器
			//$("*").css("background-color","red");      //*   匹配文档所有标签
			//$("p").css("background-color","red");      //标签选择器,匹配所有p标签
			//$("div p").css("background-color","red");   后代选择器,中间为空格,匹配div中的所有p标签
			//$("p:empty").html("空的p");  //:empty  匹配p中所有不包含子元素或者文本的元素,将("空的p")加入空p标签中
			//$("#d1p+p").css("background-color","red"); //+ 匹配目标标签之后的一个标签,即匹配紧挨着id为d1p的p标签
			//$("#d1p~p").css("background-color","red"); //` 同级选择器,即匹配和id为d1p同级的所有p标签
		})
	</script>
</head>
<body>
	<h1>一级标题</h1>
	<p id="d1p">00000000000000000000000</p>
	<p class="d2p">11111111111111111111111</p>
	<p>22222222222222222222222</p>
	<p>33333333333333333333333</p>
	<p>44444444444444444444444</p>
	<p>55555555555555555555555</p>
	<p>66666666666666666666666</p>
	<p>77777777777777777777777</p>
	<p>88888888888888888888888</p>
	<p lang="en">99999999999999999999999</p>
	<p></p>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	
	<div id="div">
		<p>2222222222</p>
		<p>333333333333</p>
		<p>444444444444</p>
	</div>
	
</body>

人间巳时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选择器

jquery选择器 jquery选择器 <script src="js/jquery1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //$("p:first"...
复制链接

扫一扫

专栏目录