jquery选择器案例分享

最新推荐文章于 2023-10-19 15:17:55 发布

穆雄雄

最新推荐文章于 2023-10-19 15:17:55 发布

阅读量459

点赞数

分类专栏： # JavaScript 文章标签： jquery选择器基本选择器高级选择器层次选择器

本文链接：https://blog.csdn.net/qq_34137397/article/details/85107877

版权

JavaScript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

其中选择器都已经注释，需要测试哪个打开注释即可观察效果！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				//标签选择器
				//$("p").css("color","red");
				//类选择器
				//$(".p1").css("background","red");
				//ID选择器
				//$("#box").css("border","1px solid black").css("height","400px");
				//并集选择器
				//$("p,span").css("color","blue");
				//全局选择器
				//$("*").css("color","pink");
				//后代选择器
				//$("#box p").css("color","red");
				//子选择器：
				//$("#box>p").css("color","red");
				//相邻元素选择器
				//$(".p2+p").css("color","red");
				//同辈元素选择器
				//$(".p2~p").css("color","red");
				
				//属性选择器
				//给包含name的元素表单里面赋值
				//$("[name]").val("已经赋值");
				//选择name属性的值为text的赋值
				//$("[name='text']").val("已经赋值");
				//给name属性的值不是text的赋值
				//$("[name!='text']").val("已经赋值");
				//给name属性的值以p开头的
				//$("[name^='p']").val("已经赋值");
				//给name属性的值以e结尾的
				//$("[name$='e']").val("已经赋值");
				//给name属性的值包含e的
				//$("[name*='e']").val("已经赋值");
				//给包含type属性等于password和name=phone的input属性赋值
				//$("input[name='password'][type='password']").val("已经赋值");
				
				//过滤性选择器
				//第一个p元素的字体为红色
				//$("p:first").css("color","red");
				//最后一个p元素的字体为红色
				//$("p:last").css("color","red");
				//p里面class不是p3的字体为红色
				//$("p:not(.p3)").css("color","red");
				//p里面偶数的字体为红色(从0开始)
				//$("p:even").css("color","red");
				//p里面奇数的字体为红色(从1开始)
				//$("p:odd").css("color","red");
				//p里面索引等于3的字体为红色(从0开始)
				//$("p:eq(3)").css("color","red");
				//p里面索引大于2的字体为红色(从0开始)
				//$("p:gt(3)").css("color","red");
				//p里面索引小于2的字体为红色(从0开始)
				//$("p:lt(3)").css("color","red");
				//将网页中的所有标题颜色
				//$(":header").css("color","red");
				//获取网页中聚焦点的元素
				//$("[name='password']").focus();
				//$(":focus").css("color","red");
			})
		</script>
	</head>
	<body>
		<header>
			这是头部分
		</header>
		<div id="box">
			<p class="p1">
				第一个p标签
				<span>这是p1里面的span标签</span>
				<p>这是p1里面的p标签</p>
			</p>
			
			<p class="p2">第二个p标签</p>
			<p class="p3">第三个p标签</p>
			<p class="p4">第四个p标签</p>
			<p class="p5">第五个p标签</p>
			<span>
				这是一个span标签
				<p>这是span里面的p标签</p>
			</span>
			<h2>这是一个h2标签</h2>
			属性选择器：
			用户名：<input type="text" name="text" value="" />
			密码：<input type="password" name="password" value="" />
			电话：<input type="text" name="phone" value="" />
			电子邮件：<input type="text" name="email" value="" />
		</div>
	</body>
</html>

穆雄雄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery选择器案例分享

其中选择器都已经注释，需要测试哪个打开注释即可观察效果！！&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src=&quo
复制链接

扫一扫