Der Inhalt dieses Artikels besteht darin, die Verwendung von jQuery vorzustellen. Was sind jQuery-Selektoren? Lassen Sie alle die Verwendung der jQuery-Dateibibliothek, die Verwendung der grundlegenden Syntax und den jQuery-Selektor verstehen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. So verwenden Sie
Die jQuery-Bibliothek befindet sich in einer JavaScript-Datei, die alle jQuery-Funktionen enthält.
Wenn eine Webseite jQuery verwenden muss, muss zuerst die js-Datei von jQuery in die Webseite eingeführt werden.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> </head> <body> </body> </html>
2. jQuery-Syntax
Die jQuery-Syntax besteht darin, HTML-Elemente auszuwählen und bestimmte Operationen an den ausgewählten Elementen auszuführen. [Empfohlene verwandte Video-Tutorials: jQuery-Tutorial]
Grundlegende grammatikalische Form:
$(selector).action()
Beispiel:
$("p").hide() // 隐藏所有 <p> 元素
$("#myInfo").hide() // 隐藏所有 id="myInfo" 的元素Schreiben:
Alle jQuery-Funktionen befinden sich in einer document.ready-Funktion. Wie unten gezeigt.
Damit soll verhindert werden, dass jQuery-Code ausgeführt wird, bevor das Dokument vollständig geladen (bereit) ist, d. h. das DOM kann nicht manipuliert werden, bis das DOM geladen ist.
Wenn Sie die Funktion ausführen, bevor das Dokument vollständig geladen ist, schlägt der Vorgang möglicherweise fehl.
$(document).ready(function(){
// 代码部分写在这里
});kann auch wie folgt abgekürzt werden:
$(function(){
// 这里写代码
});Zum Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("button").click(function(){
$("#myDiv1").html("Hello JQuery World");
$("#myDiv1").css("background-color","green");
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<div id="myDiv1">Hello</div>
</body>
</html>
3. Basisauswahl
(1) Elementselektor: Der jQuery-Elementselektor wählt Elemente anhand ihrer Namen aus.
Beispiel: Verwenden Sie die Elementauswahl, um alle
-Elemente auszuwählen und auszublenden.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素1</p>
<p>p元素2</p>
<div id="myDiv1">Hello</div>
</body>
</html>
(2) #id selector: Der jQuery #id selector wählt das angegebene Element über das id-Attribut des HTML-Elements aus.
Die ID des Elements auf der Seite sollte eindeutig sein. Wenn Sie also das einzige Element auf der Seite auswählen möchten, müssen Sie den #id-Selektor verwenden.
Beispiel: Verwenden Sie das # id-Selektor zum Auswählen des id="myDiv1"-Elements, um es auszublenden.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("button").click(function(){
$("#myDiv1").hide();
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素1</p>
<p>p元素2</p>
<div id="myDiv1">Hello</div>
</body>
</html>
(3) .class selector: Der jQuery-Klassenselektor kann Elemente über die angegebene Klasse finden.
Beispiel: Verwenden Sie den Klassenselektor, um das Element mit Class="myClass1" auszuwählen und auszublenden.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
$("button").click(function(){
$(".myClass1").hide();
});
});
</script>
</head>
<body>
<button type="button">点击</button>
<p>p元素1</p>
<p>p元素2</p>
<div id="myDiv1">Hello</div>
<div Class="myClass1">你好</div>
</body>
</html>
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.
Das obige ist der detaillierte Inhalt vonWie verwende ich jQuery? Was sind jQuery-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
