javascript without jquery

JavaScript ohne jQuery

Tipps und praktische Beispiele aus dem CatsWhoCode-Beitrag.

Inhaltsverzeichnis

1. Warten auf „Dokument bereit“.
2. Hinzufügen von Ereignis-Listenern
3. Elemente auswählen
4. Verwenden von Ajax
5. Klassen hinzufügen und entfernen
6. Einblenden
7. Elemente ausblenden und anzeigen
8. DOM-Manipulation

Warten auf „Dokument bereit“.

Eine Seite kann nicht sicher manipuliert werden, bis das Dokument „fertig“ ist. Aus diesem Grund haben wir Entwickler es uns zur Gewohnheit gemacht, unseren gesamten JS-Code in die jQuery-Funktion $(document).ready() zu packen:

 $ ( document ) . ready ( function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

Das gleiche Ergebnis lässt sich problemlos mit reinem JavaScript erzielen:

 document . addEventListener ( 'DOMContentLoaded' , function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

Hinzufügen von Ereignis-Listenern

Ereignis-Listener sind ein sehr wichtiger Bestandteil der JavaScript-Entwicklung. jQuery bietet eine sehr einfache Möglichkeit, damit umzugehen:

 $ ( someElement ) . on ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

Sie benötigen jQuery nicht, um Ereignis-Listener in JavaScript zu erstellen. So geht's:

 someElement . addEventListener ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

Elemente auswählen

Mit jQuery können Sie ganz einfach Elemente mithilfe einer ID, eines Klassennamens, eines Tag-Namens usw. auswählen:

 // By ID
$ ( '#myElement' ) ;

// By Class name
$ ( '.myElement' ) ;

// By tag name
$ ( 'div' ) ;

// Children
$ ( '#myParent' ) . children ( ) ;

// Complex selecting
$ ( 'article#first p.summary' ) ;

Pure JavaScript bietet verschiedene Möglichkeiten zur Auswahl von Elementen. Alle unten aufgeführten Methoden funktionieren auf allen modernen Browsern sowie IE8+.

 // By ID
document . querySelector ( '#myElement' ) ;

// By Class name
document . querySelectorAll ( '.myElement' ) ;

// By tag name
document . querySelectorAll ( 'div' ) ;

// Children
document . querySelectorAll ( 'myParent' ) . childNodes ;

// Complex selecting
document . querySelectorAll ( 'article#first p.summary' ) ;

Verwenden von Ajax

Wie die meisten von Ihnen wissen, handelt es sich bei Ajax um eine Reihe von Technologien, mit denen Sie asynchrone Webanwendungen erstellen können. jQuery verfügt über eine Reihe nützlicher Methoden für Ajax, einschließlich get() wie unten gezeigt:

 $ . get ( 'ajax/test.html' , function ( data ) {
  $ ( '.result' ) . html ( data ) ;
  alert ( 'Load was performed.' ) ;
} ) ;

Obwohl jQuery die Ajax-Entwicklung einfacher und schneller macht, ist es sicher, dass Sie das Framework nicht benötigen, um Ajax zu verwenden:

 var request = new XMLHttpRequest ( ) ;
request . open ( 'GET' , 'ajax/test.html' , true ) ;

request . onload = function ( e ) {
  if ( request . readyState === 4 ) {

    // Check if the get was successful.

    if ( request . status === 200 ) {
      console . log ( request . responseText ) ;
    } else {
      console . error ( request . statusText ) ;
    }
  }
} ;

Klassen hinzufügen und entfernen

Wenn Sie die Klasse eines Elements hinzufügen oder entfernen müssen, verfügt jQuery über zwei spezielle Methoden:

 // Adding a class
$ ( '#foo' ) . addClass ( 'bold' ) ;

// Removing a class
$ ( '#foo' ) . removeClass ( 'bold' ) ;

Ohne jQuery ist das Hinzufügen einer Klasse zu einem Element ziemlich einfach. Um eine Klasse zu entfernen, müssen Sie die Methode replace() verwenden:

 // Adding a class
document . getElementById ( 'foo' ) . className += 'bold' ;

// Removing a class
document . getElementById ( 'foo' ) . className = document . getElementById ( 'foo' ) . className . replace ( / ^bold$ / , '' ) ;

Einblenden

Hier ist ein praktisches Beispiel dafür, warum jQuery so beliebt ist. Das Ausblenden eines Elements erfordert nur eine einzige Codezeile:

 $ ( el ) . fadeIn ( ) ;

Der exakt gleiche Effekt lässt sich mit reinem JavaScript erzielen, allerdings ist der Code viel länger und komplizierter.

 function fadeIn ( el ) {
  el . style . opacity = 0 ;

  var last = + new Date ( ) ;
  var tick = function ( ) {
    el . style . opacity = + el . style . opacity + ( new Date ( ) - last ) / 400 ;
    last = + new Date ( ) ;

    if ( + el . style . opacity < 1 ) {
      ( window . requestAnimationFrame && requestAnimationFrame ( tick ) ) || setTimeout ( tick , 16 ) ;
    }
  } ;

  tick ( ) ;
}

fadeIn ( el ) ;

Elemente ausblenden und anzeigen

Das Ein- und Ausblenden von Elementen ist eine sehr häufige Aufgabe. jQuery bietet die Methoden hide() und show() zum Ändern der Anzeige eines Elements.

 // Hiding element
$ ( el ) . hide ( ) ;

// Showing element
$ ( el ) . show ( ) ;

In reinem JavaScript ist das Ein- oder Ausblenden von Elementen nicht komplizierter:

 // Hiding element
el . style . display = 'none' ;

// Showing element
el . style . display = 'block' ;

DOM-Manipulation

Das Bearbeiten des DOM mit jQuery ist sehr einfach. Nehmen wir an, Sie möchten ein <p> -Element an #container anhängen:

 $ ( '#container' ) . append ( '<p>more content</p>' ) ;

Dies in reinem JavaScript zu tun, ist auch keine große Sache:

 document . getElementById ( 'container' ) . innerHTML += '<p>more content</p>' ;