jquery中eq和get的区别与使用方法

jQuery是一种流行的JavaScript库，它提供了一个简单且易于使用的UI库，并使DOM操作变得更加容易。在jQuery中，.eq()和.get()都是用于访问指定索引位置的元素的方法。它们有一些不同之处，使用时需要注意。下面将详细讲解它们的区别与使用方法。

一、区别

1. .eq()

• 使用方式：.eq(index)。
• 返回值：返回一个jQuery对象，即包含指定索引位置的元素的jQuery对象。如果索引位置不存在，则返回空对象。
• 特点：可以直接通过添加Class或者操作其他属性和行为来修改该jQuery对象的元素。

示例代码：

<!--HTML-->
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
</ul>

// jQuery代码
$('li').eq(2).addClass('active');

在这个示例中，.eq(2)选择了第三个<li>元素，并添加了一个名为“active”的类。

2. .get()

• 使用方式：.get(index)。
• 返回值：返回一个元素，即指定索引位置的DOM元素。如果索引位置不存在，则返回undefined。
• 特点：我们可以使用普通JavaScript函数（如.getAttribute()等）修改该元素的属性和行为。

示例代码：

<!--HTML-->
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
</ul>

// jQuery代码
$('li').get(2).setAttribute('id', 'third');

在这个示例中，.get(2)选择了第三个<li>元素，并通过.setAttribute()方法为其添加了一个id属性。

二、使用方法

使用.eq()

下面是一个使用.eq()方法的实例，我们将使用这个方法来切换两个下拉列表中的选项。

首先，我们需要下面的HTML代码：

<!--HTML-->
<select id="select-1">
  <option value="apple">苹果</option>
  <option value="orange">橙子</option>
  <option value="banana">香蕉</option>
</select>
<select id="select-2">
  <option value="red">红色</option>
  <option value="orange">橙色</option>
  <option value="yellow">黄色</option>
</select>

接下来，我们需要下面的jQuery代码：

// jQuery代码
$('#select-1').change(function() {
  var idx = $(this).prop('selectedIndex');
  $('#select-2').find('option').eq(idx).prop('selected', true);
});

在这个示例中，我们使用.eq()方法选择了#select-2 select元素中的选项，该选项与#select-1 select元素当前选择项的索引相同。如果#select-1选择了第二项，那么我们使用.eq()方法选择#select-2的第二项。

使用.get()

下面是一个使用.get()方法的实例，我们将使用这个方法来捕获图像的src属性，然后指定为链接的href属性。

首先，我们需要下面的HTML代码：

<!--HTML-->
<a href=""><img src="https://via.placeholder.com/150.png?text=image1"></a>
<a href=""><img src="https://via.placeholder.com/150.png?text=image2"></a>
<a href=""><img src="https://via.placeholder.com/150.png?text=image3"></a>

接下来，我们需要下面的jQuery代码：

// jQuery代码
$('a').each(function() {
  var imgUrl = $(this).find('img').get(0).src;
  $(this).attr('href', imgUrl);
});

在这个示例中，我们使用.get()方法选择了每个链接中的图像，并获取其src属性的值。我们然后将该值设置为链接的href属性，以便在单击链接时可以导航到该图像。

总结

.eq()和.get()方法在访问指定索引位置的元素方面都非常有用。.eq()返回一个包含jQuery对象的jQuery，可以方便地进行操作和修改。.get()返回一个普通的DOM元素，可以使用普通JavaScript函数对其进行操作。在使用这两种方法时，需要注意它们的特点和用法。