简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Questions et réponses frontales > le corps du texte

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

青灯夜游
Libérer： 2022-11-25 20:38:08
original
1711 Les gens l'ont consulté

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>
Copier après la connexion

  • $ : 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>
Copier après la connexion

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(){});
Copier après la connexion

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("文档就绪函数第一种书写方法");
})
Copier après la connexion

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

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

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

$(function(){
alert("文档就绪函数第三种书写方法");
})
Copier après la connexion

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

Étiquettes associées：
javascript jquery
source：php.cn
Article précédent：Qu'est-ce que le sélecteur CSS "+" ? Article suivant：Comment vue détermine-t-il si un élément se trouve dans la zone visible ?
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Étapes pour installer jQuery dans Nuxt.js Bien que j'essaie d'ajouter jQuery dans mon projet, j'obtiens une erreur indiquant qu'il n...
Depuis 2023-11-06 16:41:50
0
1
225
jQuery obtient une mauvaise valeur lors de l'obtention de l'attribut de données J'ai un div avec l'attribut data <divclass='p1'data-location='1'></div> J'ai u...
Depuis 2023-11-01 23:01:19
0
1
209
Prise en charge du codage de transfert de jQuery : fragmenté Je suis développeur Web. Dans mon script, j'utilise header() pour définir "Transfer-E...
Depuis 2023-10-25 23:44:37
0
1
230
Comment obtenir les dimensions naturelles d'une image en utilisant JavaScript ou jQuery ? Jusqu'à présent, j'ai ce code : varimg=document.getElementById('draggable'); varwidth=img....
Depuis 2023-10-21 13:53:08
0
2
275
Agrandir automatiquement la zone de texte J'essaie de créer une simple zone de texte à expansion automatique. Voici mon code : texta...
Depuis 2023-10-21 08:49:23
0
2
225
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！