jQuery Tutoriel
Démarrer avec jQuery
Recherche…
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>
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 fonctionjQuery
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:
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 .Définissez le
text()
dans l'élément sélectionné surHello, 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 variablejQuery
. -
var jQuery2 = jQuery.noConflict()
-$
ne fait plus référence à jQuery, alors que la variablejQuery
fait, de même que la variablejQuery2
.
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.