jQuery - Présentation
Qu'est-ce que jQuery?
jQuery est une bibliothèque JavaScript rapide et concise créée par John Resig en 2006 avec une belle devise: Write less, do more. jQuery simplifie la traversée des documents HTML, la gestion des événements, l'animation et les interactions Ajax pour un développement Web rapide. jQuery est une boîte à outils JavaScript conçue pour simplifier diverses tâches en écrivant moins de code. Voici la liste des fonctionnalités de base importantes prises en charge par jQuery -
DOM manipulation - Le jQuery a facilité la sélection des éléments DOM, leur négociation et la modification de leur contenu à l'aide d'un moteur de sélection open source inter-navigateurs appelé Sizzle.
Event handling - Le jQuery offre un moyen élégant de capturer une grande variété d'événements, comme un utilisateur cliquant sur un lien, sans avoir besoin d'encombrer le code HTML lui-même avec des gestionnaires d'événements.
AJAX Support - Le jQuery vous aide beaucoup à développer un site réactif et riche en fonctionnalités en utilisant la technologie AJAX.
Animations - Le jQuery est livré avec de nombreux effets d'animation intégrés que vous pouvez utiliser dans vos sites Web.
Lightweight - La jQuery est une bibliothèque très légère - environ 19 Ko de taille (réduite et gzippée).
Cross Browser Support - Le jQuery prend en charge plusieurs navigateurs et fonctionne bien dans IE 6.0+, FF 2.0+, Safari 3.0+, Chrome et Opera 9.0+
Latest Technology - Le jQuery prend en charge les sélecteurs CSS3 et la syntaxe XPath de base.
Comment utiliser jQuery?
Il existe deux façons d'utiliser jQuery.
Local Installation - Vous pouvez télécharger la bibliothèque jQuery sur votre machine locale et l'inclure dans votre code HTML.
CDN Based Version - Vous pouvez inclure la bibliothèque jQuery dans votre code HTML directement à partir du Content Delivery Network (CDN).
Installation locale
Aller au https://jquery.com/download/ pour télécharger la dernière version disponible.
Maintenant mis téléchargé jquery-2.1.3.min.js fichier dans un répertoire de votre site Web, par exemple / jquery.
Exemple
Vous pouvez maintenant inclure la bibliothèque jquery dans votre fichier HTML comme suit -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Cela produira le résultat suivant -
Version basée sur CDN
Vous pouvez inclure la bibliothèque jQuery dans votre code HTML directement à partir du Content Delivery Network (CDN). Google et Microsoft fournissent du contenu pour la dernière version.
Nous utilisons la version Google CDN de la bibliothèque tout au long de ce didacticiel.
Exemple
Réécrivons maintenant l'exemple ci-dessus en utilisant la bibliothèque jQuery de Google CDN.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Cela produira le résultat suivant -
Comment appeler des fonctions de bibliothèque jQuery?
Comme presque tout, nous le faisons lorsque jQuery lit ou manipule le modèle objet de document (DOM), nous devons nous assurer que nous commençons à ajouter des événements, etc. dès que le DOM est prêt.
Si vous voulez qu'un événement fonctionne sur votre page, vous devez l'appeler dans la fonction $ (document) .ready (). Tout ce qu'il contient se chargera dès que le DOM sera chargé et avant que le contenu de la page ne soit chargé.
Pour ce faire, nous enregistrons un événement prêt pour le document comme suit -
$(document).ready(function() {
// do stuff when DOM is ready
});Pour appeler une fonction de bibliothèque jQuery, utilisez les balises de script HTML comme indiqué ci-dessous -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello, world!");});
});
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>Cela produira le résultat suivant -
Comment utiliser des scripts personnalisés?
Il est préférable d'écrire notre code personnalisé dans le fichier JavaScript personnalisé: custom.js, comme suit -
/* Filename: custom.js */
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
});
});Maintenant, nous pouvons inclure custom.js fichier dans notre fichier HTML comme suit -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" src = "/jquery/custom.js">
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>Cela produira le résultat suivant -
Utilisation de plusieurs bibliothèques
Vous pouvez utiliser plusieurs bibliothèques toutes ensemble sans entrer en conflit. Par exemple, vous pouvez utiliser les bibliothèques javascript jQuery et MooTool ensemble. Vous pouvez consulter la méthode jQuery noConflict pour plus de détails.
Quelle est la prochaine ?
Ne vous inquiétez pas trop si vous n'avez pas compris les exemples ci-dessus. Vous allez les saisir très bientôt dans les chapitres suivants.
Le chapitre suivant essaiera de couvrir quelques concepts de base qui proviennent de JavaScript conventionnel.