Heim >Web-Frontend >js-Tutorial >jQuery implementiert das Anzeigen, Ausblenden und Ausfüllen von Div
jQuery implementiert das Anzeigen, Ausblenden und Ausfüllen von Div
- 善始善终Original
- 2020-08-26 22:25:362169Durchsuche
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"/>
(2) Verwenden Sie CSS, um die Seite zu verschönern.
1) Erstellen Sie einen CSS-Ordner unter dem Projekt Datei vor dem 36cc49f0c466276486e50c850b7e4956-Tag.
<div></div> <div></div> <div></div>
3) Seitenstil unter der style.css-Datei hinzufügen
- Globaler Stil
-
<head> <link rel="stylesheet" href="css/style.css" type="text/css"/> </head>
- div-Stil
-
*{ margin: 0; padding: 0; }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 36cc49f0c466276486e50c850b7e4956-Tag in index.html ein.
div{
width:500px;
height:100px;
border:1px solid #a5b6c8;
background:#eef3f7;
display: none;
}(4) Effektimplementierung
1) Erstellen Sie das 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0-Tag vor dem 36cc49f0c466276486e50c850b7e4956-Tag
(2) Im 3f1c4e4b6b16bbbd69b2ee476dc4f83a 995465eb7f9652a7335342e417a6aec9-Tag
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
Hinweis: Der Unterschied zwischen der Eingabefunktion von
jQuery und der Eingabefunktion von JavaScript: Die Eingabefunktion von jQuery wird nach allen HTML-Tags (DOM ) werden geladen.Das window.onload-Ereignis von JavaScript wartet, bis der gesamte Inhalt, einschließlich Dateien wie externe Bilder, geladen ist, bevor es ausgeführt wird.
- (3) Veranstaltung unter der Eintragsfunktion registrieren
- Anzeigen
$(document).ready(function(){
});
Ausblenden$('#show').click(function(){ $("div").show(); });
-
$('#hide').click(function(){ $("div").hide(); }Hinweis: Wenn Sie nicht herunterladen möchten und jQuery speichern, dann kann es auch über ein CDN (Content Delivery Network) referenziert werden. Staticfile CDN, Baidu, Youpaiyun, Sina, Google und Microsoft haben alle jQuery auf ihren Servern. Wenn Ihre Website-Benutzer aus dem Inland stammen, wird empfohlen, inländische CDN-Adressen wie Baidu, Youpaiyun, Sina usw. zu verwenden. Wenn Ihre Website-Benutzer aus dem Ausland sind, können Sie Google und Microsoft verwenden. Wenn Sie beispielsweise das CDN von Baidu verwenden möchten, können Sie die folgende Methode verwenden:
$('#text').click(function(){
$("div").text("内容填充");
});(4) 按F12浏览页面效果。Das obige ist der detaillierte Inhalt vonjQuery implementiert das Anzeigen, Ausblenden und Ausfüllen von Div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!