Question

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

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

javascript中的旧代码：

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

jQuery中的新代码：

var but = $('#but');

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

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

Answer 2

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

我已将您的jsfiddle更新为work as expected，但我会尝试在这里做一个简短的啧啧：

根据jquery文档，有两种添加事件监听器的方法，您应该熟悉它们; .on()方法和.(event)()方法。后者可以添加到jquery对象代替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()的第一个参数是（是）事件。您可以使用空格分隔多个事件：.on('click hover')。第二个参数是要执行的函数或目标元素。在上面的例子的情况下，它是跨度。最后一个参数当然是要执行的功能。据我所知，你需要一个匿名函数来引用要执行的函数，而不是简单地在那里写。

我希望这有所帮助。

Answer 3

不确定我是否了解你？完全，但是，这是你正在寻找的东西：

var b1 = document.getElementById('button');
var b2 = $(b1);
    b2.click( function(){
      alert('hi');            
    })

Javascript变量使用jquery来查找变量

3 个答案: