jquery选择器案例分享

其中选择器都已经注释，需要测试哪个打开注释即可观察效果！！
<!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>
jquery选择器案例分享

猜你喜欢
