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