jquery的基本功能
- 訪問和操作DOM元素
- 對頁面事件處理
- 可以使用插件
- 與ajax技術結合
- 提高開發效率
$(document).ready(function(){}); 可以簡寫成 $();
表示頁面框架下載完畢後執行
選擇器-基本選擇器
| 選擇器 |
返回值 |
| #id |
返回單個元素 |
| .class |
返回所有的class元素 |
| element |
根據給定的標籤返回所有元素 |
| * |
返回所有元素，包括html和body |
| selector1,selector2,···,selectorN |
返回所有滿足條件的元素（這裏是並集） |
例如
$("#div").click(
$(this).css("color","red");
);
選擇器-過濾選擇器
過濾選擇器附加在所有選擇器的後面，並且以:開頭，如：$("li:first")表示所有li標籤的第一個
選擇器-過濾選擇器-基本過濾選擇器
| 選擇器 |
示例 |
解釋 |
| :first()或:first |
$(“li:first”).text(123); |
向第一個li中修改文本 |
| :last()或:last |
$(“li:last”).text(123); |
向最後一個li中修改文本 |
| :not(selector) |
$(“li:not(.title)”); |
獲得class不是title的li元素 |
| :even/:odd |
$(“li:even”); |
獲取所有下標爲偶數的li |
| :eq(index) |
$(“li:eq(2)”); |
獲取下標爲2的li元素 |
| :gt(index)/:lt(index) |
$(“li:gt(2)”); |
獲取所有下標大於2的li元素 |
| :header |
$(":header"); |
獲取所有h1~h6的元素 |
| :animated |
$(":animated"); |
獲取正在執行動畫的元素 |
選擇器-過濾選擇器-內容過濾選擇器
| 選擇器 |
示例 |
解釋 |
| :contains(text) |
$(“li:contains(abc)”).text(123); |
把li中包含abc的文本替換成123 |
| :empty |
$(“li:empty”).text(123); |
把空li的文本換成123 |
| :has(selector) |
|
獲取含有selector的元素集合 |
| :parent |
|
獲得含有後代元素或者文本的非空元素 |
選擇器-過濾選擇器-可見性過濾選擇器
| 選擇器 |
示例 |
解釋 |
| :hidden/:visible |
|
選擇可見或者不可見元素 |
不可見元素包括：css樣式中display屬性爲none的元素、type屬性爲hidden的<input>元素以及寬高爲0的元素。
選擇器-過濾選擇器-屬性過濾選擇器
| 選擇器 |
示例和解釋 |
| [attribute] |
獲取擁有該屬性的所有元素，如 $(‘li[title]’) 表示獲取所有包含title 屬性的 <li> 元素 |
| [attribute=value] |
獲取某屬性值爲 value 的所有元素，如 $(‘li[title=test2]’) 表示獲取所有包含 title 屬性且屬性值等於 test2 的 <li> 元素 |
| [attribute!=value] |
獲取某屬性值不等於 value 的所有元素，如 $(‘li[title!=test2]’) 表示獲取所有包含 title 屬性且屬性值不等於 test2 的 <li> 元素 |
| [attribute^=value] |
選取屬性值以 value 開頭的所有元素，如 $(‘a[href^=“mailto:”]’) 表示獲取所有包含 href 屬性，且屬性值以 mailto: 開頭的 <a> 元素 |
| [attribute$=value] |
選取屬性值以 value 結束的所有元素，如 (′a[href=".zip"]’) 表示獲取所有包含 href 屬性，且屬性值以 .zip 結尾的 <a> 元素 |
| [attribute*=value] |
選 取 屬 性 值 中 包 含 value 的 所 有 元 素， 如 $(‘a[href*=“jquery.com”]’) 表示獲取所有包含 href 屬性且屬性值中包含 jquery.com的 <a> 元素 |
| [selector1][selector2]…[selectorN] |
合併多個選擇器，滿足多個條件，每選擇一次將縮小一次範圍，如 $(‘li[id][title^=test]’) 選取所有擁有屬性 id 且屬性 title 以 test開頭的 <li> 元素 |
選擇器-過濾選擇器-層次過濾選擇器
| 名稱 |
語法 |
功能 |
返回值 |
| 後代選擇器 |
selector1 selector2 |
從 selector1 的後代元素裏選取 selector2 |
元素集合，如 $(“#nav span”) 表示選取 #nav下所有的<span>元素 |
| 子選擇器 |
selector1>selector2 |
從 selector1 的子元素裏選取 selector2 |
元素集合，如("#nav>span")表示選取 #nav 的子元素<span> |
| 相鄰元素選擇器 |
selector1+selector2 |
從 selector1 後面的第一個兄弟元素裏選取 selector2 |
元素集合，如 $(“h2+dl”) 表示選取緊鄰<h2>元素之後的同輩元素 <dl> |
| 同輩元素選擇器 |
selector1~selector2 |
從 selector1 後面的所有兄弟元素裏選取 selector2 |
元 素 集 合， 如 $(“h2~dl”) 表 示 選 取<h2> 元素之後所有的同輩元素<dl> |
- selector1 selector2 與 selector1>selector2 所選擇的元素集合是不同的，前者的層次關係是祖先與後代，而後者是父子關係
- selector1+selector2 可以使用 jQuery 對象的 next() 方法代替
- selector1~selector2 從 selector1 後面的所有兄弟元素裏選取 selector2，不能獲取前面部分，可以使用nextAll() 方法代替。而 siblings() 方法獲取全部的相鄰元素，不分前後
- selector1 selector2與 selector1:has(selector2) 雖然這兩個選擇器都要求 selector2 是 selector1 的後代元素，但是前者最終選取的是後代元素，後者最終選取的是擁有這些後代元素的元素
選擇器-過濾選擇器-表單過濾選擇器
| 名稱 |
功能 |
返回值 |
| :input |
獲取 元素 |
元素集合 |
| :text |
獲取符合 [type=text] 的 元素 |
元素集合 |
| :password |
獲取符合 [type=password] 的 元素 |
元素集合 |
| :radio |
獲取符合 [type=radio] 的 元素 |
元素集合 |
| :checkbox |
獲取符合 [type=checkbox] 的 元素 |
元素集合 |
| :image |
獲取符合 [type=image] 的 元素 |
元素集合 |
| :file |
獲取符合 [type=file] 的 元素 |
元素集合 |
| :hidden |
參考“可見性過濾選擇器” |
元素集合 |
| :button |
獲取 元素和符合 [type=button] 的 元素 |
元素集合 |
| :submit |
獲取符合 [type=submit] 的 元素 |
元素集合 |
| :reset |
獲取符合 [type=reset] 的 元素 |
元素集合 |
表單對象屬性過濾選擇器
| 選擇器 |
功能 |
| :enabled |
選取可用的表單元素 |
| :disabled |
選取不可用的表單元素 |
| :checked |
選取被選中的 元素 |
| :selected |
選取被選中的 元素 |
