jQuery Tutorial => Erste Schritte mit jQuery

Bemerkungen

jQuery ist eine JavaScript-Bibliothek, die DOM-Vorgänge, Ereignisbehandlung, AJAX und Animationen vereinfacht. Außerdem werden viele Probleme mit der Browserkompatibilität in zugrunde liegenden DOM- und Javascript-Engines behoben.

Jede Version von jQuery kann von https://code.jquery.com/jquery/ sowohl im komprimierten (minimierten) als auch im unkomprimierten Format heruntergeladen werden.

Versionen

Ausführung	Anmerkungen	Veröffentlichungsdatum
1,0	Erste stabile Veröffentlichung	2006-08-26
1.1		2007-01-14
1.2		2007-09-10
1.3	Sizzle in den Kern eingeführt	2009-01-14
1.4		2010-01-14
1,5	Deferred Callback Management, ajax Modul umschreiben	2011-01-31
1.6	Deutliche Leistungssteigerungen bei den `attr()` und `val()`	2011-05-03
1.7	Neue Ereignis-APIs: Ein `on()` und `off()` .	2011-11-03
1.8	Sizzle neu geschrieben, verbesserte Animationen und `$(html, props)` Flexibilität.	2012-08-09
1,9	Entfernen von veralteten Schnittstellen und Code-Bereinigung	2013-01-15
1.10	Inkorporierte Fehlerbehebungen und Unterschiede aus den Betazyklen 1.9 und 2.0	2013-05-24
1.11		2014-01-24
1.12		2016-01-08
2,0	Unterstützung für IE 6–8 für Leistungsverbesserungen und Größenreduzierung gestrichen	2013-04-18
2.1		2014-01-24
2.2		2016-01-08
3,0	Massive Beschleunigungen für einige benutzerdefinierte jQuery-Selektoren	2016-06-09
3.1	Keine stillen Fehler mehr	2016-07-07

jQuery-Namespace ("jQuery" und "$")

jQuery ist der Ausgangspunkt zum Schreiben von jQuery-Code. Es kann als Funktion jQuery(...) oder als Variable jQuery.foo .

$ ist ein Alias für jQuery und die beiden können normalerweise gegeneinander ausgetauscht werden (außer wenn jQuery.noConflict(); verwendet wurde - siehe Namensraumkollisionen jQuery.noConflict(); ).

Angenommen, wir haben dieses HTML-Snippet -

<div id="demo_div" class="demo"></div>

Wir möchten vielleicht jQuery verwenden, um diesem Div etwas Textinhalt hinzuzufügen. Dazu können wir die jQuery-Funktion text() verwenden. Dies könnte entweder mit jQuery oder $ . dh -

jQuery("#demo_div").text("Demo Text!");

Oder -

$("#demo_div").text("Demo Text!");

Beides führt zum gleichen abschließenden HTML -

<div id="demo_div" class="demo">Demo Text!</div>

Da $ prägnanter als jQuery , ist dies die bevorzugte Methode zum Schreiben von jQuery-Code.

jQuery verwendet CSS-Selektoren, und im obigen Beispiel wurde ein ID-Selektor verwendet. Weitere Informationen zu Selektoren in jQuery finden Sie unter Selektortypen .

Fertig machen

Erstellen Sie eine Datei hello.html mit folgendem Inhalt:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>

Live Demo auf JSBin

Öffnen Sie diese Datei in einem Webbrowser. Als Ergebnis sehen Sie eine Seite mit dem Text: Hello, World!

Erklärung des Codes

Lädt die jQuery-Bibliothek vom jQuery- CDN :
```
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```
Dadurch wird die globale Variable $ eingeführt, ein Alias für die jQuery Funktion und den Namespace.
Beachten Sie, dass einer der häufigsten Fehler beim Einschließen von jQuery das Laden der Bibliothek fehlschlägt, BEVOR andere Skripts oder Bibliotheken, die davon abhängig sind oder von ihr Gebrauch machen.

Gibt eine Funktion zurück, die ausgeführt werden soll, wenn das DOM ( Document Object Model ) von jQuery als "ready" erkannt wird:

// When the `document` is `ready`, execute this function `...`
$(document).ready(function() { ... });
 
// A commonly used shorthand version (behaves the same as the above)
$(function() { ... });

Sobald das DOM bereit ist, führt jQuery die oben gezeigte Rückruffunktion aus. In unserer Funktion gibt es nur einen Aufruf, der zwei Hauptaufgaben erledigt:
1. Ruft das Element mit dem id Attribut gleich hello (unser Selektor #hello ). Die Verwendung eines Selektors als übergebenes Argument ist der Kern der Funktionalität und Benennung von jQuery. Die gesamte Bibliothek entwickelte sich im Wesentlichen aus der Erweiterung des ^MDN document.querySelectorAll .
2. Setzen Sie den text() innerhalb des ausgewählten Elements auf Hello, World! .
```
#    ↓ - Pass a `selector` to `$` jQuery, returns our element
$('#hello').text('Hello, World!');
#             ↑ - Set the Text on the element
```

Weitere Informationen finden Sie auf der Seite jQuery - Dokumentation .

Script-Tag im Kopf der HTML-Seite einfügen

Um jQuery vom offiziellen CDN zu laden, rufen Sie die jQuery- Website auf . Sie sehen eine Liste verschiedener Versionen und Formate.

Kopieren Sie nun die Quelle der jQuery-Version, die Sie laden möchten. Angenommen, Sie möchten jQuery 2.X laden, klicken Sie auf unkomprimiertes oder vermindertes Tag, das Ihnen etwa Folgendes anzeigt :

Kopieren Sie den vollständigen Code (oder klicken Sie auf das Kopiersymbol) und fügen Sie ihn in den <head> oder <body> Ihrer HTML-Datei ein.

Es empfiehlt sich, externe JavaScript-Bibliotheken mit dem Attribut async am head-Tag zu laden. Hier ist eine Demonstration:

<!DOCTYPE html>
    <html>
      <head>
         <title>Loading jquery-2.2.4</title>
         <script src="https://code.jquery.com/jquery-2.2.4.min.js" async></script>
      </head>
      <body>
          <p>This page is loaded with jquery.</p>
      </body>
   </html>

Wenn Sie ein async Attribut verwenden, sollten Sie sich bewusst sein, da die Javascript-Bibliotheken dann asynchron geladen und ausgeführt werden, sobald sie verfügbar sind. Wenn zwei Bibliotheken enthalten sind, in denen die zweite Bibliothek von der ersten Bibliothek abhängt, wird in diesem Fall die zweite Bibliothek geladen und vor der ersten Bibliothek ausgeführt, und es kann ein Fehler ausgegeben werden, und die Anwendung kann beschädigt werden.

Namensraumkollisionen vermeiden

Andere Bibliotheken als jQuery können auch $ als Alias verwenden. Dies kann zu Interferenzen zwischen diesen Bibliotheken und jQuery führen.

So geben Sie $ zur Verwendung mit anderen Bibliotheken frei:

jQuery.noConflict();

Nach dem Aufruf dieser Funktion ist $ kein Alias für jQuery . Sie können jedoch weiterhin die Variable jQuery selbst verwenden, um auf die Funktionen von jQuery zuzugreifen:

jQuery('#hello').text('Hello, World!');

Optional können Sie eine andere Variable als Alias für jQuery zuweisen:

var jqy = jQuery.noConflict();
jqy('#hello').text('Hello, World!');

Um zu verhindern, dass andere Bibliotheken mit jQuery interferieren, können Sie den jQuery-Code in einen sofort aufgerufenen Funktionsausdruck (IIFE) einschließen und jQuery als Argument übergeben:

(function($) {
    $(document).ready(function() {
        $('#hello').text('Hello, World!');
    });
})(jQuery);

In diesem IIFE ist $ nur ein Alias für jQuery.

Eine weitere einfache Möglichkeit, um den $ Alias von jQuery zu sichern und sicherzustellen, dass DOM bereit ist :

jQuery(function( $ ) { // DOM is ready
   // You're now free to use $ alias
   $('#hello').text('Hello, World!');
});

Zusammenfassen,

jQuery.noConflict() : $ bezieht sich nicht mehr auf jQuery, während die Variable jQuery tut.
var jQuery2 = jQuery.noConflict() - $ bezieht sich nicht mehr auf jQuery, während die Variable jQuery und die Variable jQuery2 dies tut.

Nun gibt es ein drittes Szenario - Was ist, wenn wir möchten, dass jQuery nur in jQuery2 verfügbar ist? Benutzen,

var jQuery2 = jQuery.noConflict(true)

Dies führt dazu, dass sich weder $ noch jQuery auf jQuery beziehen.

Dies ist nützlich, wenn mehrere Versionen von jQuery auf dieselbe Seite geladen werden sollen.

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
    var jQuery1 = jQuery.noConflict(true);
</script>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
    // Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.
</script>

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Laden von jQuery über die Konsole auf einer Seite, auf der es nicht vorhanden ist.

Manchmal muss man mit Seiten arbeiten, die jQuery nicht verwenden, während die meisten Entwickler jQuery Hand haben.

In solchen Situationen können Sie die Chrome Developer Tools Konsole ( F12 ) verwenden, um jQuery manuell auf einer geladenen Seite hinzuzufügen, indem Sie Folgendes jQuery :

var j = document.createElement('script');
j.onload = function(){ jQuery.noConflict(); };
j.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(j);

Die gewünschte Version kann von der obigen Version ( 1.12.4 ) abweichen. Den Link für die 1.12.4 Version finden Sie hier .

Das jQuery-Objekt

Bei jedem Aufruf von jQuery wird mithilfe von $() oder jQuery() intern eine new Instanz von jQuery . Dies ist der Quellcode, der die neue Instanz zeigt:

// Define a local copy of jQuery
jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
}

Intern bezeichnet jQuery seinen Prototyp als .fn , und der hier verwendete Stil der internen Instantiierung eines jQuery-Objekts ermöglicht es, diesen Prototyp .fn , ohne dass der Aufrufer ausdrücklich etwas new .

Neben dem Einrichten einer Instanz (wie die jQuery-API, z. B. .each , children , filter usw., .each wird), erstellt jQuery intern auch eine .each Struktur, die mit dem Ergebnis des Selektors übereinstimmt (vorausgesetzt, dies ist .each ) etwas anderes als nichts, undefined , null oder ähnliches wurde als Argument übergeben. Bei einem einzelnen Element enthält diese Array-ähnliche Struktur nur dieses Element.

Eine einfache Demonstration wäre, ein Element mit einer ID zu finden und dann auf das jQuery-Objekt zuzugreifen, um das zugrunde liegende DOM-Element zurückzugeben (dies funktioniert auch, wenn mehrere Elemente übereinstimmen oder vorhanden sind).

var $div = $("#myDiv");//populate the jQuery object with the result of the id selector
var div = $div[0];//access array-like structure of jQuery object to get the DOM Element

Laden von Namespace-Plugins

Stellen Sie beim Laden von Plugins normalerweise sicher, dass das Plugin immer nach jQuery eingefügt wird.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="some-plugin.min.js"></script>

Wenn Sie mehrere Versionen von jQuery verwenden müssen, müssen Sie die Plugins nach der erforderlichen Version von jQuery laden, gefolgt von Code, um jQuery.noConflict(true) . Laden Sie dann die nächste Version von jQuery und die zugehörigen Plugins:

<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>

Wenn Sie nun die Plugins initialisieren, müssen Sie die zugehörige jQuery-Version verwenden

<script>
// newer jQuery document ready
jQuery(function($){
  // "$" refers to the newer version of jQuery
  // inside of this function

  // initialize newer plugin
  $('#new').newerPlugin();
});

// older jQuery document ready
$oldjq(function($){
  // "$" refers to the older version of jQuery
  // inside of this function

  // initialize plugin needing older jQuery
  $('#old').olderPlugin();
});
</script>

Es ist möglich, nur eine Document Ready-Funktion zu verwenden, um beide Plugins zu initialisieren. Um jedoch Verwirrung und Probleme mit zusätzlichem jQuery-Code in der Document Ready-Funktion zu vermeiden, sollten die Verweise besser getrennt bleiben.

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

jQuery Tutorial
Erste Schritte mit jQuery

Suche…