搜尋
首頁web前端js教程jQuery中選擇器有哪幾種

jQuery中選擇器有哪幾種

Sep 07, 2017 pm 01:30 PM
jquery幾種選擇器

jQuery選擇器
一、基本選擇器

基本選擇器是jQuery中最常用也是最簡單的選擇器,它透過元素的id、class和標籤名稱等來尋找DOM元素。
1、ID選擇器#id
描述:根據給定的id匹配一個元素, 傳回單一元素(註:在網頁中,id名稱不能重複)
範例:$("#test" ) 選取id 為test 的元素
2、類別選擇器.class
描述:根據給定的類別名稱匹配元素,傳回元素集合
範例:$(".test") 選取所有class為test的元素
3、元素選擇器element
描述:根據給定的元素名稱來匹配元素,返回元素集合
範例:$("p") 選取所有的

元素
4、*
描述:符合所有元素,返回元素集合
範例:$("*") 選取所有的元素
5、selector1,selector2,...,selectorN
描述:將每個選擇器配對到的元素合併後一起傳回,傳回合併後的元素集合
範例:$("p,span,p.myClass") 選取所有

,和class為myClass的

標籤的元素集合
二、層次選擇器
#層次選擇器根據層次關係取得特定元素。
1、後代選擇器
範例:$("p span") 選取

元素裡的所有的元素(註:後代選擇器選擇父元素所有指定選擇的元素,不管是兒子級,還是孫子級)
2、子選擇器$("parent>child")
範例:$("p>span") 選擇

元素下的所有3、同儕選擇器$("prev+next")
描述:選取緊接在prev元素後的next元素,傳回元素集合
範例:$(".one+p") 選取class為one的下一個

同儕元素集合
4、同儕選擇器$("prev~siblings")
描述:選取prev元素後的所有siblings元素,回傳元素集合
範例:$("#two~p")選取id為two的元素後所有

同儕元素集合
三、過濾選擇器
1>基本過濾選擇器
1、 :first
描述:選取第一個元素,傳回單一元素
範例:$( "p:first") 選取所有

元素中第一個

元素
2、 :last
說明:選取最後一個元素,傳回單一元素
範例:$(" p:last") 選取所有

元素中最後一個

元素
3、 :not(selector)
描述:去除所有與給定選擇器匹配的元素,返回元素集合
範例:$("input:not(.myClass)") 選取class不是myClass的元素
4、 :even
描述:選取索引是偶數的所有元素,索引從0開始,返回元素集合
5、 :odd
描述:選取索引是奇數的所有元素,索引從0開始,返回元素集合
6、 :eq(index)
描述:選取索引等於index的元素,索引從0開始,傳回單一元素
7、 :gt(index)
描述:選取索引大於index的元素,索引從0開始,傳回元素集合
8、 :lt( index)
描述:選取索引小於於index的元素,索引從0開始,傳回元素集合
9、 :focus
描述:選取目前取得焦點的元素
2>內容過濾選擇器
1、:contains(text)
描述:選取含有文字內容為text的元素,返回元素集合
範例:$("p:contains('我')" ) 選取含有文字「我」的元素
2、:empty
描述:選取不包含子元素或文字元素的空元素,傳回元素集合
範例:$("p:empty") 選取不包含子元素或文字元素的空

元素(


3、:has(selector)
說明:選取含有選擇器所符合的元素的元素,傳回元素集合
範例:$("p:has(p)") 選取含有

元素的

元素(


4、:parent
描述:選取含有子元素或文字的元素,傳回元素集合
範例:$("p:parent") 選取含有子元素或文字元素的

元素(

文本


3>可見性過濾選擇器
1、: hidden
說明:選取所有不可見的元素,傳回元素集合
2、:visible
說明:選取所有可見的元素,傳回元素集合
4>屬性過濾選擇器(傳回元素集合)
1、[attribute]
範例:$("p[id]") 選取擁有id屬性的p元素
2、[attribute=value]
範例:$("input[name=text]") 選取擁有name屬性等於text的input元素
3、[attribute!=value]
範例:$("input[name!=text]") 選取擁有name屬性不等於text的input元素
4、[attribute^=value]
範例:$("input[name^=text] ") 選取擁有name屬性以text開始的input元素
5、[attribute$=value]
範例:$("input[name$=text]") 選取擁有name屬性以text結束的input元素
6、[attribute*=value]
範例:$("input[name*=text]") 選取擁有name屬性含有text的input元素
7、[attribute~=value]
範例:$("input[class~=text]") 選取擁有class屬性以空格分割的值中含有text的input元素
8、[attribute1][attribute2][attributeN]
描述:合併多個屬性過濾選擇器
5>表單物件屬性過濾選擇器(返回元素集合)
1、:enabled
描述:選取所有可用元素
2、: disabled
描述:選取所有不可用元素
3、:checked
說明:選取所有已選取的元素(單選框,複選框)
範例:$("input:checked" ) 選取所有被選取的元素
4、:selected
描述:選取所有已選取的選項元素(下拉清單)
範例:$("select option:selected") 選取所有被選取的選項元素
四、表單選擇器(傳回元素集合,使用相似)
#1、:text
描述:選擇所有的單行文字方塊
範例: $(":text")選取所有的單行文字方塊
2、:password
描述:選擇所有的密碼方塊
3、:button
描述:選擇所有的按鈕
4 、:checkbox
描述:選擇所有的多選框
#

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

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript數據類型:瀏覽器和nodejs之間是否有區別?JavaScript數據類型:瀏覽器和nodejs之間是否有區別?May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致,但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window,在Node.js中為global。 2)Node.js獨有Buffer對象,用於處理二進制數據。 3)性能和時間處理在兩者間也有差異,需根據環境調整代碼。

JavaScript評論:使用//和 / * * / * / * /JavaScript評論:使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript:開發人員的比較分析Python vs. JavaScript:開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型,適合科學計算和數據分析。 2.JavaScript採用弱類型,廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢,選擇時應根據項目需求決定。

Python vs. JavaScript:選擇合適的工具Python vs. JavaScript:選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型:1)數據科學和自動化任務選擇Python;2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞,而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript:了解每個的優勢Python和JavaScript:了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢,選擇取決於項目需求和個人偏好。 1.Python易學,語法簡潔,適用於數據科學和後端開發,但執行速度較慢。 2.JavaScript在前端開發中無處不在,異步編程能力強,Node.js使其適用於全棧開發,但語法可能複雜且易出錯。

JavaScript的核心:它是在C還是C上構建的?JavaScript的核心:它是在C還是C上構建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1)JavascriptwasdesignedAsignedAsalightWeight,drackendedlanguageforwebbrowsers.2)Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers,典型地,替代品。

JavaScript應用程序:從前端到後端JavaScript應用程序:從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗,後端通過Node.js處理服務器任務。 1.前端示例:改變網頁文本內容。 2.後端示例:創建Node.js服務器。

Python vs. JavaScript:您應該學到哪種語言?Python vs. JavaScript:您應該學到哪種語言?May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統:1)職業發展:Python適合數據科學和後端開發,JavaScript適合前端和全棧開發。 2)學習曲線:Python語法簡潔,適合初學者;JavaScript語法靈活。 3)生態系統:Python有豐富的科學計算庫,JavaScript有強大的前端框架。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)