一、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選擇器分類如下表 選擇器語法...