JQ的对象与dom的对象(.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");
 

猜你喜欢

转载自blog.csdn.net/dxj124/article/details/84988407