3

我用按钮做了一个小提琴。现在在 javascript 中，我正在尝试学习 jquery，通过这样做，我将旧小提琴从 javascript 转换为 jquery，但是我知道如何。

我的问题是，在我的名为 init 的函数中，我无法弄清楚如何转换 javascript 方式来获取一个 id 存储在变量中的 html 元素。

javascript中的旧代码：

var but = document.getElementById("but");

jQuery 中的新代码：

var but = $('#but');

我认为问题在于我从 javascript 语句开始，然后使用 jQuery。我不知道如何处理 jQuery 中的变量。

4

3 回答 3

1

$('#but')返回一个 jQuery 对象，而不是 DOM 对象。您可以在其上调用 jQuery 方法，也可以从中获取 DOM 对象，但不能直接在其上使用 DOM 方法。如果您想从中取出 DOM 对象，您可以通过以下方式获取它：

$('#but')[0]

而且，你的方法是这样的：

function init() {
    var but = $('#but')[0];
    but.addEventListener("mouseover", butResult, false);
    but.addEventListener("mouseout", reverse, false);
    var button = $('#button')[0];
    button.addEventListener("mouseover", buttonResult, false);
    button.addEventListener("mouseout", reverse, false);
}

或者，您可以在 jQuery 对象上使用 jQuery 方法，而不是使用本机 DOM 方法。

function init() {
    $('#but').on("mouseover", butResult).on("mouseout", reverse);
    $('#button').on("mouseover", buttonResult).on("mouseout", reverse);
}
于 2012-09-07T23:45:08.157 回答
1

您需要添加[0]到您的 jquery 代码中以获取文档元素，但这对于添加事件侦听器的 jquery 方法毫无意义。我建议要么$('#but').mouseout(etc)要么$('#but').on('mouseout', etc)。

我已将您的 jsfiddle 更新为按预期工作，但我将尝试在这里简单介绍一下：

根据 jquery 文档，您应该熟悉两种添加事件侦听器的方法；.on()方法，方法.(event)()。后者可以添加到 jquery ojects 来代替object.(eventName)()示例，将点击处理程序添加到对象： object.click(function() { console.log('executed'); });

但是，此方法不是“实时”的，如果动态添加元素，它不会自行更新，并且仅在文档准备好（$(document).ready(function() { do stuff });）时附加事件。为了将事件附加到动态添加的元素，我们需要该.on()方法。

以下面的 html 为例：

<div class="wrapper">
    <span class="dynamically_added">stuff</span>
</div>

为了将事件侦听器附加到动态添加的跨度，在您的 jquery 中，添加以下内容：

$(".wrapper").on('click', '.dynamically_added', function() {
    console.log('executed');
});

.on()is(are) 事件的第一个参数。您可以通过用空格分隔多个事件来附加多个事件：.on('click hover'). 第二个参数要么是要执行的函数，要么是目标元素。在上面的例子中，它是跨度。最后一个参数当然是要执行的函数。据我所知，您需要有一个匿名函数来引用要执行的函数，而不是简单地写在那里。

我希望这有帮助。

于 2012-09-07T23:45:32.687 回答
0

不知道我是否理解你？完全，但是，这是你大致寻找的：

var b1 = document.getElementById('button');
var b2 = $(b1);
    b2.click( function(){
      alert('hi');            
    })
于 2012-09-07T23:47:52.860 回答