jQuery implémente l'affichage, le masquage et le remplissage de texte div-js tutoriel-php.cn

jQuery implémente l'affichage, le masquage et le remplissage de texte div

善始善终

Libérer： 2020-08-27 14:03:00

original

2141 Les gens l'ont consulté

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"/>

Copier après la connexion

3) Ajoutez trois balises DIV à la page HTML

<div></div>
<div></div>
<div></div>

Copier après la connexion

(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

<head>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>

Copier après la connexion

3) Ajouter un style de page

Style global

*{
       margin: 0;
       padding: 0;
}

Copier après la connexion

style div

div{
        width:500px;
       height:100px;
       border:1px solid #a5b6c8;
       background:#eef3f7;
       display: none;
    }

Copier après la connexion

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

<script type="text/javascript" src="js/jquery-3.5.1.js"></script>

Copier après la connexion

(4) Implémentation de l'effet

1) Créez la balise <script></script> avant la balise sur la page index.html

(2) Écrivez la fonction d'entrée

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

Copier après la connexion

dans la balise <script></script> 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

$(&#39;#show&#39;).click(function(){
   $("div").show();
});

Copier après la connexion

Masquer

$(&#39;#hide&#39;).click(function(){
   $("div").hide();
}

Copier après la connexion

Remplissage de texte

$(&#39;#text&#39;).click(function(){
    $("div").text("内容填充");
});(4) 按F12浏览页面效果。

Copier après la connexion

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>

Copier après la connexion

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!