标签：
jquery选择器
下面为选择器的整体结构，我们下面依次解释
1.基本选择器
标签选择器、类选择器、ID选择器、并集选择器、交集选择器、全局选择器
2.层次选择器
后代选择器（包括）、子选择器（直接子元素）、相邻元素选择器（之后的相邻元素）、同辈元素选择器（之后的所有同辈元素）
1 $(function () { 2 $("p").click(function () { 3 $(".txt_box .current").css("background", "#6FF");//后代选择器 4 $("p>span").css("background", "#F9F");//子选择器 5 $("h1+p").css("background", "#F06");//相邻元素选择器 6 $("strong~span").css("color", "#00C");//同辈元素选择器 7 }); 8 });
3.属性选择器
<script type="text/javascript"> $(function () { $("[id=top]").click(function () {//给定属性是某个特定值的元素 $(this).css("background","#f00"); }); $("li[id][title=妖精的尾巴]").css("color", "blue");//满足符合多个条件的符合属性的元素 $("li[id^=‘huo‘]").css("font-weight", "bold");//选取给定属性是以某些特定值开始的元素 $("li[id$=‘an‘]").css("color", "pink");//选取给定属性是以某些特定值结尾的元素 $("li[id*=‘n‘]").css("background", "#ff0");//选取给定属性包含某些特定值的元素 }); </script> </head> <body> <div id="top">动画列表</div> <div id="middle"> <ul> <li id="kenan">名侦探柯南</li> <li id="huoying">火影忍者</li> <li>死神</li> <li id="4" title="妖精的尾巴">妖精的尾巴</li> <li>银魂</li> <li>黑猫警长</li> <li>仙履奇缘</li> </ul> </div> </body>
4.基本过滤选择器
<script type="text/javascript"> $(function () { $("li:first").css("background", "#09F");//改变li的第一元素的背景颜色 $("li:last").css("color", "#f00"); $("li:not(.three)").css("background", "pink");//改变class不为.three的li元素 $("li:even").css("background", "blue");//改变‘索引值’为偶数的li元素 $("li:odd").css("color", "#fff"); $("li:eq(2)").css("color", "red");//改变索引值为2的元素的字体颜色 $("li:gt(1)").css("font-weight", "bold");//改变索引值大于1的li元素的字体 $("li:lt(2)").css(); $(":header").css();//改变所有标题元素的样式，如<h1> <h2> <h3>.... $("li:focus").css(); }); </script> </head> <body> <div id="content"> <div id="top">网络小说</div> <div id="middle"> <ul> <li>王妃不好当</li> <li>致命交易</li> <li>逆天之宠</li> <li>交错时光的爱恋</li> <li>张震鬼的故事</li> <li>第一次亲密接触</li> </ul> </div> </div> </body>
5.表单选择器
一共有如下几种表单选择器
01.：input
剩余的其他几种表单选择器都会只匹配到对应的标签 举一个例子
6.可见性过滤选择器
7.内容过滤选择器
标签：
原文地址：http://www.cnblogs.com/hmy-1365/p/5509028.html
