- CSS選擇器
| 選擇器 |
語法 |
描述 |
示例 |
| 標(biāo)簽選擇器 |
E{
CSS規(guī)則;
}
|
以文檔元素作為選擇符 |
td{
font-size:14px;
width:200px;
}
a{
text-decoration:none;
}
|
| ID選擇器 |
#ID{
css規(guī)則；
}
|
以文檔元素的唯一標(biāo)識(shí)符ID作為選擇符 |
#note{
font-size:14px;
width:200px;
}
|
| 類選擇器 |
E.className{
CSS規(guī)則；
}
|
以文檔元素的Class作為選擇符 |
div.note{
font-size:14px;
}
.dream{
font-size:14px;
}
|
| 群組選擇器 |
E1,E2,E3{
css規(guī)則；
}
|
多個(gè)選擇符應(yīng)用同樣的樣式規(guī)則 |
td,p,div.a{
font-size:14px;
}
|
| 后代選擇器 |
E F{
css規(guī)則；
}
|
元素E的任意后代元素F |
#link a{
color:red;
}
|
| 通配選擇符 |
*{
CSS規(guī)則；
}
|
以文檔的所有元素作為選擇符 |
*{
font-size:14px;
}
|
2. jQuery選擇器。
基本選擇器：
| 選擇器 |
描述 |
返回 |
示例 |
| #id |
根據(jù)給定的id匹配一個(gè)元素 |
單個(gè)元素 |
$("#test")選取id為test的元素 |
| .class |
根據(jù)給定的類名匹配元素 |
集合元素 |
$(".test")選取所有class為test的元素 |
| element |
根據(jù)給定的元素名匹配元素 |
集合元素 |
$("p")選取所有的<p>元素 |
| * |
匹配所有元素 |
集合元素 |
$("*")選取所有的元素 |
| selector1,selector2,...,selectorN |
將每一個(gè)選擇器匹配到的元素合并后一起返回 |
集合元素 |
$("div,span,p.myclass")選取所有<div>,<span>和擁有class為myClass的<p>標(biāo)簽的一組元素 |
層次選擇器：
| 選擇器 |
描述 |
返回 |
示例 |
| $("ancestor desendant") |
選取ancestor元素里的所有
descendant（后代）元素
|
集合元素 |
$("div span")選取<div>里的所有的
<span>元素
|
| $("parent>child") |
選取parent元素下的child(子)元素 |
集合元素 |
$("div>span")選取<div>元素下元素
名是<span>的子元素
|
|
$("prev+next")
|
選取緊接在prev元素后的next元素 |
prev唯一，即返回單一元素，
否則為集合元素
|
$(".one+div")選取class為one
的下一個(gè)div元素，等同與
$(".one").next("div")
|
| $("prev~siblings") |
選取prev元素后的所有siblings元素 |
集合元素 |
$("#two~div")獲取id為two的元素后面的所有<div>
兄弟元素，等同與
$("#two").nextAll("div")
|
| $("#prev").siblings("div") |
選取與id為prev的所有同輩元素 |
集合元素 |
|
3. 過濾選擇器：以：號(hào)開頭
基本過濾選擇器：
| 選擇器 |
描述 |
返回 |
示例 |
| :first |
選取第一元素 |
單個(gè)元素 |
$("div:first")選取所有<div>元素中第一個(gè)<div>元素 |
| :last |
選取最后一個(gè)元素 |
單個(gè)元素 |
$("div:last")選取所有<div>元素中最后一個(gè)<div>元素 |
| :not(selector) |
去除所有與給定選擇器匹配的元素 |
集合元素 |
$("input:not(.myClass)")選取Class不是myClass的所有的input元素 |
| :even |
選取索引是偶數(shù)的所有元素，從0計(jì)起 |
集合元素 |
$("input:even")選取索引為偶數(shù)的<input>元素 |
| :odd |
選取索引是奇數(shù)的所有元素，從0記起 |
集合元素 |
$("input:odd")選取索引為奇數(shù)的<input>元素 |
| :eq(index) |
選取索引是index的元素，index從0記起 |
單個(gè)元素 |
$("input:eq(index)")選取索引是index的<input>元素 |
| :gt(index) |
選取索引大于index的元素 |
集合元素 |
$("input:gt(index)")選取索引大于index的<input>元素 |
| :lt(index) |
選取索引小于index的元素 |
集合元素 |
$("input:lt(index)")選取索引小于index的<input>元素 |
| :header |
選取所有的標(biāo)題元素，例如h1,h2,h3等 |
集合元素 |
$(":header")選取網(wǎng)頁中所有的<h1>,<h2>,<h3>等元素 |
| :animated |
選取當(dāng)前正在執(zhí)行動(dòng)畫的所有元素 |
集合元素 |
$("div:animated")選取網(wǎng)頁中正在執(zhí)行動(dòng)畫的<div>元素 |
內(nèi)容過濾選擇器
| 選擇器 |
描述 |
返回 |
示例 |
| :contains(text) |
選取含有文本內(nèi)容為“text”的元素 |
集合元素 |
$("div:contains('我')")選取含有文本“我”的<div>元素 |
| :empty |
選取不包含子元素或者文本的空元素 |
集合元素 |
$("div:empty")選取不包含子元素（包括文本元素）的<div>空元素 |
| :has(selector) |
選取含有選擇器所匹配的元素的元素 |
集合元素 |
$("div:has(p)")選取含有<p>元素的<div>元素 |
| :parent |
選取含有子元素或者文本的元素 |
集合元素 |
$("div:parent")選取擁有子元素（包括文本元素）的<div>元素 |
可見性過濾選擇器
| 選擇器 |
描述 |
返回 |
示例 |
| :hidden |
選取所有不可見的元素 |
集合元素 |
$(":hidden")選取所有不可見的元素。包括<input type="hidden"/>，
<div style="display:none;">和<div style="visibility:hidden;">
等元素。如果只想選不可見的<input>元素，可用$("input:hidden")
|
| :visible |
選取所有可見的元素 |
集合元素 |
$("div:visible")選取所有可見的<div>元素 |
屬性過濾選擇器
| 選擇器 |
描述 |
返回 |
示例 |
| [attribute] |
選取擁有此屬性的元素 |
集合元素 |
$("div[id]")選取擁有屬性id的<div>元素 |
| [attribute=value] |
選取屬性的值為value的元素 |
集合元素 |
$("div[title=test]")選取屬性title的值為"test"的<div>元素 |
| [attribute!=value] |
選取屬性的值不為value的元素 |
集合元素 |
$("div[title!=test]")選取屬性title的值不為"test“的<div>元素 |
| [attribute^=value] |
選取屬性的值以value開始的元素 |
集合元素 |
$("div[title^=test]")選取屬性title的值以"test”開始的<div>元素 |
| [attribute$=value] |
選取屬性的值以value結(jié)束的元素 |
集合元素 |
$("div[title$=test]")選取屬性title的值以"test"結(jié)束的<div>元素 |
| [attribute*=value] |
選取屬性的值含有value的元素 |
集合元素 |
$("div[title*=test]")選取屬性title的值含有"test"的<div>元素 |
|
[selector1][selector2
][selectorN]
|
用屬性選擇器合并成一個(gè)復(fù)合選擇器，
滿足多個(gè)條件，沒選擇一次，
縮小一次選擇范圍
|
集合元素 |
$("div[id][title=test]")選取擁有屬性id，且屬性title等于"test"的
<div>元素
|
子元素過濾選擇器
| 選擇器 |
描述 |
返回 |
示例 |
| :nth-child |
選取每個(gè)父元素下的第index個(gè)子元素或者奇偶元素
（index從1算起）
|
集合元素 |
$("div.one :nth-child(2)")選取class為one的
<div>元素下的第二個(gè)子元素
|
| :first-child |
選取每個(gè)父元素的第一個(gè)子元素 |
集合元素 |
$("ul li:first-child")選取每個(gè)<ul>中第一個(gè)<li>元素 |
| :last-child |
選取每個(gè)父元素的最后一個(gè)子元素 |
集合元素 |
$("ul li:last-child")選取每個(gè)<ul>中最后一個(gè)<li>元素 |
| :only-child |
如果某個(gè)元素是它父元素中的唯一一個(gè)，即被選中 |
集合元素 |
$("ul li:only-child")在<ul>中選取是唯一子元素的<li>元素 |
表單對(duì)象屬性過濾選擇器
| 選擇器 |
描述 |
返回 |
示例 |
| :enable |
選取所有可用元素 |
集合元素 |
$("#form1 :enable")選取id為form的表單內(nèi)所有可用的元素 |
| :disable |
選取所有不可用的元素 |
集合元素 |
$("#form1 :disable")選取id為form1的表單內(nèi)所有不可用的元素 |
| :checked |
選取所有被選中的元素(單選框、復(fù)選框) |
集合元素 |
$("input :checked")選取所有被選中的<input>元素 |
| :selected |
選取所有被選中的選項(xiàng)元素（下拉列表） |
集合元素 |
$("select :selected")選取所有被選中的選項(xiàng)元素 |
表單選擇器
| 選擇器 |
描述 |
返回 |
示例 |
| :input |
選取所有的<input>、<textarea>、<select>和<button>元素
|
集合元素 |
$(":input")選取所有的<input>、<textarea>、<select>和<button>元素 |
| :text |
選取所有的單行文本框 |
集合元素 |
$(":text")選取所有的單行文本框 |
| :password |
選取所有的密碼框 |
集合元素 |
$(":password“)選取所有的密碼框 |
| :radio |
選取所有的單選框 |
集合元素 |
$(":radio")選取所有的單選框 |
| :checkbox |
選取所有的多選框 |
集合元素 |
$(":checkbox")選取所有的多選框 |
| :submit |
選取所有的提交按鈕 |
集合元素 |
$(":submit")選取所有的提交按鈕 |
| :iamge |
選取所有的圖像按鈕 |
集合元素 |
$(":image")選取所有的圖像按鈕 |
| :reset |
選取所有的重置按鈕 |
集合元素 |
$(":reset")選取所有的重置按鈕 |
| :button |
選取所有的按鈕 |
集合元素 |
$(":button")選取所有的按鈕 |
| :file |
選取所有的上傳域 |
集合元素 |
$(":file")選取所有的上傳域 |
| :hidden |
選取所有不可見元素 |
|
|
|
