JS学习笔记（二）.eq()与[]的区别

首先我们假设一个html中有以下元素：

<div class="sel"></a>
<div class="sel"></a>
<div class="sel"></a>

使用JQ选择元素的时候

$('.sel')//我们选择了三个元素
$('.sel').eq(0)//我们选择了第一个div，它是一个JQ对象，不可以使用dom属性和方法
$('.sel')[0]//我们也是选择了第一个div，但是这是一个dom对象，可以使用dom属性方法，但不可以使用JQ的属性方法

$('.sel').eq(0)[0]//选择第一个div并转换为dom对象，同上
$('.sel')[0].eq(0)///错误，dom对象无法使用JQ方法，因为.eq()是JQ的方法

那么，JQ的对象与dom的对象有什么区别呢？

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

JQuery对象
　　JQuery对象是一个Javascript数组
　　　　数组包含的信息
　　　　　　jquery 当前的JQuey框架版本号
　　　　　　length 指示这个数组的元素个数
　　　　　　context 一般指向htmlDocument对象
　　　　　　selector 传递进来的选择器内容

　　JQuery对象是通过JQuery对象包装DOM对象产生的对象，是JQuery独有的，所以JQuery对象不能使用DOM方法。反之，DOM对象不能使用JQuery方法。

两者之间的转换

var domElement = $(".sel")[0];
//JQuery转换为Dom对象
var jqElement = $(domElement);
//Dom对象转化为JQuery对象

//获取JQuery对象
var jqElement = $("id");
//获取dom对象
var domElement = document.getElementById("id");