首页 > 代码库 > jq选择器
jq选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择器</title> <script src="http://www.mamicode.com/js/jquery-3.1.0.min.js"></script></head><body> <!--1 #id 根据给定的ID匹配一个元素。 --> <div id="notMe">d="notMe"</div> <div id="myDiv">id="myDiv"</div> <script> $("#myDiv"); </script> <!--2 element 据给定的元素名匹配所有元素 --> <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> <script> $("div"); </script> <!--3 .class 一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。 --> <div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> <script> $(".myClass"); </script> <!--4 * 匹配所有元素 --> <div>DIV</div> <span>SPAN</span> <p>P</p> <script> $(‘*‘) </script> <!-- 5 selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。 --> <div>div</div> <p class="myClass">p class="myClass"</p> <span>span</span> <p class="notMyClass">p class="notMyClass"</p> <script> $("div,span,p.myClass") </script> <!--6 ancestor descendant 在给定的祖先元素下匹配所有的后代元素 --> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> <script> $("form input") </script> <!-- 7 parent > child 在给定的父元素下匹配所有的子元素 --> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> <script> $("form > input") </script> <!--8 prev + next 匹配所有紧接在 prev 元素后的 next 元素 --> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> <script> $("label + input") </script> <!-- 9 prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素 --> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> <script> $("form ~ input") </script> <!-- 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> <script> $(‘li:first‘); </script> <!-- 11 :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> <script> $(‘li:last‘) </script> <!-- 12 :not(selector) 去除所有与给定选择器匹配的元素 --> <input name="apple" /> <input name="flower" checked="checked" /> <script> $("input:not(:checked)") </script> <!-- 13 :even 匹配所有索引值为偶数的元素，从 0 开始计数 --> <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> <script> $("tr:even") </script> <!-- 14 :odd 匹配所有索引值为奇数的元素，从 0 开始计数 --> <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> <script> $("tr:odd") </script> <!-- 15 :eq(index) 匹配一个给定索引值的元素 --> <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> <script> $("tr:eq(1)") </script> <!-- 16 :gt(index) 匹配所有大于给定索引值的元素 --> <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> <script> $("tr:gt(0)") </script> <!-- 17 :lt(index) 匹配所有小于给定索引值的元素 --> <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> <script> $("tr:lt(2)") </script> <!-- 18 :lang(language) 选择指定语言的所有元素。--> <!--:lang选择器匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr"> --> <!-- 选择所有<P> 的语言属性: --> $("p:lang(it)") <!-- 19 :header 匹配如 h1, h2, h3之类的标题元素 --> <h1>Header 1</h1> <p>Contents 1</p> <h2>Header 2</h2> <p>Contents 2</p> <script> $(":header").css("background", "#EEE"); </script> <!-- 20 :animated 匹配所有正在执行动画效果的元素 --> <button id="run">Run</button><div></div> <script> $("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000); }); </script> <!-- 21 :focus 匹配当前获取焦点的元素。--> <!-- 如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;否则，通用选择("*")是不言而喻的。换句话说，$(‘:focus‘)等同为$(‘*:focus‘)。如果你正在寻找当前的焦点元素，$( document.activeElement )将检索，而不必搜索整个DOM树。 --> <style> .focused { background: #abcdef; } </style> <div id="content"> <input tabIndex="1"> <input tabIndex="2"> <select tabIndex="3"> <option>select menu</option> </select> <div tabIndex="4">a div </div> </div> <script> $( "#content" ).delegate( "*", "focus blur", function( event ) { var elem = $( this ); setTimeout(function() { elem.toggleClass( "focused", elem.is( ":focus" ) ); }, 0); }); </script> <!-- 22 :root 选择该文档的根元素 --> <script> $(":root").css("background-color","yellow"); </script> <!-- 23 :target 选择由文档URI的格式化识别码表示的目标元素。 --> <script> $("p, button, h1, h2").click(function(event){ $("div").html("Triggered by a " + event.target.nodeName + " element."); }); </script> <!-- 24 :contains(text) 匹配包含给定文本的元素 --> <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <script> $("div:contains(‘John‘)") </script> <!-- 24 :empty 匹配所有不包含子元素或者文本的空元素 --> <table> <tr> <td>Value 1</td> <td></td> </tr> <tr> <td>Value 2</td> <td></td> </tr> </table> <script> $("td:empty") </script> <!-- 25 :has(selector) 匹配含有选择器所匹配的元素的元素 --> <div><p>Hello</p></div> <div>Hello again!</div> <script> $("div:has(p)").addClass("test"); </script> <!-- 26 :parent 匹配含有子元素或者文本的元素 --> <table> <tr> <td>Value 1</td> <td></td> </tr> <tr> <td>Value 2</td> <td></td> </tr> </table> <script> $("td:parent") </script> <!-- 27 :hidden 匹配所有不可见元素，或者type为hidden的元素--> <table> <tr style="display:none"> <td>Value 1</td> </tr> <tr> <td>Value 2</td> </tr> </table> <script> $("tr:hidden") </script> <!-- 28 :visible 匹配所有不可见元素 --> <table> <tr style="display:none"> <td>Value 1</td> </tr> <tr> <td>Value 2</td> </tr> </table> <script> $("tr:visible") </script> <!-- 29 [attribute] 匹配包含给定属性的元素。 注意， 在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。 --> <div> <p>Hello!</p> </div> <div id="test2"></div> <script> $("div[id]") </script> <!-- 30 [attribute=value] 匹配给定的属性是某个特定值的元素 --> <input type="checkbox" name="newsletter" value="http://www.mamicode.com/Hot Fuzz" /> <input type="checkbox" name="newsletter" value="http://www.mamicode.com/Cold Fusion" /> <input type="checkbox" name="accept" value="http://www.mamicode.com/Evil Plans" /> <script> $("input[name=‘newsletter‘]").attr("checked", true); </script> <!-- 31 [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。 --> <input type="checkbox" name="newsletter" value="http://www.mamicode.com/Hot Fuzz" /> <input type="checkbox" name="newsletter" value="http://www.mamicode.com/Cold Fusion" /> <input type="checkbox" name="accept" value="http://www.mamicode.com/Evil Plans" /> <script> $("input[name!=‘newsletter‘]").attr("checked", true); </script> <!-- 32 [attribute^=value] 匹配给定的属性是以某些值开始的元素 --> <input name="newsletter" /> <input name="milkman" /> <input name="newsboy" /> <script> $("input[name^=‘news‘]") </script> <!-- 33 [attribute$=value] 匹配给定的属性是以某些值结尾的元素 --> <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> <script> $("input[name$=‘letter‘]") </script> <!-- 34 [selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用 --> <input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /> <script> $("input[id][name$=‘man‘]") </script> <!-- 35 :first-child 匹配第一个子元素 --> <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> <script> $("ul li:first-child") </script> <!-- 36 :first-of-type 选择所有相同的元素名称的第一个兄弟元素。 --> <div> <span>1</span> <span>2</span> <span>3</span> </div> <script> $("div:first-of-type") </script> <!-- 37 :last-child 匹配最后一个子元素 --> <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> <script> $("ul li:last-child") </script> <!-- 38 :last-of-type 选择的所有元素之间具有相同元素名称的最后一个兄弟元素。 --> <p> <span>1</span> <span>2</span> <span>3</span> </p> <script> $("p:last-of-type") </script> <!-- 39 :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> <script> $("ul li:nth-child(2)") </script> <!-- 40 :nth-last-child(n|even|odd|formula)选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。 --> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> $("ul li:nth-last-child(2)"); </script> <!-- 41 :nth-last-of-type(n|even|odd|formula) 选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。 --> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> $("ul li:nth-last-of-type(2)"); </script> <!-- 42 :nth-of-type(n|even|odd|formula) 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。 --> <div> <span>John</span> <b>Kim</b> <span>Adam</span> <b>Rafael</b> <span>Oleg</span> </div><div> <b>Dave</b> <span>Ann</span> </div> <div> <i><span>Maurice</span></i> <span>Richard</span> <span>Ralph</span> <span>Jason</span> </div> <script> $("span:nth-of-type(2)"); </script> <!-- 43 :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配 --> <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> </ul> <script> $("ul li:only-child") </script> <!-- 44 :only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素。 --> <div> <button>Sibling!</button> <button>Sibling!</button> </div> <div> <button>Sibling!</button> </div><div> None</div> <div> <button>Sibling!</button> <span>Sibling!</span> <span>Sibling!</span> </div> <div> <button>Sibling!</button> </div> <script> $("button:only-of-type").text("Alone").css("border", "2px blue solid"); </script> <!-- 45 :input 匹配所有 input, textarea, select 和 button 元素 --> <form> <input type="button" value="http://www.mamicode.com/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> <script> $(":input") </script> <!-- 46 :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> <script> $(":text") </script> <!-- 47 :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> <script> $(":password") </script> <!-- 48 :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> <script> $(":radio") </script> <!-- 50 :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> <script> $(":checkbox") </script> <!-- 51 :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> <script> $(":submit") </script> <!-- 52 :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> <script> $(":image") </script> <!-- 53 :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> <script> $(":reset") </script> <!-- 54 :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> <script> $(":button") </script> <!-- 55 :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> <script> $(":file") </script> <!-- 556 :hidden 匹配所有不可见元素，或者type为hidden的元素 --> <form> <input type="text" name="email" /> <input type="hidden" name="id" /> </form> <script> $("input:hidden") </script> <!-- 57 :enabled 匹配所有可用元素 --> <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> <script> $("input:enabled") </script> <!-- 58 :disabled 匹配所有不可用元素 --> <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> <script> $("input:disabled") </script> <!-- 60 :checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) --> <form> <input type="checkbox" name="newsletter" checked="checked" value="http://www.mamicode.com/Daily" /> <input type="checkbox" name="newsletter" value="http://www.mamicode.com/Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="http://www.mamicode.com/Monthly" /> </form> <script> $("input:checked") </script> <!-- 61 :selected 匹配所有选中的option元素 --> <select> <option value="http://www.mamicode.com/1">Flowers</option> <option value="http://www.mamicode.com/2" selected="selected">Gardens</option> <option value="http://www.mamicode.com/3">Trees</option> </select> <script> $("select option:selected") </script><!-- ps: 以上是基于手册的信息 不难发现有很多选择器的用法是一样的 --></body></html>
jq选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。