jquery屬性過濾選擇器
A. jQuery過濾選擇器怎麼實現列表隔行變色的效果
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
</ul>
<script>
$(function(){
$("ul li:nth-child(odd)").css("background-color","blue"); //單數行背景色回
$("ul li:nth-child(even)").css("background-color","red"); //雙數答行背景色
});
</script>
B. jquery過濾選擇器有哪些
（1）Jquery中簡單過濾選擇器
jquery根據某一類過濾規則進行元素匹配，書寫時以：版開頭，是Jquery中應用最為廣泛的選權擇器
（2）簡單過濾選擇器的基本語法
①first()或者：first 獲取第一個元素
②last()或者：last 獲取最後一個元素
③：not(selector)獲取除開給定選擇器的其他元素
④：even獲取索引為偶數的元素，索引從0開始
⑤：odd獲取索引為奇數的元素，索引從0開始
⑥：eq(index)獲取制定索引元素，從0開始
⑦：gt(index)獲取大於給定索引的元素，從0開始
⑧：lt(index)獲取小於給定索引的元素，從0開始
⑨：header獲取標題類型元素
⑩:animated獲取正在執行動畫效果的元素
C. 如何把變數傳入jQuery的屬性過濾選擇器
vararr=["idName","idAddress",...];
//要拼接成字元串形式
varselect="[id^="+arr[i]+"]";
$(select)
D. 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」，選取所有被選中項元素，如下拉列表框、列表框。
E. jquery屬性過濾器選擇器
我想 你這里ID可能是會變化的吧
可以直接使用$(this).next("span").css("imgSpanPos");
F. 8.jquery過濾選擇器有哪些
$("#myDiv");
<div id="myDiv">id="myDiv"</div>（比較常用）
$("div")；
<div>DIV1</div>
$(".myClass");
<div class="myClass">div class="myClass"</div>（比較常用）
$("*") ；
<div>DIV</div><span>SPAN</span><p>P</p>
$("div,span,p.myClass") ；
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
$("form input") ；
<input name="name" />,
<input name="newsletter" />（比較常用）
$("input[name='newsletter']").attr("checked", true);
<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, （比較常用）
前面是選擇器內寫法，後面是得容到的結果。
G. jquery選中元素使用哪些選擇器
JQuery 選擇器
在 HTML DOM 術語中：選擇器允許您對 DOM 元素內組或單個 DOM 節點進行容操作。
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery 參考手冊 - 選擇器
H. jQuery基本選擇器選擇元素使用介紹
復制代碼
代碼如下:
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
1.基本選擇器：是jQuery中使用最頻繁的選擇器，它由元素Id、Class、元素名、多個選擇符組成，通過基本選擇器可以實現大多數頁面元素的查找
jQuery選擇器詳解
根據所獲取頁面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中，在過濾選擇器中有可以分為：簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器6種
-->
<title></title>
<!--使用jQuery基本選擇器選擇元素：一個頁麵包含兩個<div>標記，其中一個用於設置ID屬性，另一個用於設置Class屬性；我們再增加一個<span>標記，全部元素初始值均為隱藏，然後通過jQuery基本選擇器顯示相應的頁面標記。-->
<script
src="jquery-1.9.1.js"
type="text/javascript"></script>
<style
type="text/css">
body{font-size:12px;text-align:center;}
.clsFrame{width:300px;height:100px}
.clsFrame
div,span{display:none;float:left;width:65px;height:65px;border:solid
1px
#ccc;margin:8px}
.clsOne{background-color:#eee}
</style>
<script
type="text/javascript">
$(function
()
{
//ID匹配元素
$('#divOne').css('display',
'block');
})
$(function
()
{
//元素名匹配元素
$('div
span').css('display',
'block');
})
$(function
()
{
//類匹配元素
$('.clsFrame
.clsOne').css('display',
'block');
})
$(function
()
{
//匹配所有元素
$('*').css('display',
'block');
})
$(function
()
{
//合並匹配元素
$('#divOne,span').css('display',
'block');
})
</script>
</head>
<body>
<div
class="clsFrame">
<div
id="divOne">
ID</div>
<div
class="clsOne">
CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>
I. jquery 選擇器 屬性可以用<比較嗎
並沒有，所有屬性選擇器如下。
屬性過濾選擇器
屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素。
♠ [attribute]
描述：選取擁有此屬性的元素。
返回：集合元素。
示例：$("div[id]")選取擁有屬性id的元素。
♠ [attribute=value]
描述：選取屬性的值為value的元素。
返回：集合元素。
示例：$("div[title=test]")選取屬性title為"test"的<div>元素。
♠ [attribute!=value]
描述：選取屬性的值不等於value的元素。
返回：集合元素。
示例：$("div[title!=test]")選取屬性title不等於"test"的<div>元素。（註：沒有屬性title的<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]
描述：選取屬性等於給定字元串或以該字元串為前綴（該字元串後跟一個連字元「-」）的元素。
返回：集合元素。
示例：$("div[title|='en']")選取屬性title等於en或以en為前綴（該字元串後跟一個連字元『-』）的元素。
♠ [attribute~=value]
描述：選取屬性用空格分隔的值中包含一個給定的值的元素。
返回：集合元素。
示例：$("div[title~='uk']")選取屬性title用空格分隔的值中包含字元uk的元素。
♠ [attribute1][attribute2][attributeN]
描述：用屬性選擇器合並成一個復古屬性選擇器，滿足多個條件。每選擇一次，縮小一次范圍。
返回：集合元素。
示例：$("div[id][title$='test']")選取擁有屬性id，並且屬性title以"test"結束的<div>元素。
所有jquery選擇器可參照我寫的博客：http://www.cnblogs.com/weilan/p/7152216.html
J. 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程序設計有所幫助。