#id选择器： 查找 ID 为"myDiv"的元素。 HTML 代码: <div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div> jQuery 代码: $("#myDiv"); 结果： [ <div id="myDiv">id="myDiv"</div> ] ===================================================== element: 通过标签匹配所有元素 HTML 代码: <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> jQuery 代码: $("div"); 结果: [ <div>DIV1</div>, <div>DIV2</div> ] ===================================================== .class 根据给定的css类名匹配元素。 HTML 代码: <div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> jQuery 代码: $(".myClass"); 结果: ===================================================== * 匹配所有元素 HTML 代码: <div>DIV</div> <span>SPAN</span> <p>P</p> jQuery 代码: $("*") 结果: [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ] ===================================================== selector1,selector2,selectorN 指定多个选择器把匹配的元素一起返回。 HTML 代码: <div>div</div> <p class="myClass">p class="myClass"</p> <span>span</span> <p class="notMyClass">p class="notMyClass"</p> jQuery 代码: $("div,span,p.myClass") 结果: [<div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span>] ===================================================== ancestor descendant:在给定的祖先元素下匹配所有的后代元素 form表单中匹配所有input元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form input") 结果: [ <input name="name" />, <input name="newsletter" /> ] ===================================================== parent>child: form表单中匹配第一个input元素 jQuery 代码: $("form > input") 结果: [ <input name="name" /> ] ===================================================== prev+next: 匹配所有label元素相邻的input元素 jQuery 代码: $("label + input") 结果: [ <input name="name" />, <input name="newsletter" /> ] ===================================================== prev ~ siblings：匹配form同辈的第一个元素 jQuery 代码: $("form ~ input") 结果: [ <input name="none" /> ] ===================================================== :first 获取第一个元素 查找所有的li然后匹配第一个 HTML 代码: <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> jQuery 代码: $('li:first'); 结果: [ <li>list item 1</li> ] ===================================================== :not(selector) 查找所有未选中的 input 元素 HTML 代码: <input name="apple" /> <input name="flower" checked="checked" /> jQuery 代码: $("input:not(:checked)") 结果: [ <input name="apple" /> ] ===================================================== :even 查找表格的1、3、5...行（即索引值0、2、4...） HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:even") 结果: [ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ] ===================================================== :odd 查找表格的2、4、6行（即索引值1、3、5...） jQuery 代码: $("tr:odd") 结果: [ <tr><td>Value 1</td></tr> ] ===================================================== :eq(index) 查找指定索引的元素 查找第二行 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:eq(1)") 结果: [ <tr><td>Value 1</td></tr> ] ===================================================== :gt(index) 匹配所有大于给定索引值的元素 HTML 代码: <table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代码: $("tr:gt(0)") 结果: [ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ] ===================================================== :lt(index) 匹配所有小于给定索引值的元素 jQuery 代码: $("tr:lt(2)") 结果: [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ] ===================================================== attr(name|pro|key,val|fn): 获取属性 设置属性 HTML代码： <img src="icon.png" alt="test-img"> <p edit="true" style="color:red;">test11</p> jQuery 代码: $("img").attr("src") 结果: "icon.png" jQuery 代码: $("p").attr({edit:'false',style='color:green'}) 结果: [<p edit="false" style="color:green">test11</p>] ===================================================== removeAttr(name):移除属性 jQuery 代码: $("p").removeAttr("edit") 结果: [<p style="color:green">test11</p>] ===================================================== prop(n|p|k,v|f) 选中复选框为true，没选中为false 禁用和选中所有页面上的复选框。 $("input[type='checkbox']").prop("disabled", false); //取消 $("input[type='checkbox']").prop("checked", true); //全选 ===================================================== addClass(class|fn) 为每个匹配的元素添加指定的类名。 jQuery 代码: $("input").addClass("test") 结果: [<input type="checkbox" class="test">, <input type="checkbox" class="test">, <input type="checkbox" class="test">] ===================================================== removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。 jQuery 代码: $("input").removeAttr("test") 结果: [<input type="checkbox">, <input type="checkbox">, <input type="checkbox">] ===================================================== toggleClass(class|fn[,sw]) 如果存在就删除一个类，如果不存在就添加 jQuery 代码: $("input").toggleClass("xym") 结果: [<input type="checkbox" class="xym">, <input type="checkbox" class="xym">, <input type="checkbox" class="xym">] jQuery 代码: $("input").toggleClass("xym") 结果: [<input type="checkbox" class>, <input type="checkbox" class>, <input type="checkbox" class>] ===================================================== html([val|fn]) 取得第一个匹配元素的html内容 HTML代码： <div> <div> <h3>33333</h3> </div> </div> <div>22</div> jQuery 代码: $("div").html() jQuery 代码: " <div> <h3>33333</h3> </div> " ===================================================== text([val|fn]) 取得所有匹配元素的内容。 jQuery 代码: $("div h3").text() 结果: "33333" ===================================================== val([val|fn|arr]) 获取input,select,textarea文本框中输入的值 jQuery 代码: $("input").val() 结果: "xym" ===================================================== css(name|pro|[,val|fn]) 设置或访问匹配元素的样式属性。 HTML代码： <div style="border: 2px solid black;width: 200px;height: 200px;"> <h3>哈哈</h3> </div> jQuery 代码: $("div").css("color") 结果: "rgb(0, 0, 0)" jQuery 代码: $("div").css({background:'red'}) ===================================================== offset([coordinates]) 获取left,top的偏移值 HTML 代码: <p>Hello</p> <p>2nd Paragraph</p> jQuery 代码: var p = $("p:first"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top ); 结果: [<p>left: 8, top: 16</p>] HTML 代码: <p>Hello</p> <p>2nd Paragraph</p> jQuery 代码: $("p:last").offset({ top: 50, left: 0 }); 结果: [<p style="position: relative; top: -28px; left: -8px;">2nd Paragraph</p>] ===================================================== position() 获取匹配元素相对父元素的偏移。 HTML 代码: <p>Hello</p> <p>2nd Paragraph</p> jQuery 代码: var p = $("p:first"); var position = p.position(); $("p:last").html( "left: " + position.left + ", top: " + position.top ); 结果: <p>Hello</p><p>left: 15, top: 15</p> ===================================================== height:设置高度 width:设置宽度 HTML 代码: <div style="height: 200px;width: 200px;border: 1px solid red;"> <h3>55</h3> </div> jQuery 代码: $("div").height("400") 结果: [<div style="height: 400px; width: 200px; border: 1px solid red;">…</div>] jQuery 代码: $("div").width("400") 结果: [<div style="height: 400px; width: 200px; border: 1px solid red;">…</div>] ===================================================== innerHeight() 元素的内高度 HTML 代码: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: var p = $("p:first"); $("p:last").text( "innerHeight:" + p.innerHeight() ); 结果: <p>Hello</p><p>innerHeight: 16</p> ===================================================== innerWidth() 元素的内宽度 jQuery 代码: var p = $("p:first"); $("p:last").text( "innerWidth:" + p.innerWidth() ); 结果: <p>Hello</p><p>innerWidth: 40</p> ===================================================== outerHeight([soptions]) 元素的外高度 jQuery 代码: var p = $("p:first"); $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) ); 结果: <p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p> ===================================================== outerWidth([options]) 元素的外宽度 HTML 代码: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: var p = $("p:first"); $("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) ); 结果: <p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p> ===================================================== eq(index|-index) 根据索引获取元素 HTML 代码: <p> This is just a test.</p> <p> So is this</p> jQuery 代码: $("p").eq(1) ===================================================== first() 获取第一个元素 HTML 代码: <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> jQuery 代码: $("li").first() ===================================================== last() 获取最后一个元素 jQuery 代码: $("li").last() ===================================================== hasClass(class) 如果匹配到类名返回true否则返回false HTML 代码: <div class="test"></div><div></div> jQuery 代码: $("div").hasClass("tests") ===================================================== HTML 代码: filter(expr|obj|ele|fn) 查找匹配元素的集合 <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p> jQuery 代码: $("p").filter(".selected") 结果: [ <p class="selected">And Again</p> ] jQuery 代码: $("p").filter(".selected,:first") //保留前一个元素 结果: [<p>Hello</p>, <p class="selected">And Again</p>] ===================================================== children([expr]) 查找匹配之后的所有子元素 HTML 代码: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> jQuery 代码: $("div").children() 结果: [ <span>Hello Again</span> ] ===================================================== find(e|o|e) 搜索所有与指定表达式匹配的元素 HTML 代码: <p><span>Hello</span>, how are you?</p> jQuery 代码: $("p").find("span") 结果: [ <span>Hello</span> ] ===================================================== next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 HTML 代码: <p>Hello</p><p>Hello Again</p><div><span>And Again</span></div> jQuery 代码: $("p").next() 结果: [ <p>Hello Again</p>, <div><span>And Again</span></div> ] HTML 代码: <p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div> jQuery 代码: $("p").next(".selected") //找到每个段落的后面紧邻的同辈元素中类名为selected的元素。 结果: [ <p class="selected">Hello Again</p> ] ===================================================== nextAll([expr]) HTML 代码: <div></div><div></div><div></div><div></div> jQuery 代码: $("div:first").nextAll().addClass("after"); 结果: [ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ] ===================================================== parent([expr]) 查找父元素 HTML 代码: <div><p>Hello</p><p>Hello</p></div> jQuery 代码: $("p").parent() 结果: [ <div><p>Hello</p><p>Hello</p></div>] ===================================================== parents([expr]) 找到祖先元素,不包含根 HTML 代码: <div><p>Hello</p><p>Hello</p><span><h3>3333</h3></span></div> jQuery 代码: $("span").parents("div") //找到每个span的所有是div元素的祖先元素。 <div><p>Hello</p><p>Hello</p><span><h3>3333</h3></span></div> ===================================================== prev([expr]) 同辈元素的前一个元素 HTML 代码: <div> <span>Hello Again</span> </div> <p>And Again</p> jQuery 代码: $("p").prev() 结果: [<div>…</div>] ===================================================== prevall([expr]) 查找当前元素之前所有的同辈元素 HTML 代码: <div> <span>Hello Again</span> </div> <h3>11</h3> <h3>11</h3> <p>And Again</p> jQuery 代码: $("p").prevAll("") 结果: [<h3>11</h3>, <h3>11</h3>, <h3>11</h3>, <h3>11</h3>, <div>…</div>] ===================================================== siblings([expr]) 查找同辈的所有元素 HTML 代码: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> jQuery 代码: $("div").siblings() 结果: [ <p>Hello</p>, <p>And Again</p> ]
