一、jquery选择器
1、根据给定的ID匹配一个元素(如果选择器中包含特殊字符,可以用两个斜杠转义)id选择器
举例:html代码 <div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jquery代码 $("#myDiv");
结果 [ <div id="myDiv">id="myDiv"</div> ]
查找含有特殊字符的元素
html代码 <span id="foo:bar"></>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>
jquery代码 #foo\\:bar
#foo\\[bar\\]
#foo\\.bar
2、根据给定的元素名匹配所有的元素(element选择器)
举例:HTML代码 <div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jquery代码 $("div");
结果:[ <div>DIV1</div>, <div>DIV2</div> ]
3、根据给定的类匹配元素(.class选择器)
举例:HTML代码 <div calss="noteMe">div class="noteMe"</div>
<div class="myClass">div class="myCLass"</div>
<span class="myClss">span class="myClass"</span>
jquery代码:$(".myClass");
结果:[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
4、匹配所有元素(*选择器)
举例:Html代码:<div>DIV</div>
<span>SPAN</span>
<p>P</P>
jquery代码:$("*")
5、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> ]
6、在给定的所有祖先元素匹配所有的后代元素
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" /> ]
7、在给定的所有父元素下匹配所有的子元素
举例: 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" /> ]
8、匹配所有紧跟在prev元素后的next元素
举例: HTML代码:<form>
<label>Name:</label>
<input name="name" />
<fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form>
<input name="none" />
jquery代码:$("label + input")
结果:[ <input name="name" />, <input name="newsletter" /> ]
9、匹配 prev 元素之后的所有 siblings 元素
举例:HTML代码:找到所有与表单同辈的 input 元素
<form> <label>Name:</label>
<input name="name" />
<fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form>
<input name="none" />
jquery代码:$("form ~ input");
结果: <input name="none" />
9、: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');
结果:<li>list item 1</li>
10、:last()获取最后的元素
举例: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:last')
结果:[ <li>list item 1</li> ]
11、:not(selector) 去除所有与给定选择器匹配的元素
用于筛选的选择器
举例:HTML代码:<input name="apple" />
<input name="flower" checked="checked" />
jquery代码:$("input:not(:checked)")
结果:[ <input name="apple" /> ]
12、:event匹配所有索引值为偶数的元素,从 0 开始计数
举例:HTML代码:<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jquery代码:$("tr:event")
结果:[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
13、odd 匹配所有索引值为奇数的元素,从 0 开始计数
举例:HTML代码:<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jquery代码:$("tr:odd")
结果:[ <tr><td>Value 1</td></tr> ]
14、:eq(index)匹配一个给定索引值的元素 从 0 开始计数
举例: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> ]
15、:gt(index) 匹配所有大于给定索引值的元素 从 0 开始计数
举例: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> ]
16、:lt(index) 匹配所有小于给定索引值的元素 从 0 开始计数
举例:HTML代码:<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jquery代码:$("tr:lt(2)")
结果:[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
17、:header匹配如 h1, h2, h3之类的标题元素
举例:HTML代码:<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
jquery代码:$(":header").css("background","#EEE")
结果:[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]
18、:animated匹配所有正在执行动画效果的元素
举例:HTML代码:<button id="run">Run</button><div></div>
只有对不在执行动画效果的元素执行一个动画特效
jquery代码:$("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000); });
19、:focus触发每一个匹配元素的focus事件
举例:HTML代码:当页面加载后将 id 为 'login' 的元素设置焦点:
jquery代码:$("#id:focus")
20、:contains匹配包含给定文本的元素
举例:HTML代码:<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
jquery代码:$("'div:constains('Join'))
结果:[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]