Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (34) – Selektoren in jQuery-HTML-Tutorial-php.cn

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (34) – Selektoren in jQuery

黄舟

Freigeben： 2017-02-04 14:43:20

Original

1464 Leute haben es durchsucht

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 jQuery 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 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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Darüber hinaus können Sie Elementobjekte auch über andere Methoden abrufen

$(document).ready(function(){  
  
--- jQuery functions go here ----  
  
});

Nach dem Login kopieren

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");

Nach dem Login kopieren

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 (m.sbmmt.com).