一、說明
獲取元素的方法分為兩種:jQuery選擇器、jQuery遍歷函數。
做個總結,鞏固下知識。
二、獲取本身
1、只需要一種jQuery選擇器
2、多種jQuery選擇器組合
分為兩部分:前半部分獲取到的是一個元素集合,後半部分可以精確為一個元素,兩者相結合,可以獲取到想要的元素。
1)前半部分選擇器
= 獲取所有帶有屬性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 的下載地址:請點這裡