JQuery取得元素的方法總結

一、說明

取得元素的方法分為兩種：jQuery選擇器、jQuery遍歷函數，本文我們將和大家分享JQuery取得元素的方法總結，希望能幫助大家。

做個總結，鞏固下知識。

二、取得本身

      1、只需要一個jQuery選擇器

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

##     

 

 

 

       2、多種jQuery選擇器組合

        是一個元素集合，後半部可以精確為一個元素，兩者結合，可以得到想要的元素。

            1）前半部分選擇器

 .class$('.myClass')類別選擇器：可以取得到class為'myClass'的所有元素element$('p')#取得所有的< ;p>元素:header$(':header')#取得所有的標題元素：

~ < h6>

:animated$(':animated') 取得所有的動畫元素:contains(text)$('p:contains(Hello)')取得所有包含文字為Hello的

元素，中間的文字區分大小寫

:hidden$(':hidden')取得所有的隱藏元素：width和height為0、display:none、type= hidden、[attribute]$('[href]')屬性選擇器：取得所有含有屬性為href的元素[attribute=value]$('[href=a.html]')##: input$(':input')取得所有input元素:radio$(':radio' ):enabled$(':enabled')所有啟用的input元素。 :disabled  則相反:checked#$(':checked')所有選取的input選擇（單選框、複選框):gt(index)$('p:gt(2)')index從0開始，取得index大於（不包含）2的所有

元素

:lt(index)$('p:lt(2)')index從0開始，取得index小於（不包含）2的所有

元素

#:even$('tr:even')所有偶數元素:odd$('tr:odd')所有奇數< tr>元素 

選擇器	實例	說明
		=   取得所有帶有屬性href ，且值為a.html的元素 !=  取得所有帶有屬性href，且值不等於為a.html的元素 ##$=  取得所有帶有屬性href，且值以a.html結尾的元素 ^=  取得所有帶有屬性href，且值以a.html開頭的元素 ~=  取得所有帶有屬性href，且值包含字」a.html「的元素 *=  取得所有帶有屬性href，且值包含文字」a.html「的元素
	所有有type="radio" 的input 元素	相似的有： :text、:chexbox、:password、:submit、: reset、:button、:file

     

 

 

# 

     

# 

 

 

 

 

 

 

# 

# 

 

 

 

          

 

#2)後半段選擇器：可精確到某一個元素

選擇器$('p:first')第一個

元素

#:last$('p:last')最後一個

元素

:eq(index )$("p:eq(1)")第二

元素，index從0開始

 

 

 

    3、jQuery選擇器+遍歷函數

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

          1）前半部同上

          2）後半部：遍歷函數

#實例	##說明	:first

# eq() 回傳有被選取元素的指定索引號的元素 first()

## 方法		描述

# 傳回被選元素的第一個元素

 last( )

 回傳被選元素的最後一個元素      顧名思義：取得選取元素的元素。首先需要定位到該元素（），然後取得它的同級元素。       1）選擇器

#	#
#三、取得同級元素
同級	上面已有總結，不再重複

#選擇器

##範例

說明

element + next取得跟p同級的所有的

元素

      

#$('p + p')	每個p相鄰的下一個 元素
element ~ siblings	$('p ~ p')

     2）遍歷函數

#方法#next()傳回被選元素的後一個同層級元素nextAll()傳回被選取元素之後的所有同級元素

	描述

prev()

傳回被選元素的前一個同級元素

prevAll()傳回被選元素之前的所有同級元素  # #      取得的元素實例

	四、取得父級元素
選取元素	父級
#選擇器

說明

:parent

$('p:parent')

取得所有p元素的父級元素

# 

## 

   2）遍歷函數

##########方法######說明############parent() ######取得被選元素的父級元素############parents()######取得所有被選取元素的祖先元素####### ######## ###### #########五、取得子級元素#########      取得###選取元素###的## #子級###元素######     1）選擇器##################選擇器############實例############說明###############parent > child###### $('p > p')### ### 取得p直接子元素的所有

元素#############parent descendant###### $('p p')####### 取得p所有後代的

元素###############   ############### ######       2）遍歷函數## ################方法############描述###############children()## ####傳回所有被選元素的直接子元素############contents()######傳回被選元素的所有直接子元素(包含文字和註解節點) ############find()######傳回被選元素的子代元素############### ###### # ##### ###### ######以上內容就是JQuery取得元素的方法總結，希望能幫助大家。 ######相關推薦：#########jquery取得元素index()方法實例詳解############jquery取得元素，包裹元素和插入元素屬性用法詳解############jquery取得元素值的方法(常見的表單元素)_jquery#######

以上是JQuery取得元素的方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！