㈠ jquery有幾種選擇器
jQuery選擇器一般分為四種
一、基本選擇器
基本選擇器是jQuery中最常用也是最簡單的選擇器，它通過元素的id、class和標簽名等來查找DOM元素。
1、ID選擇器 #id
描述：根據給定的id匹配一個元素， 返回單個元素（註：在網頁中，id名稱不能重復）
示例：$("#test") 選取 id 為 test 的元素
2、類選擇器 .class
描述：根據給定的類名匹配元素，返回元素集合
示例：$(".test") 選取所有class為test的元素
3、元素(標簽)選擇器 element
描述：根據給定的元素名匹配元素，返回元素集合
示例：$("p") 選取所有的<p>元素 $("div") :選取所有的div標簽
4、*
描述：匹配所有元素，返回元素集合
示例：$("*") 選取所有的元素
5、selector1，selector2,...,selectorN（並集選擇器）
描述：將每個選擇器匹配到的元素合並後一起返回，返回合並後的元素集合
示例：$("p,span,p.myClass") 選取所有<p>,<span>和class為myClass的<p>標簽的元素集合
二、層次選擇器
層次選擇器根據層次關系獲取特定元素。
1、後代選擇器
示例：$("p span") 選取<p>元素里的所有的<span>元素（註：後代選擇器選擇父元素所有指定選擇的元素，不管是兒子級，還是孫子級）
2、子選擇器 $("parent>child")
示例：$("p>span") 選擇<p>元素下的所有<span>元素 （註：子選擇器只選擇直屬於父元素的子元素）
3、同輩選擇器 $("prev+next")
描述：選取緊接在prev元素後的next元素，返回元素集合
示例：$(".one+p") 選取class為one的下一個<p>同輩元素集合
4、同輩選擇器 $("prev~siblings")
描述：選取prev元素後的所有siblings元素，返回元素集合
示例：$("#two~p")選取id為two的元素後所有<p>同輩元素集合
三、過濾選擇器
1>基本過濾選擇器
1、 :first
描述：選取第一個元素，返回單個元素
示例：$("p:first") 選取所有<p>元素中第一個<p>元素
2、 :last
描述：選取最後一個元素，返回單個元素
示例：$("p:last") 選取所有<p>元素中最後一個<p>元素
3、 :not(selector)
描述：去除所有與給定選擇器匹配的元素，返回元素集合
示例：$("input:not(.myClass)") 選取class不是myClass的<input>元素
4、 :even
描述：選取索引是偶數的所有元素，索引從0開始，返回元素集合
5、 :odd
描述：選取索引是奇數的所有元素，索引從0開始，返回元素集合
6、 :eq(index)
描述：選取索引等於index的元素，索引從0開始，返回單個元素
7、 :gt(index)
描述：選取索引大於index的元素，索引從0開始，返回元素集合
8、 :lt(index)
描述：選取索引小於於index的元素，索引從0開始，返回元素集合
9、 :focus
描述：選取當前獲取焦點的元素
2>內容過濾選擇器
1、:contains(text)
描述：選取含有文本內容為text的元素，返回元素集合
示例：$("p:contains('我')") 選取含有文本「我」的元素
2、:empty
描述：選取不包含子元素或者文本元素的空元素，返回元素集合
示例：$("p:empty") 選取不包含子元素或者文本元素的空<p>元素（<p></p>）
3、:has(selector)
描述：選取含有選擇器所匹配的元素的元素，返回元素集合
示例：$("p:has(p)") 選取含有<p>元素的<p>元素（<p><p/></p>）
4、:parent
描述：選取含有子元素或者文本的元素，返回元素集合
示例：$("p:parent") 選取含有子元素或者文本元素的<p>元素（<p><p/></p>或者<p>文本</p>）
3>可見性過濾選擇器
1、:hidden
描述：選取所有不可見的元素，返回元素集合
2、:visible
描述：選取所有可見的元素，返回元素集合
4>屬性過濾選擇器（返回元素集合）
1、[attribute]
示例：$("p[id]") 選取擁有id屬性的p元素
2、[attribute=value]
示例：$("input[name=text]") 選取擁有name屬性等於text的input元素
3、[attribute!=value]
示例：$("input[name!=text]") 選取擁有name屬性不等於text的input元素
4、[attribute^=value]
示例：$("input[name^=text]") 選取擁有name屬性以text開始的input元素
5、[attribute$=value]
示例：$("input[name$=text]") 選取擁有name屬性以text結束的input元素
6、[attribute*=value]
示例：$("input[name*=text]") 選取擁有name屬性含有text的input元素
7、[attribute~=value]
示例：$("input[class~=text]") 選取擁有class屬性以空格分割的值中含有text的input元素
8、[attribute1][attribute2][attributeN]
描述：合並多個屬性過濾選擇器
5>表單對象屬性過濾選擇器（返回元素集合）
1、:enabled
描述：選取所有可用元素
2、:disabled
描述：選取所有不可用元素
3、:checked
描述：選取所有被選中的元素（單選框，復選框）
示例：$("input:checked") 選取所有被選中的<input>元素
4、:selected
描述：選取所有被選中的選項元素（下拉列表）
示例：$("select option:selected") 選取所有被選中的選項元素
四、表單選擇器（返回元素集合，使用相似）
1、:text
描述：選擇所有的單行文本框
示例：$(":text")選取所有的單行文本框
2、:password
描述：選擇所有的密碼框
3、:button
描述：選擇所有的按鈕
4、:checkbox
描述：選擇所有的多選框
㈡ jquery中什麼是過濾選擇器
可以來參源考這個。。
http://www.cnblogs.com/yakun/p/3830677.html
㈢ jquery中簡單過濾選擇器有哪些
1. 基本過濾選擇器
a) ":first"，選取第一個元素，別忘記它也是被放在一個集合里哦！因為JQuery它是DOM對象的一個集合。如，「$("tr:first")」返回所有tr元素的第一個tr元素，它仍然被保存在集合中。
b)「:last」，選取最後一個元素。如，「$("tr:last")」返回所有tr元素的最後一個tr元素，它仍然被保存在集合中。
c)「:not(selector)」，去除所有與給定選擇器匹配的元素。如，「$("input:not(:checked)")」返回所有input元素，但去除被選中的元素（單選框、多選框）。
d)「:even」，選取所有元素中偶數的元素。因為JQuery對象是一個集合，這里的偶數指的就是集合的索引，索引從0開始。
e) 「:odd」，選取所有元素中奇數的元素，索引從0開始。
f) 「:eq(index)」，選取指定索引的元素，索引從0開始。
g) 「:gt(index)」，選取索引大於指定index的元素，索引從0開始。
h) 「:lt(index)」，選取索引小於指定index的元素，索引從0開始。
i) 「:header」，選取所有的標題元素，如hq、h2等。
j) 「:animated」，選取當前正在執行的所有動畫元素。
2). 內容過濾選擇器
它是對元素和文本內容的操作。
a) 「:contains(text)」，選取包含text文本內容的元素。
b) 「:empty」，選取不包含子元素或者文本節點的空元素。
c) 「:has(selector)」，選取含有選擇器所匹配的元素的元素。
d) 「:parent」，選取含有子元素或文本節點的元素。（它是一個父節點）
3). 可見性過濾選擇器
根據元素的可見與不可見狀態來選取元素。
「:hidden」，選取所有不可見元素。
「:visible」，選擇所有可見元素。
可見選擇器：hidden 不僅包含樣式屬性 display 為 none 的元素，也包含文本隱藏域 (<input type=「hidden」>)和 visible:hidden 之類的元素。
4).屬性過濾選擇器
通過元素的屬性來選取相應的元素。
a) 「[attribute]」，選取擁有此屬性的元素。
b) 「[attribute=value]」，選取指定屬性值為value的所有元素。
c) 「[attribute !=value]」，選取屬性值不為value的所有元素。
d) 「[attribute ^= value]」，選取屬性值以value開始的所有元素。
e) 「[attribute $= value]」，選取屬性值以value結束的所有元素。
f) 「[attribute *= value]」，選取屬性值包含value的所有元素。
g) 「[selector1] [selector2]…[selectorN]」，復合性選擇器，首先經[selector1]選擇返回集合A，集合A再經過[selector2]選擇返回集合B，集合B再經過[selectorN]選擇返回結果集合。
5). 子元素過濾選擇器
一看名字便是，它是對某一元素的子元素進行選取的。
a) 「:nth-child(index/even/odd)」，選取索引為index的元素、索引為偶數的元素、索引為奇數的元素。
l nth-child(even/odd)：能選取每個父元素下的索引值為偶(奇)數的元素。
l nth-child(2)：能選取每個父元素下的索引值為 2 的元素。
l nth-child(3n)：能選取每個父元素下的索引值是 3 的倍數的元素。
l nth-child(3n + 1)：能選取每個父元素下的索引值是 3n + 1的元素。
b) 「:first-child」，選取第一個子元素。
c) 「:last-child」，選取最後一個子元素。
d) 「:only-child」，選取唯一子元素，它的父元素只有它這一個子元素。
6). 表單過濾選擇器
選取表單元素的過濾選擇器。
a) 「:input」，選取所有<input>、<textarea>、<select >和<button>元素。
b) 「:text」，選取所有的文本框元素。
c) 「:password」，選取所有的密碼框元素。
d) 「:radio」，選取所有的單選框元素。
e) 「:checkbox」，選取所有的多選框元素。
f) 「:submit」，選取所有的提交按鈕元素。
g) 「:image」，選取所有的圖像按鈕元素。
h) 「:reset」，選取所有重置按鈕元素。
i) 「:button」，選取所有按鈕元素。
j) 「:file」，選取所有文件上傳域元素。
k) 「:hidden」，選取所有不可見元素。
7).表單對象屬性過濾選擇器
選取表單元素屬性的過濾選擇器。
「:enabled」，選取所有可用元素。
「:disabled」，選取所有不可用元素。
「:checked」，選取所有被選中的元素，如單選框、復選框。
「:selected」，選取所有被選中項元素，如下拉列表框、列表框。
㈣ JQuery中基礎過濾選擇器用法實例分析
本文實例講述了JQuery中基礎過濾選擇器用法。分享給大家供大家參考。具體如下：
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>基礎過濾選擇器</title>
<style
type="text/css">
#main{
width:600px;
border:1px
solid
green;
margin:auto;
padding:10px;
}
#tbl{
border-collapse:collapse;
border-top:1px
solid
red;
border-left:1px
solid
red;
margin:auto;
}
#tbl
td{
width:60px;
height:60px;
border-collapse:collapse;
border-bottom:1px
solid
red;
border-right:1px
solid
red;
}
</style>
<script
src="jquery-1.6.2.min.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(function
()
{
//=============舉例1========================
//:first
說明:
匹配找到的第一個元素
//....<1>修改第一個單元格的背景色
//var
$tds
=
$("#tbl
td:first");
//$tds.css("backgroundColor",
"blue");
//....<2>修改第一行的背景色
//var
$trs
=
$("#tbl
tr:first");
//$trs.css("backgroundColor",
"blue");
//=============舉例2========================
//:last
說明:
匹配找到的最後一個元素.與
:first
相對應.
//...<1>修改隨後一個單元格的背景色
//var
$tds
=
$("#tbl
td:last");
//$tds.css("backgroundColor",
"blue");
//=============舉例3========================
//:not(selector)
去除所有與給定選擇器匹配的元素.有點類似於」非」
//...<1>把所有class不為tdClass的列的文本進行修改
//var
$tds
=
$("#tbl
td:not(.tdClass)");
//$tds.text("Not
tdClass");
//=============舉例4========================
//:even
說明:
匹配所有索引值為偶數的元素，從
0
開始計數.js的數組都是從0開始計數的.
//例如要選擇table中的行,因為是從0開始計數,所以table中的第一個tr就為偶數0.
//...<1>把索引值為偶數的行變成黃色
//var
$trs
=
$("#tbl
tr:even");
//$trs.css("backgroundColor",
"yellow");
//=============舉例5========================
//:
odd
說明:
匹配所有索引值為奇數的元素,和:even對應,從
0
開始計數.
//var
$trs
=
$("#tbl
tr:odd");
//$trs.css("backgroundColor",
"yellow");
//=============舉例6========================
//:eq(index)
說明:
匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括弧裡面的是索引值,不是元素排列數.
//...<1>設置第二個單元格的背景色
//var
$tds
=
$("#tbl
td:eq(1)");
//$tds.css("backgroundColor",
"gray");
//=============舉例6========================
//:gt(index)
說明:
匹配所有大於給定索引值的元素.
//...<1>把下標索引大於1的所有單元格背景色設置為灰色
//var
$tds
=
$("#tbl
td:gt(1)");
//$tds.css("backgroundColor",
"gray");
//=============舉例7========================
//:lt(index)
說明:
匹配所有小於給定索引值的元素.
//...<1>把下標索引小於3的所有單元格背景色設置為灰色
var
$tds
=
$("#tbl
td:lt(3)");
$tds.css("backgroundColor",
"gray");
//=============舉例8========================
//:header(固定寫法)
說明:
匹配如
h1,
h2,
h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素.
//...<1>把所有的h標簽背景色進行修改
var
$hs
=
$(":header");
$hs.css("backgroundColor",
"gold");
//=============舉例8========================
//slice
獲取下標范圍內元素
var
$trs
=
$("#tbl
tr").slice(1,
3);
$trs.css("backgroundColor",
"gold");
});
</script>
</head>
<body>
<div
id="main">
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<table
id="tbl">
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td
class="tdClass">2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>3</td><td>3</td>
</tr>
<tr>
<td>4</td><td>4</td><td
class="tdClass">4</td>
</tr>
<tr>
<td>5</td><td>5</td><td>5</td>
</tr>
<tr>
<td>6</td><td>6</td><td
class="tdClass">6</td>
</tr>
</table>
</div>
</body>
</html>
希望本文所述對大家的jQuery程序設計有所幫助。