首頁  >  文章  >  web前端  >  jquery有哪些屬性選擇器

jquery有哪些屬性選擇器

王林
王林原創
2020-11-18 09:54:313832瀏覽

jquery中的屬性選擇器有:1、id選擇器;2、css選擇器;3、標籤選擇器;4、層次選擇器;5、過濾選擇器;6、屬性選擇器; 7、子元素選擇器;8、表單選擇器。

jquery有哪些屬性選擇器

jQuery中使用$()符號作為選擇符大幅提高了工作效率。

(學習影片分享:javascript影片教學

常用屬性選擇器有以下幾種:

  • #1) $('#id')  id選擇器

  • 2)  $('.class')  css選擇器,class類別名稱

  • 3)  $('element')  標籤選擇器,例如p,h1,div

  • 4)  $('*')  全選擇器,可選擇所有的html標籤(影響範圍較大甚用)

  • 5)  $('sele1,sele2')  用','逗號隔開可以選擇多個不同元素有相同效果的選擇器

  • 6)  $('div p')  層次選擇器,常用的選擇器,例如div下面的p標籤

  • 7)  $(' div>p') 與上一個層次選擇器差不多,但是div下面有子元素,子元素下還有孫元素,該選擇器只能選子元素

  • 8) $('div p')   該選擇器用得很少表示div相鄰下一個選擇器,(必須是相同層次元素並且緊捱的)

  • 9)  $(' div~p') 在相同階段的元素從div開始一直到該階段尾部所有的p標籤被選中,不包括往下元素的為p子元素

  • #10)  $ ('div:first')  過濾選擇器,:first用:與父級元素連接,選擇的第一個div元素;

  • 11)  $('div:last' )  過濾選擇器;:last方法與上一樣不過是選擇最後一個div元素;

  • 12)  $('li:eq(1)')  該選擇器也是過濾選擇器;用':eq()'連接,括號內輸入數字選擇從0開始,0代表第一位;

  • 13)  $('li:contains("text" )') 此選擇器可選擇如:li裡面文字中所有text的所有元素包含li下的子元素帶有text都被選取text可以是自己所需要的關鍵字;('text')需要加單或雙引號,因為它是字串而不是變數

  • 14)  $('li:has("p")') 這個選擇器與層次選擇器效果差不多也是選擇li以下的所有p標籤可被繼承;

  • 15)  $('div:hidden')  :hidden該選擇器可以選擇一些display:none;隱藏的選擇器

  • 16)  $('span:visible')   與:hidden恰恰相反將所有span標籤都選中,但display:none的span屬性不選中

  • #17)  $('li[title=book]')  屬性選擇器,選取li裡屬性為title=book的元素;

  • 18)  $('li[title !=book]')   與上一個相反選取li內title不為,不等於book的元素;

  • 19)  $('li[title*=k]')  屬性選擇器,選擇所有li內,全部title中帶有k字的元素;

  • #20)  $('li:first-child')  子元素過濾器;:first過濾器可以取得指定父元素的首個子元素,並不是一個集合.只是一個li下的首個子元素並不是所有的li下的子元素.而first-child獲得每個父元素返回的首個子元素;

  • 21)  $('li:last-child')  與上過濾選擇器一樣,last:child會獲得每個父元素傳回的最後一個子元素;

  • 22)  $('form :input')  表單選擇器所包含的有input,select,button,textarea,

  • #23)  $(' form :text')   表單文字選擇器,該選擇器只包含類型做選擇 

  • 24)  $('form :password')表單密碼選擇器,同樣也只包含input內type='password'類型,

  • #25)  $('form :radio')  單選按鈕選擇器,同樣也只包含input內type =' radio'類型,26)  $('form :checkbox') 複選框選擇器,同樣也只包含input內type='checkbox'類型

  • #27 )  $('form :submit') 提交按鈕選擇器,包含input內type="submit"和button類型,

  • ##28)  $('form :image')  圖像域選擇器.只有input內的src才能生效。如在form內加入img src將不會受到影響

  • 29)  $('form :button')  表單按鈕選擇器.包含input內type='button'與< button>有效

  • 30)  $('form :checked')  選取狀態選擇器,帶有選擇框radio,checkbox都會被選取;

  • 31)  $('form :selected')  下選框選取選擇器,只能取得select下拉清單中全部處於選取狀態的option選擇器;

相關推薦:js教學

#

以上是jquery有哪些屬性選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn