jquery選擇器用法筆記(第一部分)

2022-04-21 19:10:31 字數 1408 閱讀 5434

由於我在專案中用jquery比較多,而且覺得jquery真的很不錯,尤其是其靈活高效的選擇器更是令人無法忘懷。那麼,今天就來寫一篇非常基礎的關於jquery選擇器的文章,路過的朋友可以收藏以作參考。

1、$("*")   --  選取所有元素

* 選擇器選取文件中的每個單獨的元素,包括 html、head 和 body。

如果與其他元素(巢狀選擇器,正如上面的例子)一起使用,該選擇器選取指定元素中的所有子元素。

如選取body內的所有元素我們我們可以這樣:$(body *)

2、$("#id")  --  選取對應id的元素

# 選取帶有唯一的指定 id 的元素。

id 引用 html 元素的 id 屬性。

相同的 id 值只能在文件中使用一次。

如要選取id為content的元素:$("#content")

注意:id不要以數字開頭,有些瀏覽器會出問題

3、$(".class")  --  選取指定class的所有元素

. 選擇器選取帶有指定 class 的元素。

class 引用 html 元素的 class 屬性。

與 id 選擇器不同,class 選擇器常用於多個元素。

這樣就可以為帶有相同 class 的任何 html 元素設定特定的樣式。

注意:class名稱不要以數字開頭,有些瀏覽器會出問題

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

4、$(element)  --  選取指定標籤名的元素

element 選擇器選取帶有指定標籤名的元素。

標籤名引用 html 標籤的 < 與 > 之間的文字。

如要選取所有p元素:$(p)

5、$("p:first")  --  選取第乙個p元素

:first 選擇器選取第乙個元素。

最常見的用法:與其他元素一起使用,選取指定組合中的第乙個元素

6、$("p:last")  --  選取最後乙個p元素

:last 選擇器選取最後乙個元素。

最常見的用法:與其他元素一起使用,選取指定組合中的最後乙個元素

7、$("tr:even")  --  選取所有偶數元素

:even 選擇器選取每個帶有偶數 index 值的元素(比如 2、4、6)。

index 值從 0 開始,所有第乙個元素是偶數 (0)。

最常見的用法:與其他元素/選擇器一起使用,來選擇指定的組中偶數序號的元素

8、$("tr:odd")  --  選取所有奇數元素

:odd 選擇器選取每個帶有奇數 index 值的元素(比如 1、3、5)。

index 值從 0 開始,所有第乙個元素是偶數 (0)。

最常見的用法:與其他元素/選擇器一起使用,來選擇指定的組中奇數序號的元素

今天先介紹這幾個,改天再繼續講其他的選擇器用法,敬請期待

jquery選擇器用法

1.基本選擇器 2.層次選擇器 2.1.sela selb 派生選擇器 父子關係 div span 在 div內部獲得全部 span 標籤,無需考慮層次 2.2.sela selb 子元素選擇器 父子關係 div span 在 div的內部獲得子級 span標籤 2.3.sela selb 兄弟關係...

jquery選擇器用法總結

jquery最核心的是查詢功能,下面對jquery選擇器總結一下 版本是1.9 一 基礎選擇器 1 號選擇器,獲取所有元素。例 2 class選擇器。例 classname 3 id選擇器。例 id 4 多個選擇器的集合。例 div,span,p,classname,id 二 層級選擇器 1 根據父...

選擇器用法

選擇器 idelement class selertor1,selector2 逗號 ancestor descendant 祖先元素的所有後代元素 parent child 父元素的所有子元素 prev next 所有緊接在prev元素後面的next元素 prev siblings 匹配prev元...