關於jQuery裡面的選擇器

2022-05-04 15:00:09 字數 3590 閱讀 3345

一、jquery選擇器的概述

選擇器是jquery的根基,在jquery中,對事件處理、遍歷dom和ajax操作都依賴於選擇器。

二、選擇器的優勢

1、簡潔的語法

2、支援css1.0到css3.0選擇器

3、完善的處理機制

三、基本選擇器

名稱語法構成

描述例項

標籤選擇器

element

根據給定的標籤名匹配元素

$("h2" )選取所有h2元素

類選擇器

.class

根據給定的class匹配元素

$(" .title")選取所有class為title的元素

id選擇器

#id根據給定的id匹配元素

$(" #title")選取id為title的元素

並集選擇器

selector1,selector2,...,selectorn

將每乙個選擇器匹配的元素合併後一起返回

$("div,p,.title" )選取所有div、p和擁有class為title的元素

交集選擇器

element.class或element#id

匹配指定class或id的某元素或元素集合

$("h2.title")選取所有擁有class為title的h2元素

全域性選擇器

*匹配所有元素

$("*" )選取所有元素

"

">"

box">id為box的div

公主" title="

當不顯示的時候就顯示alt屬性的值

"/>

class="

title

">公主

四、層次選擇器

名稱語法構成

描述示例

後代選擇器

ancestor   descendant

選取ancestor元素裡的所有descendant(後代)元素

$("#menu   span" )選取#menu下的元素

子選擇器

parent>child

選取parent元素下的child(子)元素

$("   #menu>span" )選取#menu的子元素

相鄰元素選擇器

prev+next

選取緊鄰prev元素之後的next元素

$("   h2+dl " )選取緊鄰content

北京周邊旅遊**

"#">按天數"#

">海邊旅遊"#

">草原

景點門票"#

">名勝"#

">暑假"#

">樂園

"#">山水"#

">雙休

更多分類

五、屬性選擇器

名稱語法構成

描述示例

屬性選擇器

[attribute]

選取包含給定屬性的元素

$("   [href]" )選取含有href屬性的元素

[attribute=value]

選取等於給定屬性是某個特定值的元素

$("   [href ='#']" )選取href屬性值為「#」的元素

[attribute !=value]

選取不等於給定屬性是某個特定值的元素

$("   [href !='#']" )選取href屬性值不為「#」的元素

屬性選擇器

[attribute^=value]

選取給定屬性是以某些特定值開始的元素

$("   [href^='en']" )選取href屬性值以en開頭的元素

[attribute$=value]

選取給定屬性是以某些特定值結尾的元素

$("   [href$='.jpg']" )選取href屬性值以.jpg結尾的元素

[attribute*=value]

選取給定屬性是以包含某些值的元素

$("   [href* ='txt']" )選取href屬性值中含有txt的元素

[selector]   [selector2] [selectorn]

選取滿足多個條件的復合屬性的元素

$("li[id][title=新聞要點]" )選取含有id屬性和title屬性為新聞要點的元素

"

">"

box">

六、基本過濾選擇器可以選取第乙個元素、最後乙個元素、索引為偶數或奇數的元素

基本過濾選擇器

:first

選取第乙個元素

$("   li:first" )選取所有元素中的第乙個元素

:last

選取最後乙個元素

$("   li:last" )選取所有元素中的最後乙個元素

:even

選取索引是偶數的所有元素(index從0開始)

$("   li:even" )選取索引是偶數的所有元素

:odd

選取索引是奇數的所有元素(index從0開始)

$("   li:odd" )選取索引是奇數的所有元素

名稱語法構成

描述示例

基本過濾選擇器

:not(selector)

選取去除所有與給定選擇器匹配的元素

$("   li:not(.three)" )選取class不是three的元素

:header

選取所有標題元素,如h1~h6

$(":header" )選取網頁中所有標題元素

:focus

選取當前獲取焦點的元素

$(":focus" )選取當前獲取焦點的元素

"

">

七、可見性過濾選擇器

名稱語法構成

描述示例

可見性過濾選擇器

:visible

選取所有可見的元素

$(":visible" )選取所有可見的元素

:hidden

選取所有隱藏的元素

$(":hidden" )   選取所有隱藏的元素

"

">"

txt_hide

">點選按鈕我會隱藏哦

"txt_show

">隱藏我會顯示哦

"show

" type="

button

" value="

點選顯示文字

"/>

"hide

" type="

button

" value="

點選隱藏文字

"/>

總結:(一定要看實列,才會有收穫哦)

基本選擇器

標籤選擇器、類選擇器、id選擇器

並集選擇器、交集選擇器、全域性選擇器

層次選擇器

後代選擇器、子選擇器

相鄰選擇器、同輩選擇器

屬性選擇器

屬性名過濾、屬性值過濾、多屬性條件過濾

基本過濾選擇器

可見性過濾選擇器

Jquery關於CSS選擇器

關於css選擇器 jquery選擇器涉及到css,css技術使得網頁的結構與表現樣式完全分離。同樣css也需要找到某個網頁的結構才能改變其樣式,這就是css選擇器。常用的css選擇器如下 標籤選擇器 以文件元素作為選擇符 aid選擇器 以文件元素的唯一識別符號id作為選擇符 mynamediv 類選...

關於JQuery的選擇器

1.id 根據給定的id來匹配元素 如果選擇器包含特殊字元,可以用兩個斜槓表示轉義 比如 查詢id為 mydiv 的元素 mydiv 這樣寫就可以查詢到所有id為 mydiv 的元素了。2.element 根據元素名來匹配所有元素 比如 查詢所有div元素就可以這樣寫 div 3.根據給定的類來匹配...

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...