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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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