1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery选择器大全</title> 6 <script src="js/jquery-3.1.0.min.js"></script> 7 <style> 8 td{ 9 border:5px yellow solid; 10 } 11 .focused { 12 background: #abcdef; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="myDiv">id="myDiv"</div> 18 <div id="notMe">id="notMe"</div> 19 <div>div1</div> 20 <div>div2</div> 21 <span>span</span> 22 <div class="myClass">div class="myClass"</div> 23 <div class="myClass">div class="myClass"</div> 24 <div class="notME">div class="notMe"</div> 25 <p class="notMyClass">p class="notMyClass"</p> 26 <p class="notMyClass">p class="notMyClass"</p> 27 <form> 28 <label>Name:</label> 29 <input name="name" /> 30 <fieldset> 31 <label>Newsletter:</label> 32 <input name="newsletter" /> 33 </fieldset> 34 </form> 35 <input name="none" /> 36 <ul> 37 <li>list item1</li> 38 <li>list item2</li> 39 <li>list item3</li> 40 <li>list item4</li> 41 <li>list item5</li> 42 </ul> 43 <input type="text" name="apple"/> 44 <input type="text" name="flower" checked="checked"/> 45 <table style="border:2px pink solid"> 46 <tr> 47 <td>value1</td> 48 </tr> 49 <tr> 50 <td>value2</td> 51 </tr> 52 <tr> 53 <td>value3</td> 54 </tr> 55 </table> 56 <h1>Header 1</h1> 57 <p>Contents 1</p> 58 <h2>Header 2</h2> 59 <p>Contents 2</p> 60 <button id="run">Run</button><div></div> 61 <div id="content"> 62 <input tabIndex="1"> 63 <input tabIndex="2"> 64 <select tabIndex="3"> 65 <option>select menu</option> 66 </select> 67 <div tabIndex="4"> 68 a div 69 </div> 70 </div> 71 <table> 72 <tr style="display:none"><td>Value 1</td></tr> 73 <tr><td>Value 2</td></tr> 74 </table> 75 <input type="checkbox" name="newsletter" value="Hot Fuzz" /> 76 <input type="checkbox" name="newsletter" value="Cold Fusion" /> 77 <input type="checkbox" name="accept" value="Evil Plans" /> 78 <input name="man-news" /> 79 <input name="milkman" /> 80 <input name="letterman2" /> 81 <input name="newmilk" /> 82 <script> 83 $(function(){ 84 $("#myDiv").css({"100",height:"20",background:"blue",}); 85 //用于搜索的，通过元素的 id 属性中给定的值 86 //查找 ID 为"myDiv"的元素 87 var a=$('#myDiv'); 88 console.log(a); 89 //根据给定的元素标签名匹配所有元素 90 //查找一个 DIV 元素 91 var b=$("div"); 92 console.log(b); 93 //一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到 94 var c=$(".myClass"); 95 console.log(c); 96 //匹配所有元素,多用于结合上下文来搜索。 97 //找到每一个元素 98 var d=$('*'); 99 console.log(d); 100 //将每一个选择器匹配到的元素合并后一起返回。 101 //找到匹配任意一个类的元素。 102 var e=$("div.notME,span,p.notMyClass"); 103 console.log(e); 104 //在给定的祖先元素下匹配所有的后代元素 105 //找到表单中所有的 input 元素 106 var f=$('form input'); 107 console.log(f); 108 //在给定的父元素下匹配所有的子元素 109 //用以匹配元素的选择器，并且它是第一个选择器的子元素 110 //parent > child;匹配表单中所有的子级input元素。 111 var g=$('form > input'); 112 console.log(g); 113 //prev + next;匹配所有紧接在 prev 元素后的 next 元素 114 var h=$("label+input"); 115 console.log(h); 116 //form ~ input;匹配 form 元素之后的所有 input 元素 117 $('form~input').css({"200",height:"40",background:"red",}); 118 //:first | 获取匹配的第一个元素 119 $("li:first").css({"200",height:"50",background:"green",fontSize:"40px",}); 120 // :not(selector);去除所有与给定选择器匹配的元素 121 // 查找所有未选中的 input 元素 122 $('input:not(:checked)').css({ 123 "300", 124 height:"50", 125 //background:"green", 126 fontSize:"40px", 127 });; 128 // :even匹配所有索引值为偶数的元素，从 0 开始计数 129 // 查找表格的1、3、5...行（即索引值0、2、4...） 130 $("tr:even"); 131 //:odd 匹配所有索引值为奇数的元素，从 0 开始计数 132 //查找表格的2、4、6行（即索引值1、3、5...） 133 $("tr:odd") 134 //:eq(index) 匹配一个给定索引值的元素,从 0 开始计数 135 //查找表格第二行 136 $("tr:eq(1)") 137 //:gt(index) 匹配所有大于给定索引值的元素 138 //查找表格第二第三行，即索引值是1和2，也就是比0大 139 $("tr:gt(0)") 140 //:last() 获取最后个元素 141 //获取li的最后个元素 142 $("li:last") 143 //:lt(index) 匹配所有小于给定索引值的元素 从 0 开始计数 144 //查找表格第一第二行，即索引值是0和1，也就是比2小 145 $("tr:it(2)") 146 //:header 匹配如 h1, h2, h3之类的标题元素 147 //给页面内所有标题加上背景色 148 $(":header").css({ 149 background:"red", 150 }) 151 //:animated 匹配所有正在执行动画效果的元素 152 //只有对不在执行动画效果的元素执行一个动画特效 153 $("#run").click(function(){ 154 $("div:not(:animated)").animated({ 155 left:"+20", 156 },1000); 157 }); 158 //:focus 匹配当前获取焦点的元素 159 //添加一个"focused"的类名给那些有focus方法的元素 160 $( "#content" ).delegate( "*", "focus blur", function( event ) { 161 var elem = $( this ); 162 setTimeout(function() { 163 elem.toggleClass( "focused", elem.is( ":focus" ) ); 164 }, 0); 165 }); 166 //:root 选择该文档的根元素 167 //在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。 168 //设置<html>背景颜色为黄色 169 $(":root").css("background-color","yellow"); 170 //:target 选择由文档URI的格式化识别码表示的目标元素 171 //如果文档的URI包含一个格式化的标识符，或hash（哈希）， 然后:target选择器将匹配ID和标识符相匹配的元素。 例如，给定的URI http://example.com/#foo， $( "p:target" )，将选择<p id="foo">元素。 172 //这个不寻常的用法，可进一步讨论中找到 W3C CSS specification. 173 //:contains(text) 匹配包含给定文本的元素 174 //一个用以查找的字符串 175 $("div:contains('div1')") 176 //:empty 匹配所有不包含子元素或者文本的空元素 177 //查找所有不包含子元素或者文本的空元素 178 $("td:empty") 179 //:has(selector) 匹配含有选择器所匹配的元素的元素 180 //一个用于筛选的选择器 181 //给所有包含 p 元素的 div 元素添加一个 text 类 182 $("div:has(p)").addClass("test");// 183 //:parent 匹配含有子元素或者文本的元素 184 //查找所有含有子元素或者文本的 td 元素 185 $("td:parent") 186 //:hidden 匹配所有不可见元素，或者type为hidden的元素 187 //查找隐藏的 tr 188 $("tr:hidden") 189 //:visible 匹配所有的可见元素 190 //查找所有可见的 tr 元素 191 $("tr:visible") 192 //[attribute] 193 //匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。 194 //查找所有含有 id 属性的 div 元素 195 $("div[id]") 196 //[attribute=value] 匹配给定的属性是某个特定值的元素 197 //查找所有 name 属性是 newsletter 的 input 元素 198 $("input[name='newsletter']").attr("checked", true); 199 //[attribute!=value] 200 //匹配所有不含有指定的属性，或者属性不等于特定值的元素 201 //查找所有 name 属性不是 newsletter 的 input 元素 202 $("input[name!='newsletter']").attr("checked", true); 203 //[attribute^=value] 匹配给定的属性是以某些值开始的元素 204 //查找所有 name 以 'news' 开始的 input 元素 205 $("input[name^='news']") 206 //[attribute$=value] 匹配给定的属性是以某些值结尾的元素 207 //查找所有 name 以 'letter' 结尾的 input 元素 208 $("input[name$='letter']") 209 //[attribute*=value] 匹配给定的属性是以包含某些值的元素 210 //查找所有 name 包含 'man' 的 input 元素 211 $("input[name*='man']") 212 //找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 213 $("input[id][name$='man']") 214 //:first-child 匹配第一个子元素 215 //在每个 ul 中查找第一个 li 216 $("ul li:first-child") 217 //:first-of-type 218 //结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于 :nth-of-type(1) 选择器 219 //查找作为父元素的span类型子元素中的"长子"的span标签 220 $("span:first-of-type"); 221 //:last-child 匹配最后一个子元素 222 //:last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素 223 //在每个 ul 中查找最后一个li 224 $("ul li:last-child") 225 //:last-of-type 226 //结构化伪类，匹配E的父元素的最后一个E类型的孩子 227 $("div:last-of-type"); 228 //:nth-child 匹配其父元素下的第N个子或奇偶元素 229 //:eq(index) 匹配选择器指定序列的元素，而这个将为每一个父元素匹配子元素。 230 //:nth-child从1开始的，而:eq()是从0算起的！ 231 //在每个 ul 查找第 2 个li 232 $("ul li:nth-child(2)") 233 //:nth-last-child(n|even|odd|formula) 234 //选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。 235 //匹配子元素序号,必须为整数，注意从1开始而不是0 236 //even 匹配所有偶数元素 237 //odd 匹配所有奇数元素 238 //formula 使用特殊公式如(an + b)进行选择. 例如:nth-last-child(3n+2) 从倒数第二个子元素开始，匹配每个3的倍数的元素 239 //(例)在每个匹配的ul中查找倒数第二个li 240 $("ul li:nth-last-child(2)"); 241 //:nth-last-of-type 择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。 242 //在每个匹配的ul中查找倒数第二个li 243 $("ul li:nth-last-of-type(2)"); 244 //:nth-of-type(n|even|odd|formula) 245 //选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。 246 //查找每个span，这个 span 是 其所有兄弟span元素中的第二个元素。 247 $("span:nth-of-type(2)"); 248 //:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配 249 //在 ul 中查找是唯一子元素的 li 250 //<ul><li>Glen</li></ul> 251 $("ul li:only-child") 252 //:only-of-type 253 //选择所有没有兄弟元素，且具有相同的元素名称的元素 254 255 //:input; 匹配所有 input, textarea, select 和 button 元素 256 //查找所有的input元素，下面这些元素都会被匹配到。 257 $(":input") 258 //:text 匹配所有的单行文本框 259 //查找所有文本框 260 $(":text") 261 //:password 匹配所有密码框 262 //查找所有密码框 263 $(":password") 264 //:radio 匹配所有单选按钮 265 //查找所有单选按钮 266 $(":radio") 267 //:checkbox 匹配所有复选框 268 //查找所有复选框 269 $(":checkbox") 270 //:submit 匹配所有提交按钮 271 //查找所有提交按钮 272 $(":submit") 273 //:image 匹配所有图像域 274 //如：<input type="image" /> 275 $(":image") 276 //:reset 匹配所有重置按钮 277 //查找所有重置按钮 278 $(":reset") 279 //:button 匹配所有按钮 280 //查找所有按钮 281 $(":button") 282 //:file 匹配所有文件域 283 //查找所有文件域 284 $(":file") 285 //:hidden 匹配所有不可见元素，或者type为hidden的元素 286 //查找隐藏的 tr 287 $("tr:hidden") 288 //:visible 匹配所有的可见元素 289 //查找所有可见的 tr 元素 290 $("tr:visible") 291 //[attribute] 匹配包含给定属性的元素 292 //查找所有含有 id 属性的 div 元素 293 $("div[id]") 294 295 296 297 298 299 }); 300 301 </script> 302 303 304 </body> 305 </html>