使用jQuery选择出来的元素与数组非常类似,可以通过jQuery提供的一系列方法对其进行处理,包括长度、查找某个元素,截取某个段落等。
1.获取元素的个数。
在jQuery中可以通过size()方法获取选择器中元素的个数,它类似数组中的length属性,返回整数值,例如:
$("img").size()
获取页面中,所有图片<img>的数目
如下是一个实例,通过不断的点击添加div块并计算页面中的<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的数目,(此时还没有div块)
$(document.body).append($("<div>" + i + "</div>")); //添加一个div块
$("#number").html(i);
}
</script>
页面中一共有<span>0</span>个DIV块。单击鼠标添加
2.提取元素
在jQuery中选择器中,如果想提取某个元素,最直接的方法是采用方括号加序号的形式,例如;
$("img[title]")[1]
获取了所有设置了title属性的img标记中的第二个元素。jQuery也提供了get(index)方法来提取元素,以下的代码与上面的完全等效
$("img[title]")get(1)
get方法在不设置任何参数时,可以将元素转化为一个元素对象的数组,如下的例子:
复制代码 代码如下:
<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>" + ndiv[i].innerHTML + "</div>"));
}
$(function(){
var aDiv = $("div").get();//转化为div对象数组
displayleb(aDiv.reverse());
});
</script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
上面代码将页面本身的6个<div>块用get()方法转化为数组,然后用数组反序reverse(),并传给displayleb()函数,再将其一个个现在页面中。
get(index)方法可以获取指定位置的元素,反过来,index(element)方法可以查找元素的element所处的位置。例如