首页 > 代码库 > JQ选择器...
JQ选择器...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQ选择器</title> <style type="text/css"> .focused{ background:#abcdef; } </style></head><body> <p>1.#id:使用任何的元字符（如 !"#$%&‘()*+,./:;<=>?@[\]^`{|}~）作为名称的文本部分， 它必须被两个反斜杠转义：\\。 <div id="notMe"> <p>id="notMe"</p> </div> <div id="myDiv">id="myDiv"</div> <span id="foo:bar"></span> <span id="foo[bar]"></span> <span id="foo.bar"></span> </p> <p>2.element:根据给定的元素标签名匹配所有元素 <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> </p> <p>3. .class:根据给定的css类名匹配元素 <div class="noteMe">div class="noteMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> </p> <p>4.*:匹配所有元素 <div>DIV</div> <span>SPAN</span> <p>P</p> </p> <p>5.selector1,selector2,selectorN:将每一个选择器匹配到的元素合并后一起返回。 <div>div</div> <p class="myClass">p class="myClass"</p> <span>span</span> <p class="notMyClass">p class="notMyClass"</p> </p> <p>6.ancestor descendant:在给定的祖先元素下匹配所有的后代元素 <form action=""> <label for="">Name:</label> <input type="text" name="name"> <fieldset> <label for="">Newstter:</label> <input type="text" name="newsletter"> </fieldset> </form> <input type="text" name="none"> </p> <p>7.parent > child:在给定的父元素下匹配所有的子元素 <form action=""> <label for="">Name:</label> <input type="text" name="name"> <fieldset> <label for="">Newstter:</label> <input type="text" name="newsletter"> </fieldset> </form> <input type="text" name="none"> </p> <p>8.prev + next:匹配所有紧接在 prev 元素后的 next 元素 <form action=""> <label for="">Name:</label> <input type="text" name="name"> <fieldset> <label for="">Newstter:</label> <input type="text" name="newsletter"> </fieldset> </form> <input type="text" name="none"> </p> <p>9.prev ~ siblings:匹配 prev 元素之后的所有同辈元素 <form action=""> <label for="">Name:</label> <input type="text" name="name"> <fieldset> <label for="">Newstter:</label> <input type="text" name="newsletter"> </fieldset> </form> <input type="text" name="none"> </p> <p>10. :first:获取第一个元素 <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> </p> <p>11. :not(selector):去除所有与给定选择器匹配的元素 <input type="text" name="apple"> <input type="text" name="flower" checked="checked"> </p> <p>12. :even :匹配所有索引值为偶数的元素，从 0 开始计数 <table> <tr> <td>Header 1</td> <td>Value 1</td> <td>Value 2</td> </tr> </table> </p> <p> 13. :odd:匹配所有索引值为奇数的元素，从 0 开始计数 <table> <tr> <td>Header 1</td> <td>Value 1</td> <td>Value 2</td> </tr> </table> </p> <p>14. :eq(index):匹配一个给定索引值的元素 <table> <tr> <td>Header 1</td> <td>Value 1</td> <td>Value 2</td> </tr> </table> </p> <p>15. :gt(index):匹配所有大于给定索引值的元素 <table> <tr> <td>Header 1</td> <td>Value 1</td> <td>Value 2</td> </tr> </table> </p> <p>16. :lang:选择指定语言的所有元素。 </p> <p>17. :last() :获取最后个元素 <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> </p> <p>18. :lt(index):匹配所有小于给定索引值的元素 <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> </p> <p>19. :header:匹配如 h1, h2, h3之类的标题元素 <h1>Header 1</h1> <p>Contents 1</p> <h2>Header 2</h2> <p>Content 2</p> </p> <p>20. :animated :匹配所有正在执行动画效果的元素 <button id="run">Run</button><div></div> </p> <p>21. :focus；匹配当前获取焦点的元素。 <div id="content"> <input type="text" tabIndex="1"> <input type="text" tabIndex="2"> <select name="" id="" tabIndex="3"> <option value="">select menu</option> </select> <div tabIndex="4"> a div </div> </div> </p> <p>22. :root:选择该文档的根元素。 </p> <p>23. :target:选择由文档URI的格式化识别码表示的目标元素</p> <p>24. :contains:匹配包含给定文本的元素 <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J.Ohn</div> </p> <p>25. :empty:匹配所有不包含子元素或者文本的空元素 <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> </p> <p>26. :has:匹配含有选择器所匹配的元素的元素 <div> <p>Hello</p> </div> <div>Hello again!</div> </p> <p>27. :parent:匹配含有子元素或者文本的元素 <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> </p> <p>28. :hidden:匹配所有不可见元素，或者type为hidden的元素 <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> </p> <p>29. :visible:匹配所有的可见元素 <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> </p> <p>30.[attribute]:匹配包含给定属性的元素 <div> <p>Hello!</p> </div> <div id="test2"></div> </p> <p>31.[attribute=value]:匹配给定的属性是某个特定值的元素 <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> </p> <p>32.[attribute != value]:匹配所有不含有指定的属性，或者属性不等于特定值的元素 <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> </p> <p>33.[attribute^=value]:匹配给定的属性是以某些值开始的元素 <input name="newsletter" /> <input name="milkman" /> <input name="newsboy" /> </p> <p>34.[attribute$=value]:匹配给定的属性是以某些值结尾的元素 <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> </p> <p>35.[attribute*=value]:匹配给定的属性是以包含某些值的元素 <input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> </p> <p>36.[selector1][selector2][selectorN]:复合属性选择器，需要同时满足多个条件时使用。 <input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /> </p> <p>37. :first-child:匹配第一个子元素 <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> </p> <p>38. :first-of-type :查找相同一类元素中的第一个元素（长子） <div id="n1"> <div id="n2" class="abc"> <label id="n3">label1</label> <span id="n4">span1</span> <span id="n5" class="abc">span2</span> <span id="n6">span3</span> </div> <div id="n7"> <span id="n8" class="abc">span1</span> <span id="n9">span2</span> </div> </div> </p> <p>39. :last-child：匹配最后一个子元素 <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> </p> <p>40. :last-of-type :查找相同一类元素中的最后一个</p> <p>41. :nth-child :匹配其父元素下的第N个子或奇偶元素 <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> </p> <p>42. :nth-last-child:选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </p> <p>43. :nth-last-of-type :选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。</p> <p>44.nth-of-type:选择同属于一个父元素之下，并且标签名相同的子元素中的第n个</p> <p>45. :only-child:如果某个元素是父元素中唯一的子元素，那将会被匹配 <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> </ul> </p> <p>46. :only-of-type :选择所有没有兄弟元素，且具有相同的元素名称的元素。如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配</p> <p>47. :input:匹配所有 input, textarea, select 和 button 元素 <form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button> </form> </p> <p>48.:text :匹配所有的单行文本框 <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> </p> <p>49.:password :匹配所有密码框 <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> </p> <p>50.:radio :匹配所有单选按钮 <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> </p> <p>51.:checkbox :匹配所有复选框 <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> </p> <p>52.:submit :匹配所有提交按钮 <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> </p> <p>53.:image :匹配所有图片按钮 <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> </p> <p>54.:reset :匹配所有重置按钮 <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> </p> <p>55.:button :匹配所有按钮 <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> </p> <p>56.:file :匹配所有文件域 <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> </p> <p>57.:enabled :匹配所有可用元素 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> </p> <p>58.:disabled :匹配所有不可用元素 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> </p> <p>59. :checked :匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected <form> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> </form> </p> <p>60. :selected :匹配所有选中的option元素 <select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3">Trees</option> </select> </p> <p>61. :escapeSelector:这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，这个方法基本上与CSS中CSS.escape()方法类似，唯一的区别是jquery中的这个方法支持所有浏览器。 <div class="notMe">div class="notMe"</div> <div class=".box myClass">div class=".box myClass"</div> <div class=".box">span class=".box"</div> </p> <script type="text/javascript"s src="./jquery-3.1.0.min.js"></script> <script type="text/javascript"> $(function(){ console.log( $(‘#myDiv‘) ); console.log( $(‘#foo\\[bar\\]‘) ); console.log( $(‘div‘) ); console.log( $(‘.myClass‘) ); console.log( $(‘*‘) ); console.log( $(‘div,span,p.myClass‘) ); console.log( $(‘form input‘) ); console.log( $(‘form > input‘) ); console.log( $(‘label + input‘) ); console.log( $(‘form ~ input‘) ); console.log( $(‘li:first‘) ); console.log( $(‘input:not(:checked)‘) ); console.log( $(‘tr td:even‘) ); console.log( $(‘tr td:odd‘) ); console.log( $(‘tr td:eq(1)‘) ); console.log( $(‘tr td:gt(0)‘) ); console.log( $(‘p:lang(it)‘) ); console.log( $(‘li:last‘) ); console.log( $(‘tr:lt(2)‘) ); $(‘:header‘).css({background:‘#eee‘}); $(‘#run‘).click(function(){ $(‘div:not(:animated)‘).animate({left:"+=20"},1000); }); $(‘#content‘).delegate("*","focus blur",function(event){ var elem = $(this); setTimeout(function(){ elem.toggleClass(‘focused‘,elem.is(‘:focus‘)); },0); }) $(‘:root‘).css({background:‘yellow‘}); console.log( $("div:contains(‘John‘)") ); console.log( $(‘td:empty‘) ); $(‘div:has(p)‘).addClass(‘test‘); console.log( $(‘td:parent‘) ); console.log( $(‘tr:hidden‘) ); console.log( $(‘tr:visible‘) ); console.log( $(‘div[id]‘) ); $(‘input[name="newsletter"]‘).attr(‘checked‘,true); $(‘input[name!="newsletter"]‘).attr(‘checked‘,true); console.log( $(‘input[name^="news"]‘) ); console.log( $(‘input[name$="letter"]‘) ); console.log( $(‘input[name*="letter"]‘) ); console.log( $(‘input[id][name$="man"]‘) ); console.log( $(‘ul li:first-child‘) ); console.log( $(‘span:first-of-type‘) ); console.log( $(‘ul li:last‘) ); console.log( $(‘ul li:nth-child(2)‘) ); console.log( $(‘ul li:nth-last-child(2)‘) ); console.log( $(‘ul li:only-child‘) ); console.log( $(‘:input‘) ); console.log( $(‘:text‘) ); console.log( $(‘:password‘) ); console.log( $(‘:radio‘) ); console.log( $(‘:checkbox‘) ); console.log( $(‘:submit‘) ); console.log( $(‘:image‘) ); console.log( $(‘:reset‘) ); console.log( $(‘:button‘) ); console.log( $(‘:file‘) ); console.log( $(‘:reset‘) ); console.log( $(‘input:enabled‘) ); console.log( $(‘input:disabled‘) ); console.log( $(‘input:checked‘) ); console.log( $(‘select option:selected‘) ); console.log( $(‘div‘).find(‘.‘ + $.escapeSelector(".box") ) ); }) </script></body></html>
JQ选择器...
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。