javascript - $ ('selector' ) 和 $ ('selector' )[0] 在 jquery 中的区别

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);

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

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

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

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

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

---

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

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

或

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