jquery中$('selector')和$('selector')[0]之间的差异

Question

假设我有一个<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或var o，那么如果输出相同，那么第一和第二种方法有什么区别呢？

我看到md和o都是对象，但是在控制台输出中它们并不完全相同，它们有什么区别？谢谢。

Answer 1

在这里，您获得了第一个匹配的选择器，它返回普通的js实例。

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

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

var $md = $(m);

由于宽度()方法返回集合中第一个元素的宽度，所以方法之间没有区别，直到页面上有了多个.test元素，并且希望这样修改它们：

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

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

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

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

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

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

或

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