JQuery对象与HTMLElementxxx对象

Question

这有效:

$('h1').click(function(){console.log("clicked");};

这不是:

var h1 = $('h1');
h1[0].click(function(){console.log("clicked");}

这又有效:

var h1=$('h1');
var h2 = $(h1[0]).click(function() {console.log("clicked");}

有人会解释原因吗？

非常感谢!

干杯龙

Answer 1

h1[0]指的是从数组中的jQuery选择器匹配的第一个元素.所以,这将是一个普通的DOM元素.因此,您必须使用该API.onclick会在那里工作(如果你分配了功能).

这可行:

var h1 = $('h1');
h1.click(function(){console.log("clicked");});

或者这个:

var h1 = $('h1');
h1[0].onclick = function(){console.log("clicked");};

这个work(var h2 = $(h1[0]))的原因是因为你正在使用普通的DOM元素,然后将它包装在一个jQuery对象中,这允许访问jQuery api.

正是出于这种情况,从可读性的角度强烈建议您将所有jQuery对象变量命名为a $.从而,

var $h1 = $('h1');
$h1.click(function(){console.log("clicked");});