jQuery Zelfstudie => Aan de slag met jQuery

Opmerkingen

jQuery is een JavaScript-bibliotheek die DOM-bewerkingen, gebeurtenisafhandeling, AJAX en animaties vereenvoudigt. Het zorgt ook voor veel browser compatibiliteitsproblemen in onderliggende DOM- en javascript-engines.

Elke versie van jQuery kan worden gedownload van https://code.jquery.com/jquery/ in zowel gecomprimeerde (minified) als niet-gecomprimeerde formaten.

versies

Versie	Notes	Publicatiedatum
1.0	Eerste stabiele release	2006-08-26
1.1		2007-01-14
1.2		2007-09-10
1.3	Sizzle geïntroduceerd in de kern	2009-01-14
1.4		2010-01-14
1.5	Uitgesteld terugbelbeheer, ajax module herschrijven	2011-01-31
1.6	Aanzienlijke prestatiewinst in de methoden `attr()` en `val()`	2011-05-03
1.7	Nieuwe evenement-API's: `on()` en `off()` .	2011-11-03
1.8	Sizzle herschreven, verbeterde animaties en `$(html, props)` flexibiliteit.	2012-08-09
1.9	Verwijdering van verouderde interfaces en opschonen van code	2013/01/15
1.10	Opgenomen bugfixes en verschillen gerapporteerd uit zowel de 1.9- als 2.0-bètacycli	2013/05/24
1.11		2014/01/24
1.12		2016/01/08
2.0	Ondersteuning voor IE 6–8 vervallen voor prestatieverbeteringen en verkleining	2013/04/18
2.1		2014/01/24
2.2		2016/01/08
3.0	Enorme versnellingen voor sommige jQuery aangepaste selectors	2016/06/09
3.1	Geen stille fouten meer	2016/07/07

jQuery Namespace ("jQuery" en "$")

jQuery is het startpunt voor het schrijven van een jQuery-code. Het kan worden gebruikt als een functie jQuery(...) of een variabele jQuery.foo .

$ is een alias voor jQuery en de twee kunnen meestal voor elkaar worden uitgewisseld (behalve waar jQuery.noConflict(); is gebruikt - zie Botsingen tussen naamruimten vermijden ).

Ervan uitgaande dat we dit HTML-fragment hebben -

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

We willen misschien jQuery gebruiken om wat tekstinhoud aan deze div toe te voegen. Om dit te doen zouden we de jQuery text() functie kunnen gebruiken. Dit kan worden geschreven met behulp van jQuery of $ . dat wil zeggen -

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

Of -

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

Beide resulteren in dezelfde uiteindelijke HTML -

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

Omdat $ beknopter is dan jQuery , is het over het algemeen de voorkeursmethode voor het schrijven van jQuery-code.

jQuery maakt gebruik van CSS-selectors en in het bovenstaande voorbeeld werd een ID-selector gebruikt. Zie soorten selectors voor meer informatie over selectors in jQuery.

Ermee beginnen

Maak een bestand hello.html met de volgende inhoud:

<!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 op JSBin

Open dit bestand in een webbrowser. Als gevolg hiervan ziet u een pagina met de tekst: Hello, World!

Verklaring van code

Laadt de jQuery-bibliotheek van de jQuery CDN :
```
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```
Dit introduceert de $ global variabele, een alias voor de jQuery functie en naamruimte.
Houd er rekening mee dat een van de meest gemaakte fouten bij het opnemen van jQuery er niet in slaagt de bibliotheek te laden VOORDAT andere scripts of bibliotheken die erop kunnen vertrouwen of er gebruik van kunnen maken.

Hiermee wordt een functie uitgesteld die moet worden uitgevoerd wanneer de DOM ( Document Object Model ) door jQuery als "gereed" wordt gedetecteerd:

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

Zodra de DOM gereed is, voert jQuery de hierboven weergegeven callback-functie uit. Binnen onze functie is er slechts één oproep die 2 belangrijke dingen doet:
1. Hiermee wordt het element #hello met het kenmerk id gelijk aan hello (onze selector #hello ). Het gebruik van een selector als het doorgegeven argument is de kern van de functionaliteit en naamgeving van jQuery; de hele bibliotheek is in wezen voortgekomen uit de uitbreiding van document.querySelectorAll ^MDN .
2. Zet de text() in het geselecteerde element op Hello, World! .
```
#    ↓ - Pass a `selector` to `$` jQuery, returns our element
$('#hello').text('Hello, World!');
#             ↑ - Set the Text on the element
```

Raadpleeg de pagina jQuery - Documentatie voor meer informatie.

Neem scripttag op in hoofd van HTML-pagina

Ga naar de jQuery- website om jQuery van het officiële CDN te laden. U ziet een lijst met verschillende beschikbare versies en formaten.

Kopieer nu de bron van de versie van jQuery die u wilt laden. Stel dat u jQuery 2.X wilt laden, klik op niet-gecomprimeerde of verkleinde tag die u iets als dit laat zien:

Kopieer de volledige code (of klik op het kopieerpictogram) en plak deze in de <head> of <body> van uw html.

De beste praktijk is om externe JavaScript-bibliotheken in de head-tag te laden met het kenmerk async . Hier is een demonstratie:

<!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>

Wanneer u het async kenmerk gebruikt, moet u erop async dat de JavaScript-bibliotheken vervolgens asynchroon worden geladen en zo snel mogelijk worden uitgevoerd. Als twee bibliotheken zijn opgenomen waarbij de tweede bibliotheek afhankelijk is van de eerste bibliotheek, is dit het geval als de tweede bibliotheek wordt geladen en uitgevoerd vóór de eerste bibliotheek, kan dit een fout veroorzaken en kan de toepassing breken.

Botsingen tussen naamruimten vermijden

Andere bibliotheken dan jQuery kunnen ook $ als alias gebruiken. Dit kan interferentie veroorzaken tussen die bibliotheken en jQuery.

$ voor gebruik met andere bibliotheken:

jQuery.noConflict();

Na het aanroepen van deze functie is $ niet langer een alias voor jQuery . U kunt echter nog steeds de variabele jQuery zelf gebruiken om toegang te krijgen tot de jQuery-functies:

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

Optioneel kunt u een andere variabele toewijzen als een alias voor jQuery:

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

Omgekeerd, om te voorkomen dat andere bibliotheken jQuery verstoren, kunt u uw jQuery-code in een onmiddellijk aangeroepen functie-expressie (IIFE) wikkelen en jQuery als argument doorgeven:

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

Binnen deze IIFE is $ alleen een alias voor jQuery.

Nog een eenvoudige manier om de $ alias van jQuery te beveiligen en ervoor te zorgen dat DOM klaar is :

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

Samenvatten,

jQuery.noConflict() : $ verwijst niet langer naar jQuery, terwijl de variabele jQuery doet.
var jQuery2 = jQuery.noConflict() - $ verwijst niet langer naar jQuery, terwijl de variabele jQuery doet en de variabele jQuery2 .

Nu bestaat er een derde scenario - Wat als we willen dat jQuery alleen beschikbaar is in jQuery2 ? Gebruik,

var jQuery2 = jQuery.noConflict(true)

Dit resulteert in noch $ noch jQuery verwijzen naar jQuery.

Dit is handig wanneer meerdere versies van jQuery op dezelfde pagina moeten worden geladen.

<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/

JQuery laden via console op een pagina die het niet heeft.

Soms moet men werken met pagina's die geen jQuery terwijl de meeste ontwikkelaars gewend zijn jQuery hand te hebben.

In dergelijke situaties kan men de Chrome Developer Tools console ( F12 ) gebruiken om jQuery handmatig aan een geladen pagina toe te voegen door het volgende uit te voeren:

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);

De versie die u wilt, kan afwijken van de bovenstaande ( 1.12.4 ). U kunt de link voor de gewenste versie hier vinden .

Het jQuery-object

Elke keer dat jQuery wordt aangeroepen, door $() of jQuery() , maakt het intern een new exemplaar van jQuery . Dit is de broncode die de nieuwe instantie toont:

// 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 verwijst jQuery naar zijn prototype als .fn , en de stijl die hier wordt gebruikt om een jQuery-object intern te instantiëren, maakt het mogelijk dat dat prototype wordt weergegeven zonder het expliciete gebruik van new door de beller.

Naast het instellen van een instantie (wat de manier is waarop de jQuery-API, zoals .each , children , filter , etc. wordt weergegeven), maakt jQuery intern ook een .each structuur die overeenkomt met het resultaat van de selector (op voorwaarde dat iets anders dan niets, undefined , null of iets dergelijks werd doorgegeven als argument). In het geval van een enkel item kan deze matrixachtige structuur alleen dat item bevatten.

Een eenvoudige demonstratie zou zijn om een element met een id te vinden en vervolgens toegang te krijgen tot het jQuery-object om het onderliggende DOM-element te retourneren (dit werkt ook wanneer meerdere elementen zijn gekoppeld of aanwezig zijn).

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

JQuery-plug-ins met naamruimte laden

Meestal moet u bij het laden van plug-ins altijd de plug-in opnemen na jQuery.

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

Als u meer dan één versie van jQuery moet gebruiken, zorg er dan voor dat u de plug- jQuery.noConflict(true) na de vereiste versie van jQuery gevolgd door code om jQuery.noConflict(true) ; laad vervolgens de volgende versie van jQuery en de bijbehorende plug-ins:

<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>

Wanneer u nu de plug-ins initialiseert, moet u de bijbehorende jQuery-versie gebruiken

<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>

Het is mogelijk om slechts één documentklare functie te gebruiken om beide plug-ins te initialiseren, maar om verwarring en problemen met extra jQuery-code in de documentklare functie te voorkomen, is het beter om de referenties gescheiden te houden.

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

jQuery Zelfstudie
Aan de slag met jQuery

Zoeken…