jQuery est une bibliothèque Javascript qui simplifie la programmation JavaScript™ et AJAX (Asynchronous JavaScript + XML, Asynchronous Javascript and XML). Contrairement aux autres bibliothèques Javascript, jQuery a sa propre philosophie qui facilite l'écriture de code. Cet article vous amènera à comprendre la philosophie de jQuery, à discuter de ses caractéristiques et fonctions, et à fournir quelques exemples ajax et comment utiliser les plug-ins pour étendre jQuery.
1. Qu'est-ce que jQuery ?
jQuery est une excellente bibliothèque Javascript née en 2006 et créée par John Resig. Que vous soyez un novice en JavaScript mais que vous souhaitiez essayer la complexité du DOM (Document Object Model) et d'Ajax, ou que vous soyez un expert en JavaScript mais que vous en ayez assez de répéter les ennuyeux scripts DOM et Ajax, jQuery sera votre meilleur choix. Votre meilleur choix .
jQuery vous aidera à garder votre code simple et concis. Vous n'aurez plus besoin d'écrire beaucoup de boucles répétitives ou de scripts d'appels DOM. Grâce à jQuery, vous retrouverez rapidement les points clés et exprimerez vos idées avec le moins de code.
La philosophie de jQuery est en réalité très simple : simple et réutilisable. Lorsque vous comprenez et êtes d’accord avec cette idée, vous pouvez commencer à réaliser à quel point l’utilisation de jQuery peut rendre votre programmation simple et agréable !
2. Quelques concepts simples
Voici un exemple simple pour vous montrer comment jQuery affecte le code que vous écrivez. Ce que vous faites est en fait très simple, comme ajouter un événement de réponse au clic à tous les liens dans une certaine zone de la page. Vous pouvez utiliser Javascript et DOM généraux pour l'écrire. Voir le listing 1 pour le code :
Listing 1. Script DOM sans. jQuery
var external_links = document.getElementById('external_links');var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i++) {var link = links.item(i) ;link.onclick = function() {return confirm('Vous allez visiter : ' + this.href);};} Si vous utilisez jQuery, l'implémentation est la suivante : Listing 2. Scripting DOM avec jQuery$(' #external_links a').click( function() {return confirm('Vous allez visiter : ' + this.href);}); Avec jQuery, vous pouvez trouver rapidement les points clés et exprimer uniquement ce que vous avez besoin d'exprimer sans être verbeux. Il n'est pas nécessaire de parcourir ces éléments, la fonction click() s'occupe de tout. Et vous n'avez pas besoin d'écrire trop de code pour manipuler le DOM. Il vous suffit d'utiliser quelques caractères pour définir l'élément que vous recherchez. Voyons comment fonctionne ce code, avec quelques astuces. Tout d'abord, regardez la fonction $(), l'une des fonctions les plus utiles et les plus puissantes de jQuery. La plupart du temps, vous utilisez cette fonction pour sélectionner des éléments du document. Dans cet exemple, utilisez cette fonction pour transmettre des chaînes For en cascade. Syntaxe des feuilles de style (CSS), jQuery peut facilement trouver cet élément. Si vous connaissez un peu les sélecteurs CSS de base, je pense que cette syntaxe devrait vous sembler assez familière. Dans le Listing2, # external_links est utilisé pour rechercher des éléments avec l'identifiant external_links. L'espace suivant signifie que jQuery doit trouver tous les éléments <a> dans l'élément #external_links. Il est un peu difficile de l'exprimer en langage parlé - il est également assez difficile d'écrire en script DOM, cependant, en CSS, rien de plus simple. que cela. La fonction $() renvoie un objet jQuery contenant tous les éléments qui correspondent au sélecteur CSS. Le concept d'un objet jQuery est comme un tableau, mais il peut contenir de nombreux objets jQuery. Par exemple, vous pouvez appeler la fonction click. fonction pour lier une réponse d'événement de clic à chaque élément d'un objet jQuery.
Vous pouvez également transmettre un élément ou un tableau d'éléments à la fonction $(), qui ajoutera tous les éléments emballés dans un objet jQuery que vous souhaiterez peut-être appliquer. cette fonctionnalité à des objets comme les fenêtres. Par exemple, vous pouvez utiliser cette fonction pour charger des événements, comme ceci :
window.onload = function() {// faire ce truc lorsque la page est chargée} ; Si vous utilisez jQuery, vous pouvez écrire comme ceci :
$(window).load(function() {// exécute ceci lorsque la page entière a été téléchargée}); Comme vous le savez, attendre le chargement d'une fenêtre est extrêmement pénible car la page entière doit être chargée, y compris tout ce qu'elle contient. page Image. Dans certains cas, vous devez d'abord charger l'image, mais la plupart du temps, vous n'aurez peut-être besoin que de voir le balisage hypertexte (HTML). JQuery résout ce problème en créant un événement très spécial prêt sur le document, le. La méthode d'utilisation est la suivante : $(document).ready(function() {// fait ce truc lorsque le HTML est prêt}); Ce code crée un objet jQuery de l'élément document, puis l'appelle lorsque le DOM HTML. le document est prêt Cette instance Vous pouvez appeler cette fonction un nombre illimité de fois.
Dans le vrai codage de style jQuery, il existe également une forme abrégée de cette fonction. Passez simplement une fonction à la fonction $() :
$(function() {// exécutez ceci lorsque le téléchargement du HTML est terminé}); Jusqu'à présent, je vous ai montré trois façons différentes d'utiliser la fonction $(). La quatrième façon, vous pouvez utiliser une chaîne pour créer un élément. Le résultat est un objet jQuery contenant cet élément. Le listing 3 montre un exemple d'ajout d'un paragraphe à la page :
Listing 3. Création et ajout d'un simple paragraphe
$('<p></p>'). !').css('background', 'jaune').appendTo("body"); Comme vous pouvez le voir dans l'exemple ci-dessus, une autre fonctionnalité très puissante de jQuery est le chaînage de méthodes (chaînage de méthodes), chaque fois que vous appelez un sur un objet jQuery, cette méthode renverra également un objet jQuery. Cela signifie que si vous devez appeler plusieurs méthodes sur un objet jQuery, vous n'avez pas besoin d'écrire des sélecteurs CSS à plusieurs reprises.
$('#message').css('background', 'jaune').html('Hello!').show();3.jQuery rend Ajax extrêmement simple En utilisant jQuery, Ajax ne peut pas devenir plus simple. a une série de fonctions qui peuvent rendre les choses simples vraiment simples et rendre les choses complexes aussi simples que possible. Une utilisation courante d'Ajax consiste à charger un morceau de code HTML dans une certaine zone de la page. l'élément et utilisez la fonction load(). Voici un exemple de mise à jour de certaines statistiques $('#stats').load('stats.html'); page latérale. Comme vous l'avez peut-être deviné, il est très simple d'utiliser jQuery. Vous pouvez bien sûr choisir d'utiliser $.post() ou $.get(), en fonction de vos besoins spécifiques. objet de données facultatif et une fonction de rappel. Le listing 4 est un exemple simple d'envoi de données et d'utilisation d'une fonction de rappel :
Listing 4. Envoi de données à une page avec Ajax
$.post('save.cgi', {text: 'my string'. ,number: 23}, function() {alert('Vos données ont été enregistrées.');}); Si vous voulez vraiment du code Ajax complexe, utilisez la fonction $.ajax() Vous pouvez spécifier le type de données comme. xml, html, script ou json, jQuery préparera automatiquement les résultats pour vous et votre fonction de rappel pourra utiliser les données immédiatement. Vous pouvez également définir les fonctions de rappel beforeSend, error, success et complete pour donner à l'utilisateur quelques indications supplémentaires sur l'ajax. expérience. De plus, certains paramètres vous permettent de définir le délai d'attente pour les requêtes ajax, ou le statut "dernière modification" d'une page. Listing5 montre un exemple d'obtention d'un document XML et d'utilisation de la méthode que j'ai mentionnée ci-dessus. exemple de quelques paramètres :
Listing 5. Ajax complexe simplifié avec $.ajax()
$.ajax({url: 'document.xml',type: 'GET',dataType: 'xml',timeout: 1000, error: function (){alert('Erreur lors du chargement du document XML');},success : function(xml){// faire quelque chose avec XML}}); Lorsque vous obtenez avec succès des commentaires XML, vous pouvez utiliser jQuery pour parcourir le document XML, simplement comme vous le faites avec HTML. Cela rend très simple la manipulation d'un fichier XML et l'intégration du contenu dans la page. Le Listing6 étend la fonction de réussite, en fonction de chaque <élément> du document XML sur la page. Ajout d'un élément de liste
. . Travailler avec XML en utilisant jQuery
avec succès : function(xml){$(xml).find('item').each(function(){var item_text = $(this). text();$('<li><. /li>').html(item_text).appendTo('ol');});}