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>