Schluss mit einer Prise Magic: jQuery Objekte verstehen

2014-10-11 11:00 (Kommentare: 0)

Responsive Webdesign

Für jQuery Einsteiger wirken Codeschnipsel wie $(".cta").click(function(){}) schnell wie eine Prise "Magic". Das muss nicht sein: Dieser Artikel hilft, jQuery Objekte zu verstehen und gekonnt einzusetzen.

Am Anfang ist das $

Leicht zu lesen ist jQuery-Code nicht, das gilt besonders für Einsteiger. Für ein besseres Verständnis braucht der Leser Basis-Wissen darüber, wie jQuery-Objekte funktionieren. Zentral dabei ist das Prinzip der JavaScript-Bibliothek, das $-Zeichen als Funktion bzw. Objekt zu nutzen.

Der Einsatz des Dollar-Zeichens spart vor allem eine Menge Schreibarbeit. Es ist im Prinzip eine Abkürzung für die jQuery-Funktion. So sind die folgenden Codezeilen praktisch identisch:

  1. 1. jQuery(document).ready(function(){alert ('Hello World');});
  2. 2. $(document).ready(function(){alert ('Hello World');});

    Daher wird das $ auch als Shortcut oder Alias bezeichnet.

Elemente mit dem Selektor auswählen

Mittels eines Selektors wird das zu manipulierende Element ausgewählt. Bei dem Beispiel $(".cta").click(function(){}) sind dies Elemente mit der CSS-Klasse .cta. Doch auch andere Selektoren sind möglich:

Mit $("#abc") werden Elemente mit id="abc" ausgewählt. Durch $("h1") alle H1-Elemente. Mittels $("[href]") lassen sich alle Elemente mit einem href-Attribut auswählen. Zugriff auf Input-Elemente liefern unter anderem $(":input"), $(":text"),$(":radio") oder $(":button").

Das sind längst nicht alle Selektoren. Eine gute Übersicht ist auf http://www.w3schools.com/jquery/ jquery_ref_selectors.asp zu finden.

Auch hier hat die kryptische Schreibweise den Sinn Schreibarbeit zu sparen. Und das ist effektiv: Der lange Aufruf document.getElementByTagName("h1") wird durch den kurzen $("h1") ersetzt.

Anonyme Funktionen

Das bekannte Beispiel $(".cta").click(function(){}) selektiert Elemente mit der CSS-Klasse cta. Bei dem Code-Fragment, das der Funktion .click() als Parameter übergeben wird, handelt es sich um eine anonyme Funktion. Diese speziellen Funktionen lassen sich Variablen zuweisen. Nur einmalig benötigte Funktionen müssen so nicht separat definiert werden, diese können einfach in einen Aufruf integriert werden. Das spart Tippzeit, reduziert das Risiko von Kollisionen im Namesraum und beschleunigt mit etwas Übung das Lesen des JavaScript-Codes, da nicht erst die Definition der Funktion gesucht werden muss.

Beispiel:
Die folgenden Codezeilen öffnen ein Dialogfenster mit dem Text „Hello World“:


var helloWorld = function () {
alert('Hello World');
};
$(".cta").click(helloWorld);


Das gleiche bewirkt diese Zeile:


$(".cta").click(function() { alert('Hello World'); });


Der Unterschied liegt darin, dass das obige Beispiel eine Funktion definiert, während das untere eine anonyme Funktion nutzt.

Konflikte mit .noConflict() umschiffen

Um Konflikte im Namensraum (Namespace) zu vermeiden, erlaubt jQuery mit der Funktion .noConflict() den Shortcut $ für jQuery() abzuschalten. Anschließend funktioniert nur noch 1. aus dem obigen Beispiel wie bekannt. Eine andere Bibliothek kann anschließend das $-Zeichen verwenden.

So ist es auch möglich, unterschiedliche jQuery-Versionen einzusetzen, beispielsweise um ein altes Plugin auch weiterhin trotz neuer zur gewünschten Erweiterung inkompatibler Version verwenden zu können.

$-Alias ändern

Mittels der folgenden Codezeile kann mit jQuery das j so verwendet werden, wie sonst das $.


var j = jQuery.noConflict(); 


jQuery Funktionen lassen sich anschließend durch Austausch des $ gegen j nutzen.

Mit diesem Ansatz lassen sich unterschiedliche jQuery-Versionen nutzten. Das sieht dann so aus:

 
<script type="text/javascript" src="jquery-1.9.js"> 
<script type="text/javascript" src="jquery-altes-plugin-fuer-1.9.js"> 
<script type="text/javascript"> 
    var jq19 = jQuery.noConflict(true); 
</script> 
<script type="text/javascript" src="jquery-2.1.js"> 
<script type="text/javascript" src="jquery-weitere-aktuelle-2.1-plugins.js"> 


Zugriff auf die jQuery 2.1 Objekte bietet das $, auf jene der 1.9er Version die Variable jq19.

Erzeugen einer Funktion zum Ausführen von jQuery-Code mit $

Der folgende Ansatz isoliert die $ nutzenden jQuery-Funktionen in einem Block. Außerhalb des Blocks steht das $ nicht als Shortcut für jQuery zur Verfügung.

 
jQuery.noConflict(); 
(function( $ ) { 
  $(function() { 
    // jQuery-basierender Source-Code, der $ als Shortcut für jQuery nutzt. 
  }); 
})(jQuery); 
// Source-code,der auf einer anderen Bibliothek basiert und $ als alias verwendet. 

Chaining – wie der „Rattenschwanz“ an Objekten funktioniert

Aufrufe wie der folgende sind in jQuery nicht selten:

 
$("#chainingExsample").text("Hello").removeClass("class1").addClass("class2").css("color", "red"); 


Es handelt sich dabei um eine Kurzfassung für diese Codezeilen:

 
$("#chainingExsample").text("Hello"); 
$("#chainingExsample").removeClass("class1"); 
$("#chainingExsample").addClass("class2"); 
$("#chainingExsample").css("color", "red"); 


Das die Kurz- genauso wie die Langfassung funktioniert, hat einen einfachen Grund: In jQuery erfolgt bei jedem Aufruf die Rückgabe des Objektes. Auf diesem zurückgegebenen Objekt kann dann wieder die nächste Funktion ausgeführt werden.

Wer noch verstehen möchte, was die ganzen jQuery-Funktionen machen kommt um die API der Bibliothek nicht herum: http://api.jquery.com/.

Zurück

 
domainssaubillig © 2007-2022 Alle Rechte vorbehalten. | Support | AGB | Datenschutzerklärung | Impressum