Jquery擷取元素方法

標籤：logs   children   區分大小寫   index   padding   radio   jquer   order   單選   

 

Jquery 擷取元素的方法分為兩種：jQuery選取器、jQuery遍曆函數。

1、擷取本身：

　a.只需要一種jQuery選取器

選取器	執行個體	說明
#Id	$(‘#myId‘)	ID選取器： 可以擷取到ID為“myId”的元素，區分大小寫

　

 

　b.多種jQuery選取器組合

　　b1.jQuery選取器

選取器	執行個體	說明
.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>元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 　　

　　b2.jQuery選取器jQuery遍曆函數混合

選取器	執行個體	說明
:first	$(‘p:first‘)	第一個<p>元素
:last	$(‘p:last‘)	最後一個<p>元素
:eq(index)	$("p:eq(1)")	第二個<p>元素，index從0開始

 

 

 

 

 

　　b3.jQuery遍曆函數

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

 

 

 

 

 　　

　　2、選擇同級元素

     jQuery選取器

          $(‘div + p‘) 每個div相鄰的下一個<p>元素
          $(‘div ~ p‘)擷取跟div同級的所有的<p>元素

    jQuery遍曆函數

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

3、擷取父級元素

      jQuery選取器

　    　$("p:parent")擷取所有p元素的父級元素

      jQuery遍曆函數

　　　　parent() 擷取被選元素的父級元素
　　　　parents()擷取被選元素的所有祖先元素

4.擷取子級元素

　　jQuery選取器

　　　　$(‘div > p‘) 擷取div直接子項目的所有<p>元素
　　　　$(‘div p‘)擷取div所有後代的<p>元素

　　jQuery遍曆函數

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

 

Jquery擷取元素方法