使用jQuery選擇出來(lái)的元素與數(shù)組非常類似，可以通過(guò)jQuery提供的一系列方法對(duì)其進(jìn)行處理，包括長(zhǎng)度、查找某個(gè)元素，截取某個(gè)段落等。

1.獲取元素的個(gè)數(shù)。

在jQuery中可以通過(guò)size()方法獲取選擇器中元素的個(gè)數(shù)，它類似數(shù)組中的length屬性，返回整數(shù)值，例如：

$("img").size()

獲取頁(yè)面中，所有圖片<img>的數(shù)目

如下是一個(gè)實(shí)例，通過(guò)不斷的點(diǎn)擊添加div塊并計(jì)算頁(yè)面中的<div>塊。

代碼如下:

<style>

div {

border: 1px solid #003a75;

background-color: #FFFF00;

margin: 5px;

padding: 20px;

text-align: center;

height: 20px;

width: 20px;

float: left;

}

}

</style>

<script type="text/javascript">

document.onclick = function() {

var i = $("div").size() + 1; //獲取div的數(shù)目，（此時(shí)還沒有div塊）

$(document.body).append($("<div>" + i + "</div>")); //添加一個(gè)div塊

$("#number").html(i);

}

</script>

頁(yè)面中一共有<span id="number">0</span>個(gè)DIV塊。單擊鼠標(biāo)添加

2.提取元素

在jQuery中選擇器中，如果想提取某個(gè)元素，最直接的方法是采用方括號(hào)加序號(hào)的形式，例如；

$("img[title]")[1]

獲取了所有設(shè)置了title屬性的img標(biāo)記中的第二個(gè)元素。jQuery也提供了get(index)方法來(lái)提取元素，以下的代碼與上面的完全等效

$("img[title]")get(1)

get方法在不設(shè)置任何參數(shù)時(shí)，可以將元素轉(zhuǎn)化為一個(gè)元素對(duì)象的數(shù)組，如下的例子：

代碼如下:

<style>

div {

border: 1px solid #003a75;

background-color: #FFFF00;

margin: 5px;

padding: 20px;

text-align: center;

height: 20px;

width: 20px;

float: left;

}

}

</style>

<script type="text/javascript">

function displayleb(ndiv) {

for (var i = 0; i < ndiv.length; i++)

$(document.body).append($("<div style='background:"+ndiv[i].style.background + ";'>" + ndiv[i].innerHTML + "</div>"));

}

$(function(){

var aDiv = $("div").get();//轉(zhuǎn)化為div對(duì)象數(shù)組

displayleb(aDiv.reverse());

});

</script>

<div style="background:#FFFFFF">1</div>

<div style="background:#CCCCCC">2</div>

<div style="background:#999999">3</div>

<div style="background:#666666">4</div>

<div style="background:#333333">5</div>

<div style="background:#000000">6</div>

上面代碼將頁(yè)面本身的6個(gè)<div>塊用get()方法轉(zhuǎn)化為數(shù)組，然后用數(shù)組反序reverse()，并傳給displayleb()函數(shù)，再將其一個(gè)個(gè)現(xiàn)在頁(yè)面中。

get(index)方法可以獲取指定位置的元素，反過(guò)來(lái)，index(element)方法可以查找元素的element所處的位置。例如

var iNum=$("li").index($(li[title=isaac]")[0])

以上取<li titile="isaac">標(biāo)記在整個(gè)<li>標(biāo)記列表所處的位置，并將該位置返回給整數(shù)iNum.如下舉例index(element)方法的典型運(yùn)用。

例：用index()方法獲取元素的序號(hào)

代碼如下:

<style>

div {

border: 1px solid #003a75;

background-color: #FFFF00;

margin: 5px;

padding: 20px;

text-align: center;

height: 20px;

width: 20px;

float: left;

}

}

</style>

<script type="text/javascript">

$(function() {

//div click()添加單擊函數(shù)

$("div").click(function() {

//將本身通過(guò)this關(guān)鍵字傳入，獲取自身的序號(hào)。

var index = $("div").index(this) + 1;

$("#display").html(index.toString());

})

});

</script>

<div style="background:#FFFFFF">1</div>

<div style="background:#CCCCCC">2</div>

<div style="background:#999999">3</div>

<div style="background:#666666">4</div>

<div style="background:#333333">5</div>

<div style="background:#000000">6</div>

單擊的是第<span id="display"></span>個(gè)div。

以上代碼塊本身用this關(guān)鍵字傳入index()方法中，獲取自身的序號(hào)，并且利用click()添加事件，將序號(hào)顯示出來(lái)。

3.添加、刪除、過(guò)濾元素

除了獲取選擇元素外，jQuery還提供了一系列的方法來(lái)修改元素集合，例如用add()的方法添加元素。

$("img[alt]").add("img[title]")

以上代碼將設(shè)置了alt元素的圖像和說(shuō)呀設(shè)置了title屬性的圖像組合在一起，供別的方法統(tǒng)一調(diào)運(yùn)。它完全等同于

$("img[alt],img[title]")

例如，可以講組合后的元素集統(tǒng)一添加css屬性。

$("img[alt]").add("img[title]").addClass("altcss")

與add()方法相反,not()方法可以去除元素集合中的某些元素形成集合

$("li[title]").not("[title*=isaac]")

以上代碼表示，選中所有設(shè)置了title屬性的標(biāo)記 ，但不包括title的值中包含"isaac"的<li>。

例：

代碼如下:

<style>

div {

border: 1px solid #003a75;

background-color: #FFFF00;

margin: 5px;

padding: 20px;

text-align: center;

height: 20px;

width: 20px;

float: left;

}

.altcss {

border: 2px solid #000000;

}

}

</style>

<script type="text/javascript">

$(function() {

$("div").not(".green, #blueone").addClass("altcss");

});

</script>

<div></div>

<div id="blueone"></div>

<div></div>

<div class="green"></div>

<div class="green"></div>

<div class="gray"></div>

<div></div>

以上的Jquery通過(guò)not()的方法去掉風(fēng)格為"green"和"blueone"的<div>塊，給剩下的div塊加altcss樣式。

not()方法所接收的參數(shù)都不能包含特定的元素，只能是通過(guò)通用的表達(dá)式例如下面的代碼是錯(cuò)誤的

$("li[title]").not("img[title*=isaac]")

正確的寫法是：

$("li[tile]").not("[title*=isaac]")

除了add()和not()外，jQuery還提供了更強(qiáng)大的filter()方法來(lái)篩選元素。filter()可以接受兩種類型的參數(shù)，一種與not()方法一樣，接受通用的表達(dá)式。代碼如下:

$("li").filter("[title*=isaac]")

以上的代碼表示:篩選出title值包含isaac字符串的li元素組合。

與

$("li[title*=isaac]")

所篩選的組合相同。

代碼如下:

<script type="text/javascript">

$(function() {

$("div").addClass("css1").filter("[class*=middle]").addClass("css2");

});

</script>

<div></div>

<div class="middle"></div>

<div class="middle"></div>

<div class="middle"></div>

<div class="middle"></div>

<div></div>

以上代碼中其中4個(gè)class屬性為middle，Jq先給所有的div塊都添加了css1樣式，然后通過(guò)filter()方法，把class中包含middle的div添加css2樣式。

在filter()的參數(shù)中，不能直接的等于匹配(=),只能使用前匹配(^=)、后匹配(&=)，或者任意匹配(*=).

filter()另外一種類型的參數(shù)是函數(shù)，對(duì)于返回ture元素匹配保留，否則排除集合。函數(shù)參數(shù)功能十分強(qiáng)大，可以讓用戶自定義篩選函數(shù)。

例如：

代碼如下:

<script type="text/javascript">

$(function() {

$("div").addClass("css1").filter(function(index) {

return index == 1 || $(this).attr("id") == "fourth";

}).addClass("css2");

});

</script>

<div id="first"></div>

<div id="second"></div>

<div id="third"></div>

<div id="fourth"></div>

<div id="fifth"></div>

以上jq執(zhí)行:

將所有的div添加css1然后利用filter()返回的函數(shù)將div列表中第一個(gè)（index為1），id是fourth的div元素篩選出來(lái)，添加css2.

4.查詢過(guò)濾新元素組

jq還提供了 一些很有的用的方法組合，通過(guò)查詢來(lái)獲取新元素組合。例如find()方法。通過(guò)匹配選擇器來(lái)篩選元素

$("p").find("span")

表示查找到<p>標(biāo)記下含有<span>標(biāo)記的組合

完全等于

代碼如下:

$("span",$("p"))

$(function(){

$("p").find("span").addClass("css1");

});

<p><span>Hello</span>, how are you?</p>

表示給Hello添加css1的樣式.

另外，還可以通過(guò)is()方法來(lái)檢測(cè)是否包含指定的元素，例如可以通過(guò)下面代碼檢測(cè)頁(yè)面中<div>塊中是否包含圖片。

var himg = $("div").is("img");

試想下，is()還可以結(jié)合filter()使用，是不是很愜意？

以上就是本文的全部?jī)?nèi)容了，雖然有點(diǎn)長(zhǎng)，但是還是建議小伙伴們仔細(xì)讀一下，希望大家能夠喜歡。

更多信息請(qǐng)查看IT技術(shù)專欄