jquery 中 $('selector') 和 $('selector')[0] 之间的区别

假设我有一个<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 , ..... }

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

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

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

在这里，您再次将其包装在 jQuery 对象中。

var $md = $(m);

Since width()方法返回集合中第一个元素的宽度，方法之间没有区别，直到你有多个.test页面上的元素并希望像这样更改它们：

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

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

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

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

有基于您的代码的综合示例，我认为最好这样写：

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

or

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