标签：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-3.1.0.min.js"></script> 6 <title>jQuery选择器</title> 7 </head> 8 9 <body> 10 <!--基本选择器--> 11 <!--#id--> 12 <div id="test"></div> 13 $(‘#id‘); 14 <!--.class--> 15 <div class="test"></div> 16 $(‘.test‘); 17 <!--element--> 18 <div></div> 19 $(‘div‘); 20 <!--*--> 21 <!--selector1,selector2,.......selectorN--> 22 $(‘div,p,span‘); 23 <!------------------------------------------------------------------------------------> 24 <!--层次选择器--> 25 <p> 26 我是demo的上层 27 </p> 28 <div id="demo"> 29 <p>1</p> 30 <p>2</p> 31 <span>3</span> 32 </div> 33 <div> 34 我是demo的下层 35 </div> 36 <div> 37 我是demo的下下层 38 </div> 39 <!-- 40 $(‘#demo p‘).css(‘background‘,‘red‘);后代选择器 41 $(‘#demo>span‘).css(‘background‘,‘blue‘);子选择器 42 $(‘#demo + div‘).css(‘background‘,‘red‘);选取id为demo的div的下一个同级元素 可用jQuery自己的next()方法 43 $(‘#demo ~ div‘).css(‘background‘,‘red‘);选取id为demo的div的下一个同级元素 可用jQuery自己的nextAll()方法 44 --> 45 <!------------------------------------------------------------------------------------> 46 <!--过滤选择器--> 47 <!--与css中的伪类选择器语法相同 都以：开头；按照不同的过滤规则，可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤--> 48 <div>1</div> 49 <div style="width:100px; height:100px; border:1px solid blue"></div> 50 <h1>我是标题1</h1> 51 <ul id="demo1" attribute=‘1‘> 52 <li class="one">我是第一行</li> 53 <li>我是第二行</li> 54 <li>我是第三行</li> 55 <li>我是第四行</li> 56 <li>我是第五行<h3>我是第五行的标题</h3></li> 57 <h2>我是标题2</h2> 58 <li>我是第六行</li> 59 </ul> 60 <!--1.基本过滤器--> 61 <!-- 62 $(‘#demo1 :first‘).css(‘background‘,‘red‘);选取demo1下的第一个子元素 63 $(‘#demo1 :last‘).css(‘background‘,‘red‘); 64 $(‘#demo1 :not(.one)‘).css(‘background‘,‘red‘); 选取demo1下的class不是one的所有元素 65 $(‘#demo1 :even‘).css(‘background‘,‘red‘);选取索引为偶数的元素（索引从0开始） 66 $(‘#demo1 :odd‘).css(‘background‘,‘red‘);选取索引为奇数的元素（索引从0开始） 67 $(‘#demo1 :eq(1)‘).css(‘background‘,‘red‘);选取索引等于n的元素（索引从0开始） 68 $(‘#demo1 :gt(2)‘).css(‘background‘,‘red‘);选取索引大于2的元素（索引从0开始） 69 $(‘#demo1 :lt(2)‘).css(‘background‘,‘red‘);选取索引小于2的元素（索引从0开始） 70 $(‘body :header‘).css(‘background‘,‘red‘);选取网页中所有的h1,h2,h3... 71 --> 72 <!-- 2.内容过滤器--> 73 <!-- $(‘#demo1 :contains(三)‘).css(‘background‘,‘red‘);选取含有文本内容为三的元素 74 $(‘ul :parent‘).css(‘background‘,‘red‘);选取含有子元素的ul元素 75 $(‘#demo1 :has(h3)‘).css(‘background‘,‘red‘);选取demo1下面 含有h3的子元素 76 $(‘div:empty‘).css(‘background‘,‘red‘);选取不包含子元素的div空元素--> 77 <!--3.可见性过滤选择器--> 78 <!-- 79 ：hidden 80 : visible 81 --> 82 <!--4.属性过滤选择器--> 83 <!-- 84 $(‘body [attribute]‘).css(‘background‘,‘red‘);选取含有attribute属性的所有元素 85 $(‘body [attribute=1]‘).css(‘background‘,‘red‘);选取含有attribute属性并且属性值为1的所有元素 86 $(‘body [attribute!=1]‘).css(‘background‘,‘red‘);选取含有attribute属性并且属性值不是1的所有元素 87 $(‘body [attribute^=1]‘).css(‘background‘,‘red‘);选取含有attribute属性并且属性值以1开始的所有元素 88 $(‘body [attribute$=1]‘).css(‘background‘,‘red‘);选取含有attribute属性并且属性值以1结束的所有元素 89 $(‘body [attribute*=1]‘).css(‘background‘,‘red‘);选取含有attribute属性并且属性值有1的所有元素 90 --> 91 <!--5.子元素过滤选择器--> 92 <!-- 93 $(‘#demo1 :first-child‘).css(‘background‘,‘red‘);选取demo1下的每个父元素的第一个子元素 94 $(‘#demo1 :last-child‘).css(‘background‘,‘red‘);选取demo1下的每个父元素的最后一个个子元素 95 $(‘#demo1 :nth-child(1)‘).css(‘background‘,‘red‘);选取demo1下的每个父元素的第n个元素，索引从1开始 96 --> 97 <!--6.表单对象属性过滤选择器--> 98 <!-- 99 :enable 100 :disable 101 :checked 102 :selected 103 --> 104 </body> 105 </html> 106 <script> 107 $(document).ready(function(e) { 108 109 }); 110 </script>
标签：
原文地址：http://www.cnblogs.com/Itwonderful/p/5725765.html
