Jquery学习----选择器
学习Jquery选择器之后，可以发现与css的选择器几乎相同，可能也就是最新的css选择器还不能在jquery中实现，但那都很少用。
下面是Jquery中常见的选择器：
一、基本选择器
$("div").css("background-color", "red");//表示对所有的div增加背景颜色--红色。
$(".divClass").css("background", "gray");//表示对所有class为'divClass'的元素设置背景色--灰色
二、层次选择器
//下面这两个都是表示紧邻的下一个同辈元素。如果.spanclass代表span，则后面同辈元素也必须是span
$(".spanclass+span").css("color", "blue").css("font-size", 33);
$(".spanclass").next().next().css("color", "blue").css("font-size", 33);
//下面这两个表示所有的后面的同辈元素
$(".spanclass~span").css("color", "blue").css("font-size", 33);
$(".spanclass").nextAll().css("color", "blue").css("font-size", 33);
//下面这个表示与其同辈的无论前后的span，不包括本身
$(".spanclass").siblings("span").css("color", "blue").css("font-size", 33);
三、过滤选择器
包括：基本过滤器、内容过滤器、可见性过滤器、属性过滤器、表单过滤器等
下面附详细代码，代码中有各种过滤器使用方法及详细注释。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 10 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 11 <style> 12 div { 13 border: 1px solid blue; 14 width: 200px; 15 height: 250px; 16 } 17 18 table td, 19 table th { 20 border: 1px solid red; 21 } 22 </style> 23 24 </head> 25 26 <body> 27 28 <h1><span>Jquery Selector Test子代</span></h1> 29 <h1> 30 <p>aaaaa<span>wo在span中是子代的子代</span></p> 31 </h1> 32 <div id="div1Id" class="divClass" title="div" style="float:left">我是div1 33 <div style="width:100px;height:100px">我是内部div1</div> 34 <div style="width:100px;height:100px">我是内部div2</div> 35 <div style="width:100px;height:100px">我是内部div3</div> 36 </div> 37 <div class="divClass" style="float:left"> 38 <div style="width:100px;height:100px">我是内部div</div> 39 <div style="width:100px;height:100px">我是内部div2</div> 40 <div style="width:100px;height:100px">我是内部div3</div> 41 <span>前面的span</span><span class="spanclass">我是div2</span><span>紧跟的部分哈哈</span><span>孙子部分</span></div> 42 <div title="div" class="divClass" style="float:left"><span>我是div3</span> 43 <div style="width:100px;height:100px">我是内部div</div> 44 <div style="width:100px;height:100px">我是内部div2</div> 45 <div style="width:100px;height:100px">我是内部div3</div> 46 </div> 47 <div style="float:left"><span>我是div4</span></div> 48 <div style="float:right;display:none"><span>我是div5</span></div> 49 50 <table> 51 <tr> 52 <th>aaaaaaa</th> 53 <th>aaaaaaa</th> 54 <th>aaaaaaa</th> 55 <th>aaaaaaa</th> 56 <th>aaaaaaa</th> 57 <th>aaaaaaa</th> 58 <th>aaaaaaa</th> 59 <th>aaaaaaa</th> 60 </tr> 61 <tr> 62 <td>bbbbbbb</td> 63 <td>bbbbbbb</td> 64 <td>bbbbbbb</td> 65 <td>bbbbbbb</td> 66 <td>bbbbbbb</td> 67 <td>bbbbbbb</td> 68 <td>bbbbbbb</td> 69 <td>bbbbbbb</td> 70 </tr> 71 <tr> 72 <td>ccccccc</td> 73 <td>ccccccc</td> 74 <td>ccccccc</td> 75 <td>ccccccc</td> 76 <td>ccccccc</td> 77 <td>ccccccc</td> 78 <td>ccccccc</td> 79 <td>ccccccc</td> 80 </tr> 81 <tr> 82 <td>dddddddd</td> 83 <td>dddddddd</td> 84 <td>dddddddd</td> 85 <td>dddddddd</td> 86 <td>dddddddd</td> 87 <td>dddddddd</td> 88 <td>dddddddd</td> 89 <td>dddddddd</td> 90 </tr> 91 </table> 92 <form> 93 94 <input type="text" value="慢慢显示" hidden="true"> 95 </form> 96 97 98 <script> 99 //一、基本选择器的使用 100 101 $(document).ready(function() { 102 //dom加载完就执行的部分 103 // $("div").css("background-color", "red"); 104 105 }) 106 107 $(function() { 108 //$("div").css("background-color", "yellow"); 109 }) 110 //Jquery可以无限次的写dom加载完之后执行的方法，不同于window.onload,只能写一次 111 $(function() { 112 // $(".divClass").css("background", "gray"); 113 }) 114 115 116 //二、层次选择器的使用 117 /* $(function() { 118 $("span,.divClass").css("color", "red").css("font-size", 20); 119 }) */ 120 //$("h1 span").css("color", "blue"); //这个是h1下所有的子代，孙子辈也可以 121 //$("h1>span").css("color", "blue"); //这个是h1下第一子代，孙子不可以 122 //下面这两个都是表示紧邻的下一个同辈元素。如果.spanclass代表span，则后面同辈元素也必须是span 123 //$(".spanclass+span").css("color", "blue").css("font-size", 33); 124 // $(".spanclass").next().next().css("color", "blue").css("font-size", 33); 125 //下面这两个表示所有的后面的同辈元素 126 //$(".spanclass~span").css("color", "blue").css("font-size", 33); 127 //$(".spanclass").nextAll("span").css("color", "blue").css("font-size", 33); 128 //下面这个表示与其同辈的无论前后的span，不包括本身 129 //$(".spanclass").siblings("span").css("color", "blue").css("font-size", 33); 130 131 132 //三、过滤选择器的使用,一般都是用：。PS:冒号表示过滤的意思。前面不带空格，表示自身筛选，带空格表示子代筛选 133 $(function() { 134 135 //1,基本过滤器 136 //表示table中隔列变色 137 /* $("table th:even").css("background", "red"); 138 $("table th:odd").css("background", "blue"); */ 139 140 //表示table中隔行变色。 141 /* $("table tr:even").css("background", "yellow"); 142 $("table tr:odd").css("background", "gray"); */ 143 144 //多个选择器的同时使用，其实是可以的。可以理解为对一堆对象不停的筛选。这可能也是Jquery有名的链式操作了。 145 //下面表示从>0行开始隔行变色 146 $("table tr:gt(0):even").css("background", "yellow"); 147 $("table tr:gt(0):odd").css("background", "gray"); 148 149 //2,内容过滤器 150 $("div:contains('div4')").css("background", "red"); 151 //3,可见性过滤选择器 152 $("div:hidden").show(3000); 153 $("input:hidden").show(3000); 154 155 //4,属性过滤器' 156 //$("div[title=div]").css("background", "blue"); 157 // $("div[title!=div]").css("background", "red"); //div的集合中 title不等于div的div的集合。 158 //$("div[id][title=div]").css("background", "blue"); //多个属性过滤器并列使用，不断缩小结果集的过程而已。 159 160 //ps 补充一个基本过滤器和下面比较。这个表示divclass的div后代的中div的第一个设置为黄色。 161 $("div.divClass div:first").css("background", "yellow"); //这个表示选择出所有符合条件对应的div，选取第一个 162 //5,:first-child'注意事项使用子元素过滤器需要冒号前加空格，才会生效 163 $("div.divClass :first-child").css("background", "yellow"); //表示class=divClass的div集合的每一个div子元素第一个子元素设置为yellow 164 $("div.divClass :nth-child(2)").css("background", "red"); //表示class=divClass的div集合每一个div的子元素中第二个子元素设置为yellow 165 }) 166 </script> 167 168 </body> 169 170 </html>
后续补充表单过滤器详细代码。。。
