首页 > 代码库 > 2016y9m22d 博文分享
2016y9m22d 博文分享
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery选择器大全</title> 6 <script src=http://www.mamicode.com/"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=http://www.mamicode.com/"Hot Fuzz" /> 76 <input type="checkbox" name="newsletter" value=http://www.mamicode.com/"Cold Fusion" /> 77 <input type="checkbox" name="accept" value=http://www.mamicode.com/"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({width:"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({width:"200",height:"40",background:"red",});118 //:first | 获取匹配的第一个元素119 $("li:first").css({width:"200",height:"50",background:"green",fontSize:"40px",});120 // :not(selector);去除所有与给定选择器匹配的元素121 // 查找所有未选中的 input 元素122 $(‘input:not(:checked)‘).css({123 width:"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 //查找隐藏的 tr188 $("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 中查找第一个 li216 $("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 中查找最后一个li224 $("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 个li232 $("ul li:nth-child(2)")233 //:nth-last-child(n|even|odd|formula)234 //选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。235 //匹配子元素序号,必须为整数，注意从1开始而不是0236 //even 匹配所有偶数元素237 //odd 匹配所有奇数元素238 //formula 使用特殊公式如(an + b)进行选择. 例如:nth-last-child(3n+2) 从倒数第二个子元素开始，匹配每个3的倍数的元素239 //(例)在每个匹配的ul中查找倒数第二个li240 $("ul li:nth-last-child(2)");241 //:nth-last-of-type 择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。242 //在每个匹配的ul中查找倒数第二个li243 $("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 中查找是唯一子元素的 li250 //<ul><li>Glen</li></ul>251 $("ul li:only-child")252 //:only-of-type253 //选择所有没有兄弟元素，且具有相同的元素名称的元素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 //查找隐藏的 tr287 $("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>
2016y9m22d 博文分享
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。