Heim > Artikel > Web-Frontend > Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (34) – Selektoren in jQuery
Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (34) – Selektoren in jQuery
- 黄舟Original
- 2017-02-04 14:43:201407Durchsuche
1. Was ist jQuery?
jQuery wurde vom Amerikaner John Resig entwickelt und hat viele JavaScript-Meister aus der ganzen Welt angezogen, sich ihm anzuschließen.
Der Gründer und technische Leiter von jQuery, arbeitet derzeit als JavaScript-Tool-Entwicklungsingenieur bei Mozilla. Er ist Autor klassischer JavaScript-Bücher wie „Pro JavaScript Techniques“ (d. h. „Mastering JavaScript“).
jQuery ist nach dem Prototyp ein weiteres hervorragendes JavaScript-Framework. Sein Zweck ist: WENIGER SCHREIBEN, MEHR TUN, weniger Code schreiben und mehr Dinge tun.
jQuery ist eine leichte JS-Bibliothek (nur 21 KB nach der Komprimierung), die von anderen JS-Bibliotheken nicht erreicht wird. Sie ist mit CSS3 und verschiedenen Browsern kompatibel.
Download-Adresse: http://jquery.com/download/
jQuery ist eine schnelle, übersichtliche JavaScript-Bibliothek, mit der Benutzer HTML-Dokumente und Ereignisse einfacher verarbeiten und Animationseffekte erzielen können. und bieten bequem AJAX-Interaktion für Websites.
jQuery kann den Code und den HTML-Inhalt der HTML-Seite des Benutzers trennen. Das heißt, es ist nicht erforderlich, eine Reihe von JS zum Aufrufen einzufügen Befehle, definieren Sie einfach Just id.
2. Derzeit beliebte Javascript-Bibliotheken
jQuery
EXTJS
Prototyp
DWR
Dojo
YUI
MooTools
3. Die jQuery-Bibliothek enthält die Folgende Funktionen
1. HTML-Element-Auswahl
3. HTML-Ereignisfunktion
5. Javascript-Spezialeffekte und -Animationen
6. HTML-DOM-Durchquerung und -Änderung
8. jQuery-Bibliothek hinzufügen
kann Google oder Microsofts CDN hinzufügen jQuery
Googles CDN
Microsofts CDNHinweis: In HTML5 gibt es Es ist nicht mehr nötig, type="text/javascript" zu schreiben, JavaScript ist die Standard-Skriptsprache in HTML5 und allen modernen Browsern.
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>
Es gibt zwei Versionen von JQuery, die heruntergeladen werden können: http://jquery.com/download/
<head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>1. Produktionsversion: wird für die aktuelle Version verwendet Websites wurde optimiert und komprimiert. 2. Entwicklungsversion: wird zum Testen und Entwickeln verwendet, unkomprimiert und lesbar.
5. Einfache und praktische Methoden
Die jQuery-Syntax ist für die Auswahl von HTML-Elementen kompiliert und kann bestimmte Operationen an Elementen ausführen.
Die grundlegende Syntax lautet: $(selector).action()
Selektor: HTML-Elemente abfragen und finden
action(): Operationen an Elementen ausführen
Zum Beispiel: $(this).hide Verstecke das aktuelle HTML-Element
Freunde, die auf den obigen Code achten, könnten dadurch verwirrt sein Folgender Code obenDieser Code soll verhindern, dass der jQuery-Code ausgeführt wird, wenn das Dokument vollständig geladen ist, da sonst Probleme auftreten können.
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
<span style="white-space:pre"> </span>$(document).ready(function(){
<span style="white-space:pre"> </span>$("button").click(function(){
<span style="white-space:pre"> </span>$(this).hide();
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>});
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html>Darüber hinaus können Sie Elementobjekte auch über andere Methoden abrufen
$(document).ready(function(){
--- jQuery functions go here ----
});1 Elementselektor $("# test"): Element mit id="test".
$("p"):
$(".test"): Element mit class="test".
$("p.intro"): Das
-Element von class="intro".
$("p#demo"): Das-Element mit id="demo".
2. Attributselektor jQuery verwendet XPath-Ausdrücke, um Elemente mit bestimmten Attributen auszuwählen.
$("[href]") wählt alle Elemente mit dem href-Attribut aus.
$("[href='#']") wählt alle Elemente mit href und einem Wert gleich # aus.
$("[href!='#']") Wählt alle Elemente mit einem href-Wert ungleich „#“ aus. $("[href$='.jpg']") wählt alle Elemente aus, deren href-Wert mit „.jpg“ endet. 3. CSS-Selektor
Mit dem jQuery-CSS-Selektor können Sie die CSS-Eigenschaften von HTML-Elementen ändern.
$("p").css("background-color","red");Das Obige ist Xiaoqiangs HTML5-Entwicklungspfad für Mobilgeräte (34) – – Der Inhalt des Selektors in jQuery. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).