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