Maison > Article > interface Web > jQuery implémente l'affichage, le masquage et le remplissage de texte div
jQuery implémente l'affichage, le masquage et le remplissage de texte div
- 善始善终original
- 2020-08-26 22:25:361994parcourir
Lors de l'utilisation de la programmation JavaScript native, nous avons constaté qu'elle présente de nombreux inconvénients : par exemple, il n'est pas pratique d'obtenir des éléments, et il est parfois nécessaire de les parcourir. Il peut y avoir une imbrication dans le parcours, ce qui rend le code plus lourd et plus lourd. a une mauvaise tolérance. Aujourd'hui, je vais vous amener à utiliser jQuery pour implémenter votre première page Web.
(1) Utiliser la page de mise en page HTML
1) Créez le projet Pro_01, créez une page Web sous le projet, nommez-la index.html
2) Dans la page HTML ; Ajoutez trois boutons ;
<input type="button" value="显示" id="show" /> <input type="button" value="隐藏" id="hide" /> <input type="button" value="内容填充" id="text"/>
3) Ajoutez trois balises DIV à la page HTML
<div></div> <div></div> <div></div>
(2) Utilisez CSS pour embellir la page
1) Créez dans le cadre de ce projet. css ;
2) Créez un fichier CSS, nommez-le style.css et importez le fichier avant la balise 36cc49f0c466276486e50c850b7e4956
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>3) Ajouter un style de page
Style global
*{
margin: 0;
padding: 0;
}-
style div
div{
width:500px;
height:100px;
border:1px solid #a5b6c8;
background:#eef3f7;
display: none;
}4) Appuyez sur F12 pour parcourir l'effet de page.
(3) Importer le fichier jQuery
1) Téléchargez le fichier jquery-3.5.1.js depuis le site officiel (https://jquery.com/download/
) ;2) Une fois le téléchargement terminé, créez un dossier js sous le projet et placez le fichier jquery-3.5.1js téléchargé dans le dossier js
Remarque : la version de jQuery utilisée dans ce cas est la 3.5 ; .1 , dans ce cas, le fichier de la bibliothèque jQuery est placé sous le dossier js Pour faciliter le débogage, un chemin relatif est utilisé.
3) Introduisez le fichier avant la balise 36cc49f0c466276486e50c850b7e4956
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
(4) Implémentation de l'effet
1) Créez la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 avant la balise 36cc49f0c466276486e50c850b7e4956 sur la page index.html
(2) Écrivez la fonction d'entrée
$(document).ready(function(){
});dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 Remarque :
La différence entre la fonction d'entrée jQuery et l'entrée JavaScript. fonction :
La fonction de saisie de jQuery est exécutée une fois que toutes les balises HTML (DOM) sont chargées.
L'événement window.onload de JavaScript attend que tout le contenu, y compris les fichiers tels que les images externes, soit chargé avant d'être exécuté.
(3) Enregistrez l'événement sous la fonction d'entrée
Affichage
$('#show').click(function(){
$("div").show();
});-
Masquer
$('#hide').click(function(){
$("div").hide();
}Remplissage de texte
$('#text').click(function(){
$("div").text("内容填充");
});(4) 按F12浏览页面效果。Remarque : si vous ne souhaitez pas télécharger et stocker jQuery, puis il peut également être référencé via un CDN (Content Delivery Network). Staticfile CDN, Baidu, Youpaiyun, Sina, Google et Microsoft ont tous jQuery sur leurs serveurs. Si les utilisateurs de votre site sont nationaux, il est recommandé d'utiliser des adresses CDN nationales telles que Baidu, Youpaiyun, Sina, etc. Si les utilisateurs de votre site sont étrangers, vous pouvez utiliser Google et Microsoft. Par exemple, si vous souhaitez utiliser le CDN de Baidu, vous pouvez utiliser la méthode suivante :
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head>
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!