Premiers pas avec jQuery

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

  1. Charge la bibliothèque jQuery depuis jQuery [CDN][cdn] :

    <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 lors de l’inclusion jQuery ne parvient pas à charger la bibliothèque AVANT tout autre script ou les bibliothèques qui peuvent en dépendre ou en faire usage.

  1. Diffère l’exécution d’une fonction lorsque le DOM ([Document Object Model][dom]) est détecté comme étant [“ready”][documentready] 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() { ... });

  2. Une fois que le DOM est prêt, jQuery exécute la fonction de rappel présentée ci-dessus. À l’intérieur de notre fonction, il n’y a qu’un seul appel qui fait 2 choses principales :

  3. Obtient l’élément avec l’attribut id égal à hello (notre selector #hello). L’utilisation d’un sélecteur comme argument passé est au cœur de la fonctionnalité et de la dénomination de jQuery ; l’ensemble de la bibliothèque a essentiellement évolué à partir de l’extension de document.querySelectorAllMDN.

  4. Définissez le [text()][text] à l’intérieur de 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 en savoir plus, consultez la page [jQuery - Documentation][jQuery - Documentation].

[dom] : https://www.wikiod.com/fr/dom/premiers-pas-avec-dom [texte] : http://api.jquery.com/text/ [cdn] : https://en.wikipedia.org/wiki/Content_delivery_network [documentready] : https://learn.jquery.com/using-jquery-core/document-ready/ [jQuery - Documentation] : http://api.jquery.com/

Éviter les collisions d’espaces de noms

Les bibliothèques autres que jQuery peuvent également utiliser $ comme 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!');

Facultativement, vous pouvez affecter une variable différente comme alias pour jQuery :

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

Inversement, 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)](https://www.wikiod.com/fr/javascript/les-fonctions#Expressions de fonction immédiatement appelées -function-expressions#t=201607152249399289216) et passez 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, contrairement à la variable jQuery.
  • var jQuery2 = jQuery.noConflict() - $ ne fait plus référence à jQuery, contrairement à la variable jQuery et à la variable jQuery2.

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

var jQuery2 = jQuery.noConflict(true)

Il en résulte que ni $ ni jQuery ne font 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/

Espace de noms jQuery (“jQuery” et “$”)

jQuery est le point de départ pour écrire n’importe quel 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 échangés l’un pour l’autre (sauf si jQuery.noConflict(); a été utilisé - voir [Éviter les collisions d’espaces de noms][1]).

En supposant que nous ayons 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 jQuery [text()][2]. Cela pourrait être écrit en utilisant jQuery ou $. c’est à dire. -

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

Ou -

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

Les deux aboutiront au 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 [types de sélecteurs][3].

[1] : https://www.wikiod.com/fr/jquery/premiers-pas-avec-jquery#Éviter les collisions d’espaces de noms [2] : https://api.jquery.com/text/#text2 [3] : https://www.wikiod.com/fr/jquery/selecteurs#Types de sélecteurs

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

Parfois, il faut 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, on peut utiliser la console Chrome Developer Tools (F12) pour ajouter manuellement jQuery sur une page chargée en exécutant ce qui suit :

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 voulez peut différer de celle ci-dessus (1.12.4), vous pouvez obtenir le lien pour [celui dont vous avez besoin ici][1].

[1] : https://developers.google.com/speed/libraries/#jquery

Inclure la balise de script dans l’en-tête de la page HTML

Pour charger jQuery à partir du [CDN][1] officiel, rendez-vous sur le [site Web] jQuery[2]. Vous verrez une liste des différentes versions et formats disponibles.

[![Page CDN jQuery indiquant les versions de jQuery disponibles][3]][3]

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

[![La balise de script est apparue avec la version de jQuery sélectionnée][4]][4]

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

La meilleure pratique consiste à charger toutes les bibliothèques JavaScript externes au niveau de 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 l’attribut async, soyez conscient que les bibliothèques javascript sont alors chargées de manière asynchrone et exécutées dès qu’elles sont disponibles. Si deux bibliothèques sont incluses alors que la deuxième bibliothèque dépend de la première bibliothèque, dans ce cas 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 casser.

[1] : https://wikipedia.org/wiki/Content_delivery_network [2] : https://code.jquery.com/ [3] : http://i.stack.imgur.com/eOt5z.jpg [4] : http://i.stack.imgur.com/E8zjB.jpg

L’objet jQuery

Chaque fois que jQuery est appelé, en utilisant $() ou jQuery(), il crée en interne une nouvelle instance de jQuery. Voici 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 fait référence à son prototype en tant que .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 configurer une instance (c’est ainsi que l’API jQuery, telle que .each, children,filter, etc. est exposée), jQuery créera également 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 ait été passé comme 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 à rechercher 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 correspondent ou sont 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 à espace de noms

Généralement, lors du chargement des plugins, assurez-vous de 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 plus d’une version de jQuery, assurez-vous de charger le(s) plugin(s) après la version requise de jQuery suivie du code pour définir [jQuery.noConflict(true)](http:/ /api.jquery.com/jQuery.noConflict/); puis chargez la prochaine version de jQuery et son(s) plugin(s) 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>

Désormais, lors de l’initialisation des plugins, vous devrez utiliser la version de jQuery associée

<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 de n’utiliser qu’une seule fonction prête pour le document pour initialiser les deux plugins, mais pour éviter toute confusion et problèmes avec tout code jQuery supplémentaire dans la fonction prête pour le document, il serait préférable de garder les références séparées.

Ajax →