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

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

针对这种情况，从可读性的角度强烈建议您命名所有以$开头的jQuery对象变量。因此，

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