一、簡介
jquery的選擇器語法主要是基於css語法(早期版本還支援一部分xpath語法,因為效率等原因後期去除,但可以通過外掛程式來使用),另外w3c積極推進js原生的selector api 規定了queryselector和queryselectorall方法,目前大部分主流瀏覽器提供支援(ie需8以上),jquery內部也有應用queryselectorall
二、分類
jquery選擇器分為基本選擇器、層次選擇器、過濾選擇器和表單選擇器。
1.基本選擇器:jquery中最常用的選擇器,也是最簡單的選擇器,它通過id、class、和標籤名來查詢dom元素。在網頁中,每個id名稱只能使用一次,class允許重複使用。
jquery的基本選擇器
選擇器
描述
返回
示例
#id根據給定的id匹配乙個元素
單個元素
$("#test")選取id為test的元素
.class
根據給定的類名匹配元素
集合元素
$(".test")選取所有class為test的元素
element
根據給定的元素名匹配元素
集合元素
$("p")選取所有的元素 *
匹配所有元素
集合元素
$("*")選取所有的元素
selector1,selector2,...,selectorn
將每乙個選擇器匹配到的元素合併後一起返回
集合元素
$("div,span,p.myclass")選取所有,和擁有class為myclass的標籤的一組元素
2.層次選擇器:如果想通過dom元素之間的層次關係來獲取特定元素,例如後代元素、子元素、相鄰元素和兄弟元素等,那麼層次選擇器是乙個非常好的選擇。
jquery的層次選擇器
選擇器
描述
返回
示例
$("ancestor descendant")
選取ancestor元素裡的所有descendant(後代)元素
集合元素
$("div span")選取裡的所有元素
$("parent>child")
選取parent元素下的child(子)元素,與$("ancestor descendant")有區別,$("ancestor descendant")選擇的是後代元素
集合元素
$("div>span")選取元素下元素名是的子元素
$("prev+next")
選取緊接在prev元素後的next元素
集合元素
$(".one+div")選取class為one的下乙個元素
$("prev~siblings")
選取prev元素之後的所有siblings元素
集合元素
$("#two~div")選取id為two的元素後面的所有兄弟元素
3.過濾選擇器:主要是通過特定的過濾規則來篩選出所需的dom元素,過濾規則與css中的偽類選擇器語法相同,即選擇器都以乙個冒號(:)開頭。按照不同的過濾規則,過濾選擇器可以分為基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表單物件屬性過濾選擇器。
1) 基本過濾
jquery的基本過濾選擇器
選擇器
描述
返回
示例
:first
選取第1個元素
單個元素
$("div:first")選取所有元素中第1個元素
:last
選取最後乙個元素
單個元素
$("div:last")選取所有元素中最後乙個元素
:not(selector)
去除所有與給定選擇器匹配的元素
集合元素
$("input:not(.myclass)")選取class不是myclass的元素
:even
選取索引是偶數的所有元素,索引從0開始
集合元素
$("input:even")選取索引是偶數的元素
:odd
選取索引是奇數的所有元素,索引從0開始
集合元素
$("input:odd")選取索引是奇數的元素
:eq(index)
選取索引等於index的元素(index從0開始)
單個元素
$("input:eq(1)")選取索引等於1的元素
:gt(index)
選取索引大於index的元素(index從0開始)
集合元素
$("input:gt(1)")選取索引大於1的元素(注:大於1,而不包括1)
:lt(index)
選取索引小於index的元素(index從0開始)
集合元素
$("input:lt(1)")選取索引小於1的元素(注:小於1,而不包括1)
:header
選取所有的標題元素,例如h1,h2,h3等等
集合元素
$(":header")選取網頁中所有的,,......
:animated
選取當前正在執行動畫的所有元素
集合元素
$("div:animated")選取正在執行動畫的元素
鋒利的JQuery筆記 一
window.onload function document ready function 執行時機 等待網頁的所有內容載入完畢 包含 後才會執行 網頁中的dom建立後就執行 編寫個數 可以編寫多個,後面的會覆蓋前面的 可以編寫多個,新增多個後會並行執行 簡化寫法 無 function 1.jqu...
《鋒利的jQuery》補充筆記
壓縮 uglifyjs jquery物件轉化為dom物件使用 index 或者get index dom物件轉化為jquery物件使用 dom物件 jquery.noconflict 是將變數的控制權移交給其他庫,如果jquery想要自定義乙個快捷方式的話,就給它賦值乙個變數。如果還想繼續使用 又不...
鋒利的jQuery 讀書筆記
第一章 認識jquery 1 鏈式操作方式 這是jquery中最具有特色的,即對發生在同乙個jquery物件上的 一組動作,可以直接連寫而無需重複獲取物件。2 jquery物件中不能使用dom物件的任何的方法,同時dom物件也不能使用jquery物件的方法。3 為了區別dom物件和jquery物件,...