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:201452Durchsuche

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.

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (34) – Selektoren in jQueryDer 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 CDN

Hinweis: 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()

$: Dollarzeichendefinition jQuery


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 oben

Dieser 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.

6. jQuery-Auswahltabelle

$("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).

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn