jQuery in JavaScript

2019 jQuery wird bei heise entfernt

URI

www.heise.de/developer/artikel/Technische-Schulden-jQuery-entfernen-4471469.html?seite=all

Allgemeines

Aussprachehinweise: jQuery ˈdʒeɪ ˈkwɪɚ i

jQuery erleichtert die JavaScript-Programmierung für Personen mit CSS-Erfahrung, weil sie diese CSS-ähnlicher macht. Damit wird die JavaScript-DOM-Programmierung für viele Personen überhaupt erst akzeptabel. (nach: Anfang von http://vimeo.com/79098392, Nicholas Zakas: Enough With The JavaScript Already! Code & Creativity 44:29)

einfachere und elegantere Alternative zu DOM
Versteckt Inkompatibilitäten zwischen Browsern (dies ist heute [2017] weniger wichtig, da Browser weniger Inkompatiilitäten zeigen),
Erleichtert es, die benötigten Elemente zu finden und zu manipulieren
Erleichtert Ajax
Ein query verwendet einen CSS-Selektor, das Ergebnis kann dann mit fluent-interface-Methoden manipuliert werden
Dokument sollte nicht im Quirks-Modus angezeigt werden: Auf Dokumententyp-Deklaration achten!

Nachteile von jQuery:

Da es eine JavaScript -Bibliothek ist, sind jQuery -Anwendungen in der Regel langsamer als vergleichbare JavaScript -Anwendungen
Manche Aufgaben lassen sich mit JavaScript ohne jQuery einfacher lösen als mit jQuery, was von einigen jQuery -Programmierern übersehen wird, weil sie JavaScript ohne jQuery nicht gut kennen. Daher wird empfohlen, erst einmal JavaScript gut zu lernen, bevor jQuery erlernt wird.

Beispiele

jQuery( "div" ): Menge aller div-Elemente im Dokument
$( "div" ): Abkürzung für »jQuery«
$( "p.info" ).css( "background-color", "green" ).show( "fast" );: fluent interface
$( ".clickhere" ).click( function(){ $( this ).slideUp( "slow" ); });: this in jQuery-Objekt wandeln

Anwendungen der Funktion jQuery/$ (vereinfacht)

Erzeugt jQuery-Objekt nach Selektor/Element/Dokument/Window/HTML-Quelltext (Argument) oder einer Reihung dieser.

Falls eine Funktion als Argument übergeben wird, so wird diese nach dem Laden des Dokuments aktiviert.

Einbinden

Versionen (Stand 2013): 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3
Sicherheit: Dritte können damit Code injizieren
Datenschutz: Alle Besucher werden an Ausland weitergeleitet (mit Referrer)
Alternative: lokale Kopie, dank Cacheing Belastung nicht so groß

Textverbindung

<span>a</span><span>b</span><span>c</span>
alert(jQuery('span').text());

Anwendungsmuster: Suchen und Tun

Auswahl von DOM-Elementen und dann etwas damit tun.

jQuery('a').text('jQuery').attr('href', 'http://www.jquery.com');

Anwendungsmuster: Aufbauen und Anhängen

Ein neues Element aufbauen und dann in ein bestehendes Element einfügen.

jQuery('<a>example</a>').attr('href', 'http://example.com').appendTo('body');

Auf DOM warten

Sollte nicht nötig sein, wenn JS am Ende des body steht.

Wird in der gegenene Reihenfolge ausgef:

jQuery(document).ready(function () { console.log('1'); });

jQuery(function () { console.log('2'); });

jQuery(function ($) { console.log('3'); });

Auf Darstellung (einschließlich Bildern) warten

jQuery(window).load(function(){ console.log('READY'); });

Verkettung

$('a').text('example') // Wert ist wieder $('a').

.attr('href', 'http://example.com/') // Wert ist wieder $('a').

.addClass('example'); // Wert ist wieder $('a').

Unterbrechung der Verkettung

text ergibt String, kein jQuery-Objekt

var theText = $('p').text('jQuery').text();