jquery之選擇器簡介

2021-06-27 20:29:17 字數 2328 閱讀 7464

jquery 元素選擇器

jquery 使用 css 選擇器來選取 html 元素。

$("p") 選取 元素。

$("p.intro") 選取所有 class="intro" 的 元素。

$("p#demo") 選取所有 id="demo" 的 元素。

jquery 屬性選擇器

jquery 使用 xpath 表示式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有 href 屬性的元素。

$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。

$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。

$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。

jquery css 選擇器

jquery css 選擇器可用於改變 html 元素的 css 屬性。

下面的例子把所有 p 元素的背景顏色更改為紅色:

例項$("p").css("background-color","red");

jquery 選擇器

選擇器例項 選取

*$("*") 所有元素

#id$("#lastname")id="lastname" 的元素

.class$(".intro")所有 class="intro" 的元素

element$("p")所有 元素

.class.class$(".intro.demo")所有 class="intro" 且 class="demo" 的元素

:first$("p:first")第乙個 元素

:last$("p:last")最後乙個 元素

:even$("tr:even")所有偶數 元素

:odd$("tr:odd")所有奇數 元素

:eq(index)$("ul li:eq(3)")列表中的第四個元素(index 從 0 開始)

:gt(no)$("ul li:gt(3)")列出 index 大於 3 的元素

:lt(no)$("ul li:lt(3)")列出 index 小於 3 的元素

:not(selector)$("input:not(:empty)")所有不為空的 input 元素

:header$(":header")所有標題元素 -

:animated

所有動畫元素

:contains(text)$(":contains('w3school')")包含指定字串的所有元素

:empty$(":empty")無子(元素)節點的所有元素

:hidden$("p:hidden")所有隱藏的 元素

:visible$("table:visible")所有可見的**

s1,s2,s3$("th,td,.intro")所有帶有匹配選擇的元素

[attribute]$("[href]")所有帶有 href 屬性的元素

[attribute=value]$("[href='#']")所有 href 屬性的值等於 "#" 的元素

[attribute!=value]$("[href!='#']")所有 href 屬性的值不等於 "#" 的元素

[attribute$=value]$("[href$='.jpg']")所有 href 屬性的值包含以 ".jpg" 結尾的元素

:input$(":input")所有 元素

:text$(":text")所有 type="text" 的 元素

:password$(":password")所有 type="password" 的 元素

:radio$(":radio")所有 type="radio" 的 元素

:checkbox$(":checkbox")所有 type="checkbox" 的 元素

:submit$(":submit")所有 type="submit" 的 元素

:reset$(":reset")所有 type="reset" 的 元素

:button$(":button")所有 type="button" 的 元素

:image$(":image")所有 type="image" 的 元素

:file$(":file")所有 type="file" 的 元素

:enabled$(":enabled")所有啟用的 input 元素

:disabled$(":disabled")所有禁用的 input 元素

:selected$(":selected")所有被選取的 input 元素

:checked$(":checked")所有被選中的 input 元

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

jQuery選擇器之全選擇器( 選擇器)

在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagname 中傳遞 同樣可以獲取到 不難發現...

jQuery選擇器之全選擇器(選擇器)

jquery選擇器之全選擇器 選擇器 在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagna...