请选择 进入手机版 | 继续访问电脑版

10模板

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 3313|回复: 2

get与eq的区别

[复制链接]

1288

主题

1801

帖子

4609

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4609
发表于 2017-3-2 11:29:32 | 显示全部楼层 |阅读模式

.eq()  减少匹配元素的集合,根据index索引值,精确指定索引对象。
.get() 通过检索匹配jQuery对象得到对应的DOM元素。
同样是返回元素,那么eq与get有什么区别呢?

eq返回的是一个jQuery对象,get返回的是一个DOM对象。举个例子:

$( "li" ).get( 0 ).css("color", "red"); //错误
$( "li" ).eq( 0 ).css("color", "red"); //正确
get方法本质上是把jQuery对象转换成DOM对象,但是css属于jQuery构造器的,DOM是不存在这个方法的,如果需要用jQuery的方法,我们必须这样写:

var li = $( "li" ).get( 0 );
$( li ).css("color", "red"); //用$包装
取出DOM对象li,然后用$再次包装,使之转变成jQuery对象,才能调用css方法,这样要分2步写太麻烦了,所以jQuery给我们提供了一个便捷方法eq()。

eq()的实现原理就是在上面代码中的把eq方法内部转成jQuery对象:

eq: function( i ) {
    var len = this.length,
        j = +i + ( i < 0 ? len : 0 );
    return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
上面实现代码的逻辑就是跟get是一样的,区别就是通过了pushStack产生了一个新的jQuery对象。

jQuery的考虑很周到,通过eq方法只能产生一个新的对象,但是如果需要的是一个合集对象要怎么处理?因此jQuery便提供了一个slice方法:

语法:

.slice( start [, end ] )
作用:

根据指定的下标范围,过滤匹配的元素集合,并生成一个新的 jQuery 对象。

因为是数组对象,意味着我们可以用silce来直接取值了,所以针对合集对象我们可以这样写代码:

var arr = []
arr.push( this.slice(start[,end]) )     
this.pushStack(arr)
这个this指的是jQuery对象,因为jQuery对象是数组集合,所以我们可以通过原生的silce方法直接取到集合数,然后通过包装处理即可了。

slice: function() {
    return this.pushStack( slice.apply( this, arguments ) );
},
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
  6. <title></title>
  7. </head>
  8. <body>
  9.    

  10. <table border="1">
  11. <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  12. <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  13. <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  14. </table>

  15. <ul>
  16. <li>list item 1</li>
  17. <li>list item 2</li>
  18. <li>list item 3</li>
  19. <li>list item 4</li>
  20. <li>list item 5</li>
  21. </ul>


  22. <script type="text/javascript">

  23.   $("td:eq(2)").css("color", "red")


  24.   $('li').eq(2).css('background-color', 'red');
  25.   $('li').eq(-2).css('background-color', 'red');

  26. </script>
  27. </body>
  28. </html>
复制代码
asdsadsa
回复

使用道具 举报

22

主题

38

帖子

248

积分

实习版主

大神

Rank: 7Rank: 7Rank: 7

积分
248
发表于 2017-4-18 08:02:36 来自手机 | 显示全部楼层
怎么回复不可靠
回复 支持 反对

使用道具 举报

22

主题

38

帖子

248

积分

实习版主

大神

Rank: 7Rank: 7Rank: 7

积分
248
发表于 2017-5-14 11:41:14 来自手机 | 显示全部楼层
bicuspidooo
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|10模板  

GMT+8, 2018-4-20 18:35 , Processed in 0.382876 second(s), 22 queries .

快速回复 返回顶部 返回列表