$(".a").eq(0) 和 $(”.a“)[0]区别

先说结论:

$(".a")[0]获取到的是 dom对象（可以使用dom属性，方法，不可以使用jq属性方法）。
而 $(”.a“)[0]获取到的则是jquery对象（可以用jq的属性、方法，不可以使用dom属性方法）。

简单介绍一下js中的eq()方法：

返回带有被选元素，指定索引号的元素；索引号从0开始。

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

应用一下eq方法：

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

最终实现的效果为：

若用[]方法，则相应代码为：

$('li')[0].style.background = "blue";

最终效果图为：

若有如下代码：

<a class="a"></a>
<a class="a"></a>
<a class="a"></a>

分别用eq()方法和[]来进行选择：

$(".a") //选择3个a，都是jq对象
$(".a")[0] //选择第一个a，是dom对象
$(".a").eq(0) //选择第一个a，是jq对象
$(".a").eq(0)[0] // 选择了第一个a并转化成dom对象
$(".a")[0].eq[0] // 错误，dom对象不能用jq方法

那什么是dom对象，什么是jq对象呢？

dom对象

• 通过面向对象的方式描述的文档模型
• 通过dom可以访问所有的html元素，创建新的元素以及修改和删除元素及其属性

jquery对象

• 它是一个JavaScript数组，数组内包含的信息有：

  • jquery 当前的JQuey框架版本号
  • length ：数组的元素个数
  • context ：一般指向htmlDocument对象
  • selector ： 传递进来的选择器内容

  我们可以通过下段代码在控制台的输出进行直观理解。

<div id="idol">test</div>
<script src="./jquery-2.0.3.min.js"></script>
<script>
    console.log('1---->', $('#idol'));
    console.log('2---->', $('#idol').eq(0));
    console.log('3---->', $('#idol')[0]);

    // 比较一：改变DOM元素值
    // $('#idol').text('易烊千玺');
    // $('#idol').eq(0).text('易烊千玺');
    // $('#idol')[0].innerText = "易烊千玺";

    // 比较二：绑定事件
    $('#idol').click(function() {
        console.log('1--->success')
    })
    $('#idol')[0].addEventListener('click', function() {
        console.log('2--->success');
    })
    $('#idol')[0].onclick = function() {
        console.log('3--->success');
    }
</script>

通过控制台看结果可以知道：
$('#idol') 、$('#idol').eq(0) 打印出来的是jquery 对象。

而 $('#idol')[0] 打印出来的是dom对象，将 $('#idol') 取到的jquery对象转化为了dom对象。

$('#idol') 、$('#idol').eq(0) 得到的jq对象，可以使用jq的属性和方法，通过 .text('newValue') 来改变div的值，而$('#idol')[0] 得到的dom对象，则可以使用dom属性和方法，通过 innerText 、innerHTML 这两个DOM属性修改div的值，而不能混用jq对象的属性和方法。

且三种监听 div 点击事件的方法，都可以生效，但是不能混用。

以上。