JavaScript - Test de jQuery


Test de la bibliothèque du framework JavaScript - jQuery

Référence jQuery

Pour tester une 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 :

Référencement de jQuery

<!DOCTYPE html> ;
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> ;
</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 :

Manière JavaScript :

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

L'équivalent jQuery est différent de :

Méthode jQuery :

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

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.

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

lampjQuery renvoie un objet jQuery, qui est différent de l'objet DOM transmis.
lampjQuery 返回 jQuery 对象，与已传递的 DOM 对象不同。
jQuery 对象拥有的属性和方法，与 DOM 对象的不同。
您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。
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.

Test de jQuery

Veuillez essayer l'exemple suivant :

Exemple

<!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>

Exécuter Instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Veuillez réessayer cet exemple :

Instance

<!DOCTYPE html>
<html>
<head>
<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>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Comme vous pouvez le voir dans l'exemple ci-dessus, jQuery permet le chaînage (syntaxe de chaîne).

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

Besoin d'en savoir plus ? Le site Web PHP chinois vous propose un excellent didacticiel jQuery.