简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

jQuery implementiert das Anzeigen, Ausblenden und Ausfüllen von Div

善始善终
Freigeben： 2020-08-27 14:03:00
Original
2102 Leute haben es durchsucht

Bei der Verwendung nativer JavaScript-Programmierung haben wir festgestellt, dass sie viele Mängel aufweist: Beispielsweise ist es unpraktisch, Elemente abzurufen, und manchmal ist es erforderlich, sie zu durchlaufen. Es kann zu Verschachtelungen beim Durchlaufen kommen, was den Code umständlicher und schlechter macht Toleranz. Heute werde ich Sie dazu bringen, jQuery zum Implementieren Ihrer ersten Webseite zu verwenden.

(1) HTML-Layoutseite verwenden

1) Erstellen Sie das Projekt Pro_01, erstellen Sie eine Webseite unter dem Projekt, nennen Sie sie index.html

2) Fügen Sie der HTML-Seite drei Schaltflächen hinzu

rrree

; Fügen Sie der Seite drei DIV-Tags hinzu. 

<input type="button" value="显示" id="show" />
<input type="button" value="隐藏" id="hide" />
<input type="button" value="内容填充" id="text"/>
Nach dem Login kopieren

(2) Verwenden Sie CSS, um die Seite zu verschönern.

1) Erstellen Sie einen CSS-Ordner unter dem Projekt Datei vor dem -Tag. 

<div></div>
<div></div>
<div></div>
Nach dem Login kopieren

3) Seitenstil unter der style.css-Datei hinzufügen

    Globaler Stil

  • <head>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
    Nach dem Login kopieren
    div-Stil

  • *{
       margin: 0;
       padding: 0;
}
    Nach dem Login kopieren
    • 4) Drücken Sie F12, um den Seiteneffekt zu durchsuchen.

(3) Einführung von jQuery-Dateien

1) Laden Sie die Datei jquery-3.5.1.js von der offiziellen Website herunter (https://jquery.com/download/);

2) Erstellen Sie nach Abschluss des Downloads Legen Sie die heruntergeladene jQuery-3.5.1js-Datei im Ordner js ab. Hinweis: Die in diesem Fall verwendete jQuery-Version ist 3.5.1. Platzieren Sie in diesem Fall die jQuery-Bibliotheksdatei im Ordner js . Um das Debuggen zu erleichtern, verwenden Sie relative Pfade.

3) Führen Sie die Datei vor dem -Tag in index.html ein. 

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

(4) Effektimplementierung

1) Erstellen Sie das <script></script>-Tag vor dem -Tag

(2) Im

Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！