Maison  >  Article  >  interface Web  >  Il existe plusieurs façons d'écrire une fonction prête pour jquery

Il existe plusieurs façons d'écrire une fonction prête pour jquery

青灯夜游
青灯夜游original
2022-11-25 20:38:081806parcourir

La fonction jquery ready a trois façons d'écrire : 1. La manière complète d'écrire "$(document).ready(function(){//ready code});" 2. La manière d'omettre le document est " $().ready(function( ){//Ready code});"; 3. La méthode d'écriture "$(function(){//Ready code});" lorsque document et ready() sont omis.

Il existe plusieurs façons d'écrire une fonction prête pour jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.1, ordinateur Dell G3.

Fonction jquery document ready

Parfois, dans la page HTML, nous devons attendre que tout le contenu HTML de la page soit chargé avant d'exécuter le code JS. À ce moment, jQuery fournit une fonction nommée document. prêt. Ce problème peut être résolu facilement.

Par exemple :

<script type="text/javascript">
$(document).ready(function () {
//文档就绪后直接运行的JS代码
});
</script>
  • $ : logo jquery

  • onload : Chargez tout le contenu de la page, y compris les ressources externes (images, documents, etc. fichiers)

    Chargez d'abord tout le contenu et les ressources externes sur la page, Puis chargez le code js

  • ready (fonction document ready) : chargez le contenu dans la page, hors ressources externes ()

    Chargez d'abord tout le contenu des balises dans la page, puis chargez le code js, et enfin charger les ressources externes

Le code de cas suivant :

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(
				function() { //文档就绪后直接运行的代码
					function f1() {
						var div1 = document.getElementById("div1");
						div1.innerText = "Hello";
					}
					f1();
				});
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

Utilisez la méthode ready() de jQuery pour exécuter le code dans le document HTML une fois celui-ci complètement chargé, ce qui empêche la recherche d'éléments inexistants.

Il existe plusieurs façons décrire une fonction prête pour jquery

Dans jQuery, $(document).ready(function () {}) peut être omis sous la forme :

$().ready(function(){})
$(function(){});

En termes de taille de code, le deuxième type est plus petit et mérite d'être recommandé.

À en juger par l'utilisation du code jQuery ci-dessus, jQuery simplifie le code JS et nécessite moins de code, ce qui facilite le développement et la maintenance du code JS dans son ensemble.

Résumé : Il existe trois façons d'écrire la fonction document prêt

Le premier format d'écriture de la fonction document prêt

$(document).ready(function(){
alert("文档就绪函数第一种书写方法");
})

La deuxième méthode d'écriture de la fonction document prêt

$().ready(function(){
alert("文档就绪函数第二种书写方法");
})

La troisième méthode d'écriture du fonction de préparation des documents

$(function(){
alert("文档就绪函数第三种书写方法");
})

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn