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" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被選取的 input 元素
:checked	$(":checked")	所有被選中的 input 元素

 

 

更多:jQuery 參考手冊 - 選擇器

http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

備注:

1.$("input")和$(":input")和$("<input>")的區別?

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

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

$("<input>")是可以分為2部分理解的，<input>在html是一個獨立標簽，加上$，就生成了一個jquery對象，對象就是這個<input>。有時用於快速生成元素，例如：$('<div>').html('這是新建的div').addClass('classname').appendTo('body')，就在body標簽后追加了這個新建的div。

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

空格：$('parent childchild')表示獲取parent下的所有的childchild節點（所有的子孫）。
大於號：$('parent > child')表示獲取parent下的所有child的兒子( 第一代)。   
加號：$('pre + nextbrother')表示獲得pre節點的下一個兄弟節點，相當於next()方法
波浪號：$('pre ~ brother')表示獲取pre節點的后面的所有兄弟節點，相當於nextAll()方法。

 

三.CSS 選擇器.

1.CSS 選擇器分組.

h2, p {color:gray;}

2.CSS 后代選擇器.

h1 em {color:red;}

3.CSS 子元素選擇器.

h1 > strong {color:red;}

4.CSS 相鄰兄弟選擇器.

h1 + p {margin-top:50px;}

5.CSS 屬性選擇器.

a[href] {color:red;}

選擇器	描述
[ 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 屬性的元素添加樣式。	2

 

7.CSS 偽元素.

	描述	CSS
:first-letter	向文本的第一個字母添加特殊樣式。	1
:first-line	向文本的首行添加特殊樣式。	1
:before	在元素之前添加內容。	2
:after	在元素之后添加內容。	2

更多:CSS 選擇器參考手冊

http://www.w3school.com.cn/cssref/css_selectors.asp