jquery中$('selector')和$('selector')[0]的区别答案

【问题标题】：Difference between $('selector') and $('selector')[0] in jqueryjquery中$('selector')和$('selector')[0]的区别
【发布时间】：2017-06-09 07:31:36
【问题描述】：

假设我有一个<div class="test" style="width:200px"></div>，请考虑以下几点：

var m = $('.test')[0];
var $md = $(m);
console.log($md.width()); //200

var o = $('.test');
console.log(o.width());  // 200


console.log(m);   // <div class="test" style="width:200px">
console.log($md);  // Object{ context: <div.test> ..... } 
console.log(o);   // Object{ length:1 , ..... }

基本上我可以在var $md 或var o 上应用width 方法，那么如果输出相同，第一种和第二种方法有什么区别？
我看到md 和o 是对象，但在控制台输出中它们并不完全相同，它们有何不同？谢谢。

【问题讨论】：

$('selector') 为您提供匹配元素的数组，$('selector')[0] 将为您提供数组中的第一个元素
一个是 DOM 对象，另一个不是，但使用 $() 您也将其转换为 DOM 对象，这样它们就会相同
@Curiousdev $('selector') 返回的不是数组，而是类数组对象
@Curiousdev 您的评论具有误导性。正如 Curious 所指出的，它返回第一个匹配元素的 DOM 对象，而不是集合中的第一个 jQuery 对象。如果您想要集合中的第一个 jQuery 对象，请使用 $('selector').eq(0);
@Curious 你可能是对的，这是一个非常有争议的话题，尽管 $('selector') 所做的只是在 DOM 中搜索与提供的选择器匹配的任何元素并创建一个新的 jQuery 对象可能是你是对的..

标签： javascript jquery html object dom

【解决方案1】：

这里你得到第一个元素匹配的选择器，它返回纯 js 实例。

var m = $('.test')[0];

在这里你再次将它包装在一个 jQuery 对象中。

var $md = $(m);

由于 width() 方法返回 set 中第一个元素的宽度，因此方法之间没有区别，直到您在页面上有多个 .test 元素并希望像这样更改它们：

 $('.test').width(100)

此代码会将页面上每个 .test 元素的宽度设置为 100 像素。

但这只会改变集合中的第一个匹配元素：

 var el = $('.test')[0];
 $(el).width(100);

有根据你的代码合成的例子，我觉得这样写比较好：

$('.test').first().width(100);

或

$('.this:first').width(100);

【讨论】：