communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

JavaScript - Test de jQuery

Référence jQuery

Pour tester la bibliothèque JavaScript, vous devez la référencer dans votre page web.

Pour référencer une bibliothèque, utilisez la balise <script> avec son attribut src défini sur l'URL de la bibliothèque :

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">//Cité ici
</script>
</head>
<body>
</body>
</html>


Description de jQuery

La fonction principale de jQuery est la fonction $() (fonction jQuery). Si vous transmettez un objet DOM à cette fonction, elle renvoie un objet jQuery auquel est ajoutée la fonctionnalité jQuery.

jQuery vous permet de sélectionner des éléments via des sélecteurs CSS.

En JavaScript, vous pouvez attribuer une fonction pour gérer les événements de chargement de fenêtre :

En utilisant JavaScript

function myFunction()
{
var obj =document.getElementById("h01");
obj.innerHTML="Bonjour jQuery";
}
onload=myFunction;

Utiliser jQuery

function maFonction()
{
$("#h01").html("Bonjour jQuery");
}
$(document).ready(maFonction);

Dans la dernière ligne du code ci-dessus, l'objet document HTML DOM est passé à jQuery : $(document).

Lorsque vous transmettez un objet DOM à jQuery, jQuery renvoie un objet jQuery enveloppé dans un objet HTML DOM.

La fonction jQuery renvoie un nouvel objet jQuery, dont ready() est une méthode.

Puisque les fonctions sont des variables en JavaScript, vous pouvez transmettre myFunction en tant que variable à la méthode ready de jQuery.

Remarque :


jQuery renvoie un objet jQuery, qui est différent de l'objet DOM transmis.
Les objets jQuery ont des propriétés et des méthodes différentes de celles des objets DOM.
Vous ne pouvez pas utiliser les propriétés et méthodes HTML DOM sur les objets jQuery.


Exemple de comparaison : 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunction(){
$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

vs. 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunction(){
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

Comme vous pouvez le voir dans l'exemple ci-dessus, jQuery autorise les liens (chaînage de grammaire) .

Le chaînage est un moyen pratique d'effectuer plusieurs tâches sur le même objet.


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#runoob").attr("href")); }); }); </script> </head> <body> <p><a href="http://www.php.cn" id="runoob">php.cn</a></p> <button>显示 href 属性的值</button> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492831 joue