jquery

时间:2017-01-24 13:18:01

标签: javascript jquery html object dom

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

基本上我可以在widthvar $md上应用var o方法,那么如果输出相同,第1路和第2路之间的差异是什么?看到mdo都是对象,但在控制台输出中它们不完全相同,它们有何不同?感谢。

1 个答案:

答案 0 :(得分:3)

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

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

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

var $md = $(m);

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

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

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

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

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

基于您的代码有合成示例,我认为最好这样写:

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

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