2012-04-12 12 views
1

Ich habe vor ein paar Minuten einen Code gesucht und das verwirrt mich.Wie funktioniert dieses Stück Code?

$("nav a").mouseenter(function() { 
    audio.play(); 
}); 

Ich weiß, '$' ist jQuery für document.getElementById (""); und mouseEnter ist ein Event-Handler für 'nav a', aber wie ist die Funktion dem Event zugeordnet? Es hat keinen Zuweisungsoperator '='?

Ich weiß nicht viel über jQuery im Moment, da ich versuche, JavaScript komplett herunter zu bekommen. Also, als ich ging, um den Code zu ändern, um reines JavaScript zu sein, scheint es nicht zu funktionieren ...

document.getElementById("playAudio").onclick(function() { 
    audio.play(); 
}); 

Ich verstehe nicht warum? Ich dachte, es war der gleiche Code? ...

Antwort

0

Sie übergeben ein Funktionsobjekt (erstellt mit einem Funktionsausdruck) zu jQuery.mouseenter, und jQuery nimmt es von dort.

FYI, ein Teil von dem, was Sie hier versuchen, ist das Document Object Model (DOM). Sie versuchen, den Code pure JavaScript + DOM API zu machen. Es ist gut, die Grundlagen von JS und DOM kennenzulernen, aber bedenken Sie, dass jQuery viele Inkonsistenzen in den Implementierungen des DOMs durch Browser ausgleicht, wie zum Beispiel das Registrieren von Ereignis-Listenern.

+0

Ich möchte auf jeden Fall jQuery lernen, nachdem ich die Grundlagen von JS und dem DOM bekommen habe. Heutzutage ist es schwierig, die Grundlagen zu lernen, weil so viele Leute zu jQuery wechseln. Ich kann ihnen nicht die Schuld geben, es ist ein erstaunliches Werkzeug. – W3Geek

0

Die Funktion wird übergeben, und die Funktion ist anonym (hat keinen Namen).

Sie könnten auch tun:

function foo() { audio.play(); } 

$('nav a').mouseenter(foo); 
0

Der Dollar-Symbol ist nicht nur beschränkt auf getElementById(), ist es die Aufgabe jQuery und in Ihrem Fall ist der Aufruf der nav Element dann die a-Tags innerhalb des nav greifen. Nach dem Ergreifen der Elemente wird das Ereignis anonym angehängt, sodass die Funktion immer dann ausgeführt werden kann, wenn das Ereignis ausgelöst wird.

+0

Hmm, ich weiß nicht viel über jQuery. Ich versuche nur mit JavaScript zu arbeiten, bis ich den Großteil der Sprache gelernt habe. Dann werde ich mich mit jQuery herumschlagen. Wenn ich den Code zu reinem JavaScript ändere, scheint es nicht zu funktionieren ... document.getElementById ("playAudio"). Onclick (function() { audio.play(); }); – W3Geek

+0

Die Ereignisse onclick() und mouseenter() sind jQuery-Funktionen, die über den Selektor angefügt werden. In regulärem JavaScript müssen Sie das Ereignis etwas anders zuweisen; etwas wie: 'document.getElementById (" playAudio "). onclick = function() {audio.play();};'. Weitere Informationen zu ihrer Syntax finden Sie auf der [jQuery-Website] (http://www.jquery.com). – faino

+0

Ich schaute dort aber ich weiß nicht wo ich darüber lesen kann. So viel Dokumentation! Bevor ich mich mit jQuery beschäftige, möchte ich JavaScript vollständig verstehen. Leider sind viele Leute zu jQuery gewechselt und das macht es mir schwer regelmäßiges JavaScript zu lernen. Also, mit regulärem JS, wird es nur über das '=' - Zeichen zugewiesen und in jQuery müssen Sie das '=' - Zeichen nicht verwenden, um einem Ereignis eine Funktion zuzuordnen? – W3Geek

1

mouseenter ist eine Funktion. Ähnlich wie:

var element = {elm: document.getElementById('test')}; 
element.mouseenter = function(func) { 
    element['elm'].addEventListener('mouseenter', func); 
}; 
element.mouseenter(function() {}); 
Verwandte Themen