每天学习点jquery

一、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> ]