jQuery獲取元素的方法總結

一、說明

　 獲取元素的方法分為兩種：jQuery選擇器、jQuery遍歷函數。

做個總結，鞏固下知識。

二、獲取本身

1、只需要一種jQuery選擇器

選擇器 實例 說明 #Id $('#myId') ID選擇器： 可以獲取到ID為“myId”的元素，區分大小寫

2、多種jQuery選擇器組合

分為兩部分：前半部分獲取到的是一個元素集合，後半部分可以精確為一個元素，兩者相結合，可以獲取到想要的元素。

1）前半部分選擇器

選擇器 實例 說明 .class $('.myClass') 類選擇器：可以獲取到class為‘myClass’的所有元素 element $('p') 獲取所有的<p>元素 :header $(':header') 獲取所有的標題元素：<h1> ~ <h6> :animated $(':animated') 獲取所有的動畫元素 :contains(text) $('p:contains(Hello)') 獲取所有包含文本為Hello的<p>元素，中間的文本區分大小寫 :hidden $(':hidden') 獲取所有的隱藏元素：width和height為0、display:none、type=hidden、 [attribute] $('[href]') 屬性選擇器：獲取所有含有屬性為href的元素 [attribute=value] $('[href=a.html]')

= 獲取所有帶有屬性href，並且值為a.html的元素

!= 獲取所有帶有屬性href，並且值不等於為a.html的元素

$= 獲取所有帶有屬性href，並且值以a.html結尾的元素

^= 獲取所有帶有屬性href，並且值以a.html開頭的元素

~= 獲取所有帶有屬性href，並且值包含單詞”a.html“的元素

*= 獲取所有帶有屬性href，並且值包含文本”a.html“的元素

:input $(':input') 獲取所有input元素 :radio $(':radio')

所有帶有 type="radio" 的 input 元素

相似的有：

:text、:chexbox、:password、:submit、:reset、:button、:file

:enabled $(':enabled') 所有啟用的input元素。 :disabled 則相反 :checked $(':checked') 所有選中的input選擇（單選框、復選框） :gt(index) $('p:gt(2)') index從0開始，獲取index大於（不包含）2的所有<p>元素 :lt(index) $('p:lt(2)') index從0開始，獲取index小於（不包含）2的所有<p>元素 :even $('tr:even') 所有偶數<tr>元素 :odd $('tr:odd') 所有奇數<tr>元素

2）後半部分選擇器：可以精確到某一個元素

選擇器 實例 說明 :first $('p:first') 第一個<p>元素 :last $('p:last') 最後一個<p>元素 :eq(index) $("p:eq(1)") 第二個<p>元素，index從0開始

3、jQuery選擇器+遍歷函數

也是分為兩部分：前半部分用選擇器獲取到一個元素集合，後半部分用遍歷函數精確為某個元素

1）前半部分同上

2）後半部分：遍歷函數

方法 描述 eq() 返回帶有被選元素的指定索引號的元素 first() 返回被選元素的第一個元素 last() 返回被選元素的最後一個元素

三、獲取同級元素

顧名思義：獲取選中元素的同級元素。首先需要定位到該元素（上面已有總結，不再重復），然後獲取它的同級元素。

1）選擇器

選擇器 實例 說明 element + next $('div + p') 每個div相鄰的下一個<p>元素 element ~ siblings $('div ~ p') 獲取跟div同級的所有的<p>元素

2）遍歷函數

方法 描述 next() 返回被選元素的後一個同級元素 nextAll() 返回被選元素之後的所有同級元素 prev() 返回被選元素的前一個同級元素 prevAll() 返回被選元素之前的所有同級元素

四、獲取父級元素

獲取選中元素的父級元素

1）選擇器

選擇器 實例 說明 :parent $('p:parent') 獲取所有p元素的父級元素

2）遍歷函數

方法 描述 parent() 獲取被選元素的父級元素 parents() 獲取被選元素的所有祖先元素

五、獲取子級元素

獲取選中元素的子級元素

1）選擇器

選擇器 實例 說明 parent > child $('div > p') 獲取div直接子元素的所有<p>元素 parent descendant $('div p') 獲取div所有後代的<p>元素

2）遍歷函數

方法 描述 children() 返回被選元素的所有直接子元素 contents() 返回被選元素的所有直接子元素(包含文本和注釋節點) find() 返回被選元素的後代元素

jQuery 3.0.0 發布下載，優秀的Javascrīpt框架 http://www.linuxidc.com/Linux/2016-06/132184.htm

jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm

jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm

《jQuery即學即用（雙色）》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm

鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm

jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm

jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm

jQuery 的詳細介紹：請點這裡
jQuery 的下載地址：請點這裡