get()与eq()的区别

最新推荐文章于 2021-07-19 07:04:46 发布

原创最新推荐文章于 2021-07-19 07:04:46 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文详细解析了jQuery中的get()和eq()方法的使用区别。get()用于从jQuery对象中获取对应的DOM元素，而eq()则用于获取jQuery对象链中特定位置的对象。通过实例展示了如何使用这两种方法来改变元素的样式。

get()

通过jQuery对象获取一个对应的DOM元素。

eq()

获取当前链式操作中第N个jQuery对象，返回jQuery对象。

换句话说： eq()获取的是jquery对象，能够使用jquery方法。get()获取的是原生dom元素，不能使用jquery方法。

上个栗子

<!DOCTYPE html>
<html lang="en">
<body>
  <ul>
    <li>line 1</li>
    <li>line 2</li>
    <li>line 3</li>
    <li>line 4</li>
  </ul>
</body>
</html>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
  console.log('-------------------------------------------------------');
  // 获取到一个dom，跟原生document.querySelector一样
  console.log("$('li').get(2)", $('li').get(2));

  console.log('-------------------------------------------------------');
  // 获取到一个jquery对象
  console.log("$('li').eq(2)", $('li').eq(2)); 

  console.log('-------------------------------------------------------');
  // 获取到一个dom 
  console.log("document.querySelector('li')", document.querySelector('li'));

  console.log('-------------------------------------------------------');
  // 获取到一个dom 
  console.log("document.querySelectorAll('li')[2]", document.querySelectorAll('li')[2]);

  $('li').get(0).style.color = 'red';
  $('li').eq(2).css('color', 'blue');
})
</script>

在这里插入图片描述