快捷導(dǎo)航

JQuery 學(xué)習(xí)筆記選擇器之五

更新時(shí)間：2009年07月23日 22:55:19 作者：

測(cè)試代碼如下,本例子中設(shè)置的著色比較多，哈，都是隨便輸些數(shù)字進(jìn)去的，感覺(jué)這樣更容易讓大家看到效果，呵，如果我的講的有哪不好麻煩大家多留言教導(dǎo)下^^

<!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" /> 
<script src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript"><!-- 
    $(function(){ 
            $("#aFirst").click(function(){ 
                    $("div[id]").each(function(){ 
                        $(this).css("background","#773300"); 
                    }) 
            }) 
            $("#aSecond").click(function(){ 
                    $("div[id = div2]").each(function(){ 
                         $(this).css("background","#8833ff"); 
                    }) 
            }) 
            $("#aThird").click(function(){ 
                    $("div[id != div2]").each(function(){ 
                         $(this).css("background","#87f289"); 
                    }) 
            }) 
            $("#aFourthly").click(function(){ 
                    $("div[name ^= DIV]").each(function(){ 
                         $(this).css("background","#140586"); 
                    }) 
            }) 
            $("#aFifthly").click(function(){ 
                    $("div[name $= ly]").each(function(){ 
                         $(this).css("background","#930584"); 
                    }) 
            }) 
            $("#aSixth").click(function(){ 
                    $("div[name *= th]").each(function(){ 
                         $(this).css("background","#099483"); 
                    }) 
            }) 
            $("#aSeventh").click(function(){ 
                    $("div[id][name !=Fifthly][name *= i]").each(function(){ 
                         $(this).css("background","#938607"); 
                    }) 
            }) 
     }) 
// --></script> 
<title>無(wú)標(biāo)題文檔</title> 
</head> 
<body> 
<a href="#" onclick="javascript:location.reload();">重置</a> 
<div id="div1" name ="DIV_First">div1</div> 
<div id="div2" name ="DIV_Second">div2</div> 
<div id="div3" name = "DIV_Third">div3</div> 
<div id="div4" name = "DIV_Fourthly">div4</div> 
<div id="div5" name="Fifthly">div5</div> 

<a href="#" id="aFirst">設(shè)置頁(yè)面所有DIV元素的背景顏色</a>| 
<a href="#" id="aSecond">設(shè)置第2個(gè)DIV的背景顏色</a>| 
<a href="#" id="aThird">設(shè)置除第2個(gè)DIV以外DIV的背景顏色</a>| 
<a href="#" id="aFourthly">設(shè)置name屬性值以DIV開(kāi)頭的元素</a>| 
<a href="#" id="aFifthly">設(shè)置name屬性值以ly結(jié)尾的元素</a>| 
<a href="#" id="aSixth">設(shè)置name屬性值包含th的元素</a>| 
<a href="#" id="aSeventh">綜合應(yīng)用</a> 

</body> 
</html>

1.$("selector [Attribute]")--注，以下直接簡(jiǎn)寫(xiě)為[Attribute]
描述：獲取selector選擇的元素集合里，擁有Attribute屬性的元素集合。應(yīng)該較為簡(jiǎn)單，在這就不做啥詳細(xì)說(shuō)明了，有不了解的跟下貼，哈
返回值：Array(Element)；
2.[attribute=value]
描述：獲取selector選擇的元素集合里，擁有Attribute屬性值等于Value的元素集合。
返回值：Array(Element)；
3.[attribute!=value]
描述：獲取selector選擇的元素集合里，擁有Attribute屬性值不等于Value的元素集合。
返回值：Array(Element)；
4.[attribute^=value]
描述：獲取selector選擇的元素集合里，擁有Attribute屬性值以Value開(kāi)頭的元素集合。相當(dāng)于正則的規(guī)范^^
返回值：Array(Element)；
5.[attribute$=value]
描述：獲取selector選擇的元素集合里，擁有Attribute屬性值以Value結(jié)尾的元素集合。相當(dāng)于正則的規(guī)范^^
返回值：Array(Element)；
6.[attribute*=value]
描述：獲取selector選擇的元素集合里，擁有Attribute屬性值包含Value的元素集合。
返回值：Array(Element)；
7.[selector1][selector2][selectorN]
描述：與第一章中，基本選擇器綜合應(yīng)用一樣，此方法也就是前6種的綜合版，就如我例子中$("div[id][name !=Fifthly][name *= i]")就是取所有的div元素中，擁有ID屬性&&name屬性!=Fifthly&&name屬性包含字符i的DIV元素的集合，大家用我例子試下就能很清楚的了解看到效果了，哈。好好利用此方法應(yīng)該很有用^^
返回值：Array(Element)；

您可能感興趣的文章: