程序员人生 网站导航

jquery中操作jQuery对象的eq和get的区别与使用方法--操作前台显示之利器

栏目:互联网时间:2014-11-23 09:29:26

:eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始,所有第1个元素的 index 值是 0(不是 1)。


get(index) 获得其中1个匹配的元素。index表示获得第几个匹配的元素。

这能够让你选择1个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。


下面我们通过1个简单的代码来讲明下:

<script type="text/javascript" src="http://u.myxzy.com/http://www.wfuyu.com/jquery//http://www.wfuyu.com/jquery/⑴.7.1.js"></script> <script> $("document").ready(function(){ alert($("li:eq(0)")); alert($("li").get(0)); }) </script> <ul> <li>Li⑴</li> <li>Li⑵</li> </ul>

得到的结果是

返回结果分别为:[object Object]和[object HTMLLIElement]

可知,eq返回的是1个http://www.wfuyu.com/jquery/对象,get返回的是1个html 对象数组。


使用eq来取得第1个li标签的color值:

$("li").eq(0).css("color")  //由于eq(num)返回的是个jq对象,所以可以用jq的方法css

使用get来取得第2个li标签的color值:

$("li").get(1).style.color  //由于get(num)返回的是个html对象,所以要使用传统的HTML对象方法,jq对象此时就没用了。


固然,你也能够get(num)后把对象转为jq的对象再进行操作:

$($("li").get(1)).css("color")


由此我们知道,由eq返回的http://www.wfuyu.com/jquery/对象,我们可以直接使用http://www.wfuyu.com/jquery/的方法如.css(),.html()等,而由get返回的是html数组对象要使用传统的HTML对象方法或转换成http://www.wfuyu.com/jquery/对象后再操作 。

NOTE:可以实现同种效果,那末建议统1使用eq,没必要再去费心理睬他们之间的区分甚么的了。


<script type="text/javascript" src="http://u.myxzy.com/http://www.wfuyu.com/jquery//http://www.wfuyu.com/jquery/⑴.7.1.js"></script> <script> $("document").ready(function(){ $("li:eq(0)").css("color",'red'); $("li").eq(1).css("color",'blue'); $("li").get(2).style.color='green'; $($("li").get(3)).css("color",'yellow'); }) </script> <ul> <li>li⑴</li> <li>li⑵</li> <li>li⑶</li> <li>li⑷</li> </ul>


------分隔线----------------------------
------分隔线----------------------------

最新技术推荐