Question

我对Javascript有点新鲜，但对jQuery更加绿色。我已经遇到了让我摸不着头脑的东西。

有什么区别：

$('.foo').click(function(){
//blah
});

和

$('.foo').onclick = function(){
//blah
}

我更喜欢第二种方式，但它似乎不起作用。我做错了吗？

提前致谢。

Answer 1

你错过了jQuery的全部内容。您首选的方法不适用于jQuery，因为jQuery不能在单个DOM元素上运行。单个DOM元素具有onclick属性，因此如果您执行了类似的操作，它将起作用：

document.getElementById('bar').onclick = function() { // blah };

但是，jQuery完全是关于 sets 的。例如，在您粘贴的代码中，您尝试将某些内容绑定到类foo的所有元素。在做这样的事情时，你必须遵循jQuery的规则（这是一件好事！）。一个包装集，即$('.foo') 不与直接获取DOM元素相同，就像我上面所做的那样。然而，将包含找到的所有DOM元素的数组，jQuery公开了这些元素。因此，如果文档中有一个类foo的元素，那么可以执行：

$('.foo')[0].onclick = function() { // blah };

然而，不建议这样做，因为jQuery的重点是抽象出所有这些特定的Javascript语法，让jQuery为你解决问题。您应该接受这一点，因为它将使您的代码更加清洁和便携。因此，您应该使用click或bind函数：

$('.foo').click(function() {
    // will bind something to all elements with a class of foo
});

$('.foo').bind('click', function() {
    // functionally identical to the above, either is fine
});

Answer 2

使用$('.foo')，您正在与jquery包装器对象（不是HTML元素对象）进行交互，该对象没有您在第二个示例中尝试使用的onclick属性。 / p>

第一个例子让jquery封送该函数如何连接到事件，特别是将它应用于类“foo”的所有内容。

如果语法更舒适，您可以：

var myFunction = function() { /* blah */ };
$('.foo').click(myFunction);

Answer 3

onclick属性只能附加到DOM元素。 $（'。foo'）不是DOM元素。它是一个类似数组的jQuery对象。它可以引用一个或多个DOM元素。

$('.foo')[0].onclick = function() {}

会起作用，但只会将事件附加到第一场比赛。

$('.foo').click(function(){})

将onclick事件附加到匹配的所有元素。当前元素可以由事件处理程序内的this对象引用。

使用jQuery的原因是避免像上面这样的非标准代码。尽管所有浏览器都支持onclick，但它并不是W3C推荐的附加事件的标准方式。

Answer 4

是的，你做错了什么。这是：

在jQuery中，$是一个函数。为简单起见，我们假设它是“jQuery”类型的对象的工厂。

所以当你写

var temp = $('.foo');

您正在创建一个“jQuery”类型的对象，它基本上包含所有带有“foo”类的DOM节点的集合。

现在，每个对象都有自己定义明确的数据成员和方法集。

click（）是一种将函数作为争论的方法。但是，“jQuery”类型的对象没有名为“onclick”的成员。所以当你写：

$('.foo').onclick = function(){ //blah }

它不起作用。

然而，正确的方法：

temp.click( function(){ alert("My id is = " + this.id); } );

会奏效。

干杯！

JRH。

使用jQuery绑定事件的正确方法

4 个答案: