jQuery Tutoriel => Démarrer avec jQuery

Remarques

jQuery est une bibliothèque JavaScript qui simplifie les opérations DOM, la gestion des événements, AJAX et les animations. Il prend également en charge de nombreux problèmes de compatibilité des navigateurs dans les moteurs DOM et javascript sous-jacents.

Chaque version de jQuery peut être téléchargée depuis https://code.jquery.com/jquery/ dans des formats compressés (minifiés) et non compressés.

Versions

Version	Remarques	Date de sortie
1.0	Première version stable	2006-08-26
1.1		2007-01-14
1.2		2007-09-10
1.3	Sizzle introduit dans le noyau	2009-01-14
1.4		2010-01-14
1,5	Gestion différée des rappels, réécriture du module ajax	2011-01-31
1.6	Des gains de performance significatifs dans les méthodes `attr()` et `val()`	2011-05-03
1,7	Nouvelles API d'événement: `on()` et `off()` .	2011-11-03
1.8	Sizzle réécrit, animations améliorées et flexibilité `$(html, props)` .	2012-08-09
1,9	Suppression des interfaces obsolètes et nettoyage du code	2013-01-15
1.10	Corrections de bugs incorporées et différences signalées pour les cycles bêta 1.9 et 2.0	2013-05-24
1.11		2014-01-24
1.12		2016-01-08
2.0	Suppression du support IE 6–8 pour améliorer les performances et réduire la taille	2013-04-18
2.1		2014-01-24
2.2		2016-01-08
3.0	Des accélérations massives pour certains sélecteurs personnalisés jQuery	2016-06-09
3.1	Plus d'erreurs silencieuses	2016-07-07

Espace de noms jQuery ("jQuery" et "$")

jQuery est le point de départ pour écrire un code jQuery. Il peut être utilisé comme une fonction jQuery(...) ou une variable jQuery.foo .

$ est un alias pour jQuery et les deux peuvent généralement être interchangés (sauf si jQuery.noConflict(); a été utilisé - voir Eviter les collisions entre espaces de noms ).

En supposant que nous avons cet extrait de HTML -

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

Nous pourrions vouloir utiliser jQuery pour ajouter du contenu textuel à cette div. Pour ce faire, nous pourrions utiliser la fonction text() jQuery. Cela pourrait être écrit en utilisant soit jQuery ou $ . c'est à dire -

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

Ou -

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

Les deux résulteront dans le même HTML final -

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

Comme $ est plus concis que jQuery c'est généralement la méthode préférée pour écrire du code jQuery.

jQuery utilise des sélecteurs CSS et dans l'exemple ci-dessus, un sélecteur d'ID a été utilisé. Pour plus d'informations sur les sélecteurs dans jQuery, voir les types de sélecteurs .

Commencer

Créez un fichier hello.html avec le contenu suivant:

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

Démo en direct sur JSBin

Ouvrez ce fichier dans un navigateur Web. En conséquence, vous verrez une page avec le texte: Hello, World!

Explication du code

Charge la bibliothèque jQuery à partir du CDN jQuery:
```
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```
Cela introduit la variable globale $ , un alias pour la fonction jQuery et l'espace de noms.
Sachez que l'une des erreurs les plus courantes commises lors de l'inclusion de jQuery est de ne pas charger la bibliothèque AVANT tout autre script ou toute autre bibliothèque pouvant en dépendre ou l'utiliser.

Diffère une fonction à exécuter lorsque le DOM ( Document Object Model ) est détecté comme étant "prêt" par jQuery:

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

Une fois que le DOM est prêt, jQuery exécute la fonction de rappel indiquée ci-dessus. A l'intérieur de notre fonction, il n'y a qu'un seul appel qui fait 2 choses principales:
1. Obtient l'élément avec l'attribut id égal à hello (notre sélecteur #hello ). L'utilisation d'un sélecteur en tant qu'argument passé constitue le cœur des fonctionnalités et des noms de jQuery; la bibliothèque entière a essentiellement évolué à partir de l'extension document.querySelectorAll ^MDN .
2. Définissez le text() dans l'élément sélectionné sur Hello, World! .
```
#    ↓ - Pass a `selector` to `$` jQuery, returns our element
$('#hello').text('Hello, World!');
#             ↑ - Set the Text on the element
```

Pour plus d'informations, reportez-vous à la page jQuery - Documentation .

Inclure une balise de script dans la tête de la page HTML

Pour charger jQuery depuis le CDN officiel, rendez-vous sur le site Web de jQuery. Vous verrez une liste des différentes versions et formats disponibles.

Maintenant, copiez la source de la version de jQuery à charger. Supposons que vous vouliez charger jQuery 2.X , cliquez sur une balise non compressée ou minifiée qui vous montrera quelque chose comme ceci:

Copiez le code complet (ou cliquez sur l'icône de copie) et collez-le dans <head> ou <body> de votre code HTML.

La meilleure pratique consiste à charger toutes les bibliothèques JavaScript externes dans la balise head avec l'attribut async . Voici une démonstration:

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

Lorsque vous utilisez un attribut async soyez conscient lorsque les bibliothèques javascript sont chargées et exécutées de manière asynchrone dès qu'elles sont disponibles. Si deux bibliothèques sont incluses et que la deuxième bibliothèque dépend de la première bibliothèque, est-ce que si la deuxième bibliothèque est chargée et exécutée avant la première bibliothèque, une erreur peut se produire et l'application peut se rompre.

Éviter les collisions d'espaces de noms

Les bibliothèques autres que jQuery peuvent également utiliser $ comme un alias. Cela peut provoquer des interférences entre ces bibliothèques et jQuery.

Pour libérer $ pour une utilisation avec d'autres bibliothèques:

jQuery.noConflict();

Après avoir appelé cette fonction, $ n'est plus un alias pour jQuery . Cependant, vous pouvez toujours utiliser la variable jQuery elle-même pour accéder aux fonctions jQuery:

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

Vous pouvez éventuellement affecter une variable différente en tant qu'alias pour jQuery:

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

À l'inverse, pour empêcher d'autres bibliothèques d'interférer avec jQuery, vous pouvez envelopper votre code jQuery dans une expression de fonction immédiatement invoquée (IIFE) et passer en jQuery comme argument:

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

Dans cet IIFE, $ est un alias pour jQuery uniquement.

Un autre moyen simple de sécuriser l'alias $ de jQuery et de s'assurer que DOM est prêt :

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

Résumer,

jQuery.noConflict() : $ ne fait plus référence à jQuery, jQuery.noConflict() à la variable jQuery .
var jQuery2 = jQuery.noConflict() - $ ne fait plus référence à jQuery, alors que la variable jQuery fait, de même que la variable jQuery2 .

Maintenant, il existe un troisième scénario - Que faire si nous voulons que jQuery ne soit disponible que dans jQuery2 ? Utilisation,

var jQuery2 = jQuery.noConflict(true)

Cela se traduit par ni $ ni jQuery faisant référence à jQuery.

Ceci est utile lorsque plusieurs versions de jQuery doivent être chargées sur la même page.

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

Chargement de jQuery via la console sur une page qui ne l’a pas.

Il faut parfois travailler avec des pages qui n'utilisent pas jQuery alors que la plupart des développeurs ont l'habitude d'avoir jQuery portée de main.

Dans de telles situations, vous pouvez utiliser la console des Chrome Developer Tools ( F12 ) pour ajouter manuellement jQuery sur une page chargée en exécutant les opérations suivantes:

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

La version que vous souhaitez peut différer de celle ci-dessus ( 1.12.4 ), vous pouvez obtenir le lien pour celui dont vous avez besoin ici .

L'objet jQuery

Chaque fois que jQuery est appelé, en utilisant $() ou jQuery() , en interne, il crée une new instance de jQuery . Ceci est le code source qui montre la nouvelle instance:

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

En interne, jQuery se réfère à son prototype sous la forme .fn , et le style utilisé ici pour instancier en interne un objet jQuery permet à ce prototype d'être exposé sans l'utilisation explicite de new par l'appelant.

En plus de la configuration d'une instance (qui est la manière dont l'API jQuery, telle que .each , children , filter , etc., est exposée), jQuery créera en interne une structure de type tableau pour correspondre au résultat du sélecteur (à condition que quelque chose d'autre que rien, undefined , null ou similaire a été passé en tant qu'argument). Dans le cas d'un seul élément, cette structure de type tableau ne contiendra que cet élément.

Une démonstration simple consisterait à trouver un élément avec un identifiant, puis à accéder à l'objet jQuery pour renvoyer l'élément DOM sous-jacent (cela fonctionnera également lorsque plusieurs éléments sont mis en correspondance ou présents).

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

Chargement des plugins jQuery

En général, lorsque vous chargez des plugins, veillez à toujours inclure le plugin après jQuery.

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

Si vous devez utiliser plusieurs versions de jQuery, assurez-vous de charger le ou les plug-ins après la version requise de jQuery suivie du code pour définir jQuery.noConflict(true) ; puis chargez la prochaine version de jQuery et ses plug-ins associés:

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

Maintenant, lors de l'initialisation des plugins, vous devrez utiliser la version associée de jQuery

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

Il est possible d'utiliser une seule fonction de document pour initialiser les deux plugins, mais pour éviter toute confusion et tout problème avec du code jQuery supplémentaire dans la fonction de document prêt, il serait préférable de garder les références séparées.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

jQuery Tutoriel
Démarrer avec jQuery

Recherche…