鋒利的jQuery筆記4 1 jQuery選擇器

2021-08-25 09:45:30 字數 2942 閱讀 3364

一、簡介

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物件,...