使用jquery查找變量的Javascript變量

我用按鈕作了fiddle。現在在JavaScript中，我試圖學習jquery，並通過這樣做，我轉換舊的小提琴從JavaScript的jquery，但我知道如何。使用jquery查找變量的Javascript變量

我的問題是，在我的函數稱爲init，我無法弄清楚如何轉換獲取HTML元素的JavaScript方式與存儲在變量中的ID。

舊代碼在javascript：jQuery的

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

新代碼：

var but = $('#but');

我認爲問題是，我開始用JavaScript語句，但隨後使用jQuery。我不知道如何處理jQuery中的變量。

來源

2012-09-07 Ilan Biala

爲什麼我得到downvoted，我可以在未來做什麼，以避免它？ –

不知道。你的問題很好。 – Blender

感謝的人，我希望它顯示誰downvoted，因爲這將有助於問他們對未來的建議的想法。 –

您需要在[0]添加到您的jQuery代碼來獲取文檔元素，但這是毫無意義與添加事件偵聽器的jQuery的方法。我會建議$('#but').mouseout(etc)或$('#but').on('mouseout', etc)。

我已經更新您的jsfiddle到work as expected，但我會嘗試給一個簡短的嘖嘖這裏：

有添加事件偵聽器的兩種方法，你應該熟悉每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()是（事件）事件。您可以通過用空格分隔多個事件來附加多個事件：.on('click hover')。第二個參數是要執行的函數或目標元素。在上面的例子中，它是跨度。最後一個參數當然是要執行的功能。據我所知，你需要有一個匿名函數來引用要執行的函數，而不是簡單地在那裏寫。

我希望這有助於。

來源

2012-09-07 23:45:32 Daedalus

謝謝，但我還沒有了解jquery的事件監聽器的方法，你有一個教程轉介給那些？ –

@IlanBiala我已經擴展了我的答案。 – Daedalus

我明白了，這麼多的幫助。關於什麼是匿名函數的一個問題，我函數（）{代碼在這裏}而不是函數bigFont（）{代碼在這裏}？ –

$('#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); 
}

或者，而不是使用本地DOM方法，您可以使用jQuery對象上的jQuery方法。

function init() { 
    $('#but').on("mouseover", butResult).on("mouseout", reverse); 
    $('#button').on("mouseover", buttonResult).on("mouseout", reverse); 
}

來源

2012-09-07 23:45:08 jfriend00

感謝您的真棒回答，我在第一句話中爲您解答了一個問題。 jq obj和DOM obj有什麼區別？ [0]與jquery集合有關，我讀過，但我不知道jquery集合是什麼。 –

@IlanBiala - 一個jQuery對象是一個JavaScript對象，它有很多有用的方法添加到它。裏面的jQuery對象是一個DOM對象數組。 '[0]'到達DOM對象數組並從該數組獲取第一個DOM對象。我還爲我的答案添加了一些新的代碼示例。 – jfriend00

好的謝謝你的解釋，真的清除了東西了。而對於未來，爲什麼[0]，[0]與[1]相比有什麼作用？ –

不知道我是否理解你？完全，但是，這是你大致尋找：

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

來源

2012-09-07 23:47:52 vector

這是沒有用的，因爲我想用jquery替換document.getelementbyid –

使用jquery查找變量的Javascript變量

回答

相關問題