Jquery選擇器一覽

2021-08-15 15:55:42 字數 3238 閱讀 7020

1:基礎選擇器

#idid名選擇器    $("#hid")

ele元素選擇器,例如選擇所有的h1元素 $("h1")

.class class    屬性選擇器,選擇所有的class名一樣的元素 $(".classname")

* 所有元素選擇器 $("*")

sel1 , sel2 , ... 多個選擇器合併 ("#hid" , "h1",...);

alert(jquery);

可以檢視頁面有沒有匯入jquery包

2:層級選擇器

ancestor descendant

祖先和後代,在給定的祖先元素下匹配所有的後代元素

parent > child

父子選擇器,在給定的父元素下匹配所有的子元素

prev + next

下乙個選擇,匹配所有緊接在 prev 元素後的 next 元素

prev ~ siblings

後邊所有的,匹配 prev 元素之後的所有 siblings 元素

3:基本選擇器

:first         第乙個

$("h1:first").css("color","red")

:last         

最後乙個

$("h1:last").css("color","red")

:not         去除所有與給定選擇器匹配的元素,括號裡只能填選擇器

$("h1:not(:first)").css("color","red")

:even        所有的偶數索引

$("h1:even").css("color","red")

:odd         所有的奇數索引

$("h1:odd").css("color","red")

:eq            被選中的索引

$("h1:eq(0)").css("color","red")

:gt             匹配所有大於給定索引值的元素

$("h1:gt(0)").css("color","red")

:lt             匹配所有小於給定索引值的元素

$("h1:lt(1)").css("color","red")

:header     匹配如 h1, h2, h3之類的標題元素

$("h1:header").css("color","red")

:animated   匹配所有正在執行動畫效果的元素

$("h1:header").css("color","red")

4:內容選擇器

:contains

匹配包含給定文字的元素    $("h1:contains('aaaaaaa')")

:empty

匹配元素內沒有任何東西的標籤   $("h1:empty").html("cccccccc").css("color","red");

:has

匹配含有選擇器所匹配的元素的元素    $("h1:has(p)")

:parent

匹配含有子元素或者文字的元素

$("h1:parent").css("color","yellow");

5:可見性選擇器

:hidden         匹配所有的display屬性為none的元素或者type為hidden的元素

:visible          匹配所有的display屬性不為none的元素或者type不為hidden的元素

6:屬性選擇器

[attribute]

匹配所有包含指定屬性的元素:

$("h1[name]")

[attribute=value]

匹配所有屬性值為指定值的元素

$("h1[name=user]")

[attribute!=value]

匹配所有屬性值不為指定元素的元素 $("h1[name != user]")

[attribute^=value]

匹配所有屬性值以指定值開頭的元素 $("h1[name^=us]")

[attribute$=value]

匹配所有屬性值以指定值結尾的元素 $("h1[name$=er]")

[attribute*=value]

匹配所有屬性值包含指定值的元素 $("h1[name*=user]")

[attrsel1][attrsel2][attrseln]

多選擇器疊加使用

$("h1[name] [name=user] [name^=us]")

7:子元素選擇器

:nth-child      $("ul li:nth-child(2)")  匹配其父元素下的第n個子或奇偶元素

:first-child     $("ul li:first-child")      匹配第乙個子元素

:last-child      $("ul li:last-child")      匹配最後乙個子元素

:only-child     $("ul li:only-child")     如果某個元素是父元素中唯一的子元素,那將會被匹配

8:表單選擇器

:input        獲取所有的input元素

:text          獲取所有的type = text(文字)的元素

:password 獲取所有的typr = password(密碼)的元素

:radio        獲取多有的type = raido(單選按鈕)的元素

:checkbox 獲取多有的type = checkbox(複選按鈕)的元素

:submit     獲取多有的type = submit(提交按鈕)的元素

:image      獲取多有的type = image(可提交的)的元素

:reset        獲取多有的type = reset(重置)的元素

:button     獲取多有的type = button(按鈕)的元素

:file           獲取多有的type = file(檔案上傳按鈕)的元素

:hidden     獲取多有的type = hidden(隱藏的元素,通場作為提交的時候攜帶的內容)的元素

9:表單屬性選擇器

:enabled    獲取所有可用的元素

:disabled   獲取所有不可用元素

:checked   匹配所有選中的被選中元素(核取方塊、單選框等,不包括select中的option)

:selected   匹配所有選中的option元素

CSS選擇器一覽

css選擇器一覽 在 css 中,選擇器是一種模式,用於選擇需要新增樣式的元素。css 列指示該屬性是在哪個 css 版本中定義的。css1 css2 還是 css3。選擇器例子 例子描述 css.class intro 選擇 class intro 的所有元素。1 id firstname 選擇 ...

jQuery功能一覽

如果您點選我,我會消失。我設定了id消失,點選我會消失 我設定了class消失,點選我會消失 隱藏讓你顯示你就顯示,讓你滾你就滾 給我滾給我出來 隱藏這個內容會被隱藏。切換這是內容會被隱藏或顯示 演示帶有不同引數的 fadein 方法。點選這裡,使三個矩形淡入 演示帶有不同引數的 fadeout 方...

一 JQuery選擇器

1 基本選擇器 id 根據給定的id匹配乙個元素 class 根據給定的類名匹配元素 element 根據給定的元素名匹配元素 匹配所有元素 selector1,selector2,selectorn 將每乙個選擇器匹配到的元素合併後一起返回 2 層次選擇器 ancestor descendant ...