Syntaxe jQuery

Syntaxe jQuery

Avec jQuery, vous pouvez sélectionner (requête, requête) des éléments HTML et effectuer des "actions" sur eux.

Syntaxe jQuery

La syntaxe jQuery consiste à sélectionner des éléments HTML et à effectuer certaines opérations sur les éléments sélectionnés.

Syntaxe de base : $(selector).action()

Le signe dollar définit le sélecteur jQuery (sélecteur) "requête" et "trouver" l'élément HTML L'action() de jQuery effectue des opérations sur l'élément Opération

exemple :

$(this).hide() - Masquer l'élément actuel

$("p").hide() - Masquer tout <p> Element

$("p.test").hide() - Masquer tous les éléments <p> avec class="test" Element

$("#test").hide( ) - Masquer tous les éléments avec id="test"

Connaissez-vous les sélecteurs CSS ?
La syntaxe utilisée par jQuery est une combinaison de la syntaxe du sélecteur XPath et CSS. Dans les chapitres suivants de ce didacticiel, vous en apprendrez davantage sur la syntaxe des sélecteurs.

Événement Document prêt

Vous avez peut-être remarqué que dans notre exemple, toutes les fonctions jQuery se trouvent à l'intérieur d'une fonction document prêt :

$(document).ready(function (){
// Commencez à écrire du code jQuery...
});

Cela permet d'empêcher l'exécution du code jQuery avant que le document ne soit complètement chargé (prêt).

Si vous exécutez la fonction avant que le document ne soit complètement chargé, l'opération peut échouer. Voici deux exemples précis :

Essayer de masquer un élément inexistant pour obtenir la taille d'une image incomplètement chargée

Astuce : Écriture concise (même effet que ci-dessus) :

$(function(){
// Commencez à écrire du code jQuery...
});

Vous pouvez choisir la méthode que vous souhaitez exécuter jQuery une fois la méthode du document prête.


Formation continue
||
<!DOCTYPE html> <html> <head> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <button>点我</button> </body> </html>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel