jQuery學習(二) jQuery選擇器總結

2021-09-29 18:13:47 字數 1590 閱讀 7332

名稱

用法描述

id選擇器

$('#id')獲取指定id的元素

類選擇器

#('.class')獲取同一類class的元素

標籤選擇器

$('div')獲取同一類標籤的所有元素

並集選擇器

$('div,p,li')使用逗號分隔,只要符合條件之一就可

交集選擇器

$('div.redclass')獲取class為redclass的div元素

總結:用法和css選擇器是一樣的。

名稱

用法描述

子代選擇器

$("ul>li");使用》號,獲取兒子層級的元素,注意,並不會獲取孫子層級的元素

後代選擇器

$("ul li");使用空格,代表後代選擇器,獲取ul下的所有li元素,包括孫子等

總結:跟css的選擇器用法一模一樣。

名稱

用法描述

:eq(index)

$("li:eq(2)").css("color", "red");獲取到的li元素中,選擇索引號為2的元素,索引號index從0開始。

:odd

$("li:odd").css("color", "red");獲取到的li元素中,選擇索引號為奇數的元素

:even

$("li:even").css("color", "red");獲取到的li元素中,選擇索引號為偶數的元素

總結:這類選擇器都帶冒號

名稱

用法描述

children(selector)

$("ul").children("li")相當於$(「ul>li」),子類選擇器

find(selector)

$("ul").find("li");相當於$(「ul li」),後代選擇器

siblings(selector)

$("#first").siblings("li");查詢兄弟節點,不包括自己本身。

parent()

$("#first").parent();查詢父親

eq(index)

$("li").eq(2);相當於$(「li:eq(2)」),index從0開始

next()

$("li").next()找下乙個兄弟

prev()

$("li").prev()找上一次兄弟

總結:篩選選擇器的功能與過濾選擇器有點類似,但是用法不一樣,篩選選擇器主要是方法。

end.

如果你不沉下心來認真練習,所有的閱讀都是白費的。

jQuery學習之二 jQuery效果

1 jquery 效果之隱藏和顯示 selector toggle speed,callback 隱藏 顯示切換 可選的 speed 引數規定隱藏 顯示的速度,可以取以下值 slow fast 或毫秒。可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。利用隱藏和顯示功能可以實現tab...

二 jquery學習 jquery的效果

jquery的基本效果包括隱藏 顯示 切換,滑動,淡入淡出,以及動畫等等。一 隱藏與顯示 通過呼叫hide 和show 方法實現。語法如下 selector hide speed,callback selector show speed,callback 可選的 speed 引數規定隱藏 顯示的速度...

jQuery學習筆記(二)之jQuery選擇器

html頁面元素就一些html標籤 元素 和對應的html元素屬性組成,屬性包括id,class,獲取css樣式屬性等,其中通過css樣式屬性獲取jquery,這裡的css樣式屬性就可以稱為jquery的css選擇器 另外jquery還支援xpath選擇,其實跟css差不多。下面就這對各種常用的選擇...