css選擇器
選擇器語法
描述示例
標籤選擇器
e
以文件元素作為選擇器
td a
id選擇器
#id
以文件元素的唯一識別符號id作為選擇器
#note
類選擇器
e.classname
以文件元素的class作為選擇器
div.note
.dream
群組選擇器
e1,e2,e3
多個選擇符應用同樣的樣式規則
td,p,div.a
後代選擇器
e,f
元素e的任意後代元素f
#links a
萬用字元選擇器
*
以文件的所有元素作為選擇符
*基本選擇器
選擇器
描述
返回
示例
#id
根據給定的id匹配乙個元素
單個元素
$("#test")選取id為test的元素
.class
根據給定的類名匹配元素
集合元素
$(".test")選取所有class為test的元素
element
根據給定的元素名匹配元素
集合元素
$("p")選取所有的元素
*
匹配所有元素
集合元素
選取所有的元素
selector1,selector2,
……,selectorn
將每乙個選擇器匹配到的元素
合併後一起返回
集合元素
&("div,span,p.myclass")選取所有，
和擁有class為myclass的
標籤的一組元素
層次選擇器
選擇器
描述
返回
示例
$("ancestor descendant")
選取ancestor元素裡的所有
descendant元素
集合元素
$("div span")選取div>裡的
所有元素
&("parent>child")
選取parent元素下的child元素，與
$("ancestor descendant")有區別，
$("ancestor descendant")選擇的是
後代元素
集合元素
$("div>span")選取元素下
元素名是的子元素
$("prev+next")或
$("prev").next("next")
選取緊接在prev元素後的next元素
集合元素
$(".one+div")或$(".one").next("div")選取
class為one的下乙個元素
$("prev~siblings")或
$("prev").nextall("siblings")
選取prev元素之後的所有siblings元素
集合元素
$("#two~div")或$("#two").nextall("div")
選取id為two的元素後面的所有兄弟
元素
$("prev").siblings("siblings")
選取prev元素的所有siblings元素
集合元素
$("#two").siblings("div")選取id為two的
元素的所有兄弟元素，不分前後位置
過濾選擇器
ⅰ.基本過濾選擇器
選擇器
描述
返回
示例
:first
選取第乙個元素
單個元素
$("div:first")選取所有元素中的
第乙個元素
:last
選取最後乙個元素
單個元素
$("div:last")選取所有元素中的
最後乙個元素
:not(selector)
去除所有與給定選擇器匹配
的元素
集合元素
$("input:not(.myclass)")選取class不是
myclass的元素
:even
選取索引是偶數的所有元素
(索引從0開始)
集合元素
$("input:even")選取索引是偶數的
元素
:odd
選取索引是奇數的所有元素
(索引從0開始)
集合元素
$("input:odd")選取索引是奇數的
元素
:eq(index)
選取索引等於index的元素
(索引從0開始)
單個元素
$("input:eq(1)")選取索引等於1的
元素
:gt(index)
選取索引大於index的元素
(索引從0開始)
集合元素
$("input:gt(1)")選取索引大於1的
元素(不包括1)
:lt(index)
選取索引小於index的元素
(索引從0開始)
集合元素
$("input:lt(1)")選取索引小於1的
元素(不包括1)
:header
選取所有的標題元素，例
如 h1,h2,h3等
集合元素
$(":header")選取所有的 ,
,,
:animated
選取當前正在執行動畫的
所有元素
集合元素
$("div:animated")選取正在執行
動畫的元素
ⅱ.內容過濾選擇器
選擇器
描述
返回
示例
:contains(text)
選取含有文字內容為「text」元素
集合元素
$("div:contains('我')")選取含有文字「我」的元素
:empty
選取不包含子元素或者文字的空元素
集合元素
$("div:empty")選取不包含子元素(包括文字元素)的
元素
:has(selector)
選取含有選擇器所匹配的元素的元素
集合元素
$("div:has(p)")選取含有
元素的元素
:parent
選取含有子元素或者文字的元素
集合元素
$("div:parent")選取擁有子元素(包括文字元素)的
元素
ⅲ.可見性過濾器
選擇器
描述
返回
示例
:hidden
選取所有不可見的元素
集合元素
$(":hidden")選取所有不可見的元素。
包括,和等元素。
:visible
選取所有可見的元素
集合元素
$("div:visible")選取所有可見的元素
iiii.屬性過濾選擇期
選擇器
描述
返回
示例
[attribute]
選取擁有此屬性的元素
集合元素
$("div[id]")選取擁有屬性id的元素
[attribute=value]
選取屬性的值為value的元素
集合元素
$("div[title=test]")選取所有title為"test"的元素
[attribute=!value]
選取屬性的值不等於value的元素
集合元素
$("div[title!=test]")選取所有title不等於"test"的元素
(沒有屬性 title 的元素也會被選取)
[attribute=^value]
選取屬性的值以value開始的元素
集合元素
$("div[title^=test]")選取屬性title以"test"開始的元素
[attribute=$value]
選取屬性的值以value結束的元素
集合元素
$("div[title$=test]")選取屬性title以"test"結束的元素
[attribute=*value]
選取屬性的值含有value的元素
集合元素
$("div[title*=test]")選取屬性title含有"test"的元素
第二章 選擇器 jQuery篇
目錄 1.基本選擇器 1.1id選擇器 1.2型別選擇器 element 1.3類選擇器 1.4通配選擇器 1.5分組選擇器 2.結構選擇器 2.1層級選擇器 2.2.1包含選擇器 2.2.2子選擇器 parent child 2.2.3兄弟選擇器 prev siblings 3.子元素選擇器 4....
第二章《jQuery選擇器（一）》
在學習jquery前，先要弄明白dom物件與jquery物件的區別 簡單通俗理解的話可以認為dom物件就是頁面中的某乙個具體的文字標籤，而jquery物件是基於dom物件之上的，我們可以把某個dom物件轉化為jquery物件。只有是jquery物件才能使用jquery中的方法以及屬性。例 docum...
鋒利的jQuery第二章 選擇器
鋒利的jquery第二章 選擇器 id為one,class為one的div class為mini id為two，class為one,title為test class為mini,title為other class為mini，title為test class為mini class為mini class為...