首頁 > web前端 > js教程 > 主體

JQuery取得元素的方法總結

小云云
發布: 2017-12-05 09:59:30
原創
2048 人瀏覽過

一、說明

取得元素的方法分為兩種: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板