js jquery css 選擇器總結

js jquery css 選擇器總結

一.原始js(document 物件)選擇器.

id選擇器:document.getelementbyid("test");

name選擇器:document.getelementsbyname("test");

節點擊擇器:document.getelementsbytagname("p");

class選擇器:document.getelementsbyclassname("test");

二.jquery 選擇器.

1.jquery 元素選擇器.

id選擇器:$("#test");

class選擇器:$(".test");

節點擊擇器:$("p");

2.jquery 屬性選擇器.

$("div[id]"); 選擇所有含有id屬性的div元素 

$("input[name='keleyicom']"); 選擇所有的name屬性等於'keleyicom'的input元素

$("input[name!='keleyicom']") ;選擇所有的name屬性不等於'keleyicom'的input元素

$("input[name^='keleyi']"); 選擇所有的name屬性以'keleyi'開頭的input元素 

$("input[name$='keleyi']"); 選擇所有的name屬性以'keleyi'結尾的input元素 

$("input[name*='keleyi']");選擇所有的name屬性包含'keleyi'的input元素

$("input[id][name$='keleyi']"); 可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且那麼屬性以keleyi結尾的元素

3.jquery css 選擇器.

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

4.jquery 表單選擇器.

: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 元素

備註:1.$("input")和$(":input")和$("")的區別?

$("input")是節點擊擇器,表示選擇所有input節點.

$(":input")是表單選擇器,表示選擇所有表單元素,包括textarea,select.

2.jquery選擇器空格,大於號,加號和波浪號的區別?

空格：$('parent childchild')表示獲取parent下的所有的childchild節點（所有的子孫）。

大於號：$('parent > child')表示獲取parent下的所有child的兒子( 第一代)。   

加號：$('pre + nextbrother')表示獲得pre節點的下乙個兄弟節點，相當於next()方法

波浪號：$('pre ~ brother')表示獲取pre節點的後面的所有兄弟節點，相當於nextall()方法。

三.css 選擇器.

1.css 選擇器分組.

h2, p

h1 em

子元素選擇器.

h1 > strong

h1 + p

a[href]

描述[ attribute ]

用於選取帶有指定屬性的元素。

[ attribute = value ]

用於選取帶有指定屬性和值的元素。

[ attribute ~= value ]

用於選取屬性值中包含指定詞彙的元素。

[ attribute |= value ]

用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。

[ attribute ^= value ]

匹配屬性值以指定值開頭的每個元素。

[ attribute $= value ]

匹配屬性值以指定值結尾的每個元素。

[ attribute *= value ]

匹配屬性值中包含指定值的每個元素。

6.css 偽類.

描述css

:active

向被啟用的元素新增樣式。

1:focus

向擁有鍵盤輸入焦點的元素新增樣式。

2:hover

當滑鼠懸浮在元素上方時，向元素新增樣式。

1:link

向未被訪問的鏈結新增樣式。

1:visited

向已被訪問的鏈結新增樣式。

1:first-child

向元素的第乙個子元素新增樣式。

2:lang

向帶有指定 lang 屬性的元素新增樣式。

27.css 偽元素.

描述css

:first-letter

向文字的第乙個字母新增特殊樣式。

1:first-line

向文字的首行新增特殊樣式。

1:before

在元素之前新增內容。

2:after

在元素之後新增內容。

2

jQuery選擇器之全選擇器（ 選擇器）

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

jQuery選擇器之全選擇器（選擇器）

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

Css選擇器 層次選擇器（關係選擇器）

1.e f 匹配 e 元素下所有的子元素 f 後代選擇器 eg css.box a匹配 box 下所有的子元素 a 2.e f 匹配 e 元素下第一級子元素 f 子選擇器 eg css.box a匹配 box 下第一級子元素 a 3.e f 匹配 e 元素後面緊鄰的哪乙個 f 元素 有且僅有乙個 相...