使用jQuery管理选择结果
使用jQuery选择出来的元素与数组非常类似,可以通过jQuery提供的一系列方法对其进行处理,包括长度、查找某个元素,截取某个段落等。
1.获取元素的个数。
在jQuery中可以通过size()方法获取选择器中元素的个数,它类似数组中的length属性,返回整数值,例如:
$("img").size()
获取页面中,所有图片<img>的数目
如下是一个实例,通过不断的点击添加div块并计算页面中的<div>块。
<style> div{ border:1pxsolid#003a75; background-color:#FFFF00; margin:5px; padding:20px; text-align:center; height:20px; width:20px; float:left; } } </style> <scripttype="text/javascript"> document.onclick=function(){ vari=$("div").size()+1;//获取div的数目,(此时还没有div块) $(document.body).append($("<div>"+i+"</div>"));//添加一个div块 $("#number").html(i); } </script>
页面中一共有<spanid="number">0</span>个DIV块。单击鼠标添加
2.提取元素
在jQuery中选择器中,如果想提取某个元素,最直接的方法是采用方括号加序号的形式,例如;
$("img[title]")[1]
获取了所有设置了title属性的img标记中的第二个元素。jQuery也提供了get(index)方法来提取元素,以下的代码与上面的完全等效
$("img[title]")get(1)
get方法在不设置任何参数时,可以将元素转化为一个元素对象的数组,如下的例子:
<style> div{ border:1pxsolid#003a75; background-color:#FFFF00; margin:5px; padding:20px; text-align:center; height:20px; width:20px; float:left; } } </style> <scripttype="text/javascript"> functiondisplayleb(ndiv){ for(vari=0;i<ndiv.length;i++) $(document.body).append($("<divstyle='background:"+ndiv[i].style.background+";'>"+ndiv[i].innerHTML+"</div>")); } $(function(){ varaDiv=$("div").get();//转化为div对象数组 displayleb(aDiv.reverse()); }); </script> <divstyle="background:#FFFFFF">1</div> <divstyle="background:#CCCCCC">2</div> <divstyle="background:#999999">3</div> <divstyle="background:#666666">4</div> <divstyle="background:#333333">5</div> <divstyle="background:#000000">6</div>
上面代码将页面本身的6个<div>块用get()方法转化为数组,然后用数组反序reverse(),并传给displayleb()函数,再将其一个个现在页面中。
get(index)方法可以获取指定位置的元素,反过来,index(element)方法可以查找元素的element所处的位置。例如
variNum=$("li").index($(li[title=isaac]")[0])
以上取<lititile="isaac">标记在整个<li>标记列表所处的位置,并将该位置返回给整数iNum.如下举例index(element)方法的典型运用。
例:用index()方法获取元素的序号
<style> div{ border:1pxsolid#003a75; background-color:#FFFF00; margin:5px; padding:20px; text-align:center; height:20px; width:20px; float:left; } } </style> <scripttype="text/javascript"> $(function(){ //divclick()添加单击函数 $("div").click(function(){ //将本身通过this关键字传入,获取自身的序号。 varindex=$("div").index(this)+1; $("#display").html(index.toString()); }) }); </script> <divstyle="background:#FFFFFF">1</div> <divstyle="background:#CCCCCC">2</div> <divstyle="background:#999999">3</div> <divstyle="background:#666666">4</div> <divstyle="background:#333333">5</div> <divstyle="background:#000000">6</div> 单击的是第<spanid="display"></span>个div。
以上代码块本身用this关键字传入index()方法中,获取自身的序号,并且利用click()添加事件,将序号显示出来。
3.添加、删除、过滤元素
除了获取选择元素外,jQuery还提供了一系列的方法来修改元素集合,例如用add()的方法添加元素。
$("img[alt]").add("img[title]")
以上代码将设置了alt元素的图像和说呀设置了title属性的图像组合在一起,供别的方法统一调运。它完全等同于
$("img[alt],img[title]")
例如,可以讲组合后的元素集统一添加css属性。
$("img[alt]").add("img[title]").addClass("altcss")
与add()方法相反,not()方法可以去除元素集合中的某些元素形成集合
$("li[title]").not("[title*=isaac]")
以上代码表示,选中所有设置了title属性的标记,但不包括title的值中包含"isaac"的<li>。
例:
<style> div{ border:1pxsolid#003a75; background-color:#FFFF00; margin:5px; padding:20px; text-align:center; height:20px; width:20px; float:left; } .altcss{ border:2pxsolid#000000; } } </style> <scripttype="text/javascript"> $(function(){ $("div").not(".green,#blueone").addClass("altcss"); }); </script> <div></div> <divid="blueone"></div> <div></div> <divclass="green"></div> <divclass="green"></div> <divclass="gray"></div> <div></div>
以上的Jquery通过not()的方法去掉风格为"green"和"blueone"的<div>块,给剩下的div块加altcss样式。
not()方法所接收的参数都不能包含特定的元素,只能是通过通用的表达式例如下面的代码是错误的
$("li[title]").not("img[title*=isaac]")
正确的写法是:
$("li[tile]").not("[title*=isaac]")
除了add()和not()外,jQuery还提供了更强大的filter()方法来筛选元素。filter()可以接受两种类型的参数,一种与not()方法一样,接受通用的表达式。代码如下:
$("li").filter("[title*=isaac]")
以上的代码表示:筛选出title值包含isaac字符串的li元素组合。
与
$("li[title*=isaac]")
所筛选的组合相同。
<scripttype="text/javascript"> $(function(){ $("div").addClass("css1").filter("[class*=middle]").addClass("css2"); }); </script>
<div></div> <divclass="middle"></div> <divclass="middle"></div> <divclass="middle"></div> <divclass="middle"></div> <div></div>