Zusammenfassung und Vorsichtsmaßnahmen zur jQuery-Syntax

1. Referenzen zu Seitenelementen
Das Referenzieren von Elementen über $() von jquery umfasst Methoden wie ID, Klasse, Elementname, hierarchische Beziehung von Elementen, dom- oder xpath-Bedingungen usw., und das zurückgegebene Objekt ist eine jquery Wenn Sie ein Objekt (Collection-Objekt) verwenden, können Sie von DOM definierte Methoden nicht direkt aufrufen.

2. Konvertierung zwischen jQuery-Objekten und Dom-Objekten
Nur ​​JQuery-Objekte können die von JQuery definierten Methoden verwenden. Beachten Sie, dass es einen Unterschied zwischen Dom-Objekten und JQuery-Objekten gibt. Beim Aufrufen von Methoden sollten Sie darauf achten, ob Sie mit Dom-Objekten oder JQuery-Objekten arbeiten.
Gewöhnliche Dom-Objekte können im Allgemeinen über $() in JQuery-Objekte konvertiert werden.
Zum Beispiel: $(document.getElementById("msg")) ist ein JQuery-Objekt und Sie können JQuery-Methoden verwenden.
Weil das JQuery-Objekt selbst eine Sammlung ist. Wenn das JQuery-Objekt in ein Dom-Objekt umgewandelt werden soll, muss daher eines der Elemente abgerufen werden, was im Allgemeinen über einen Index abgerufen werden kann.
Zum Beispiel: $("#msg")[0], $("p").eq(1)[0], $("p").get()[1], $("td " )[5] Dies sind Dom-Objekte. Sie können Methoden in Dom verwenden, aber Sie können keine Jquery-Methoden mehr verwenden.
Die folgenden Schreibmethoden sind korrekt:
$("#msg").html();
$("#msg")[0].innerHTML;
$("# msg" ).eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3. So erhalten Sie ein Element der jQuery-Sammlung
Für In der erhaltenen Elementsammlung können Sie zum Abrufen eines Elements (angegeben durch den Index) die Methode eq oder get(n) oder die Indexnummer verwenden. Beachten Sie, dass eq ein Jquery-Objekt zurückgibt, während get (n) und index return ein Dom sind Elementobjekt. Für JQuery-Objekte können Sie nur JQuery-Methoden und für Dom-Objekte nur Dom-Methoden verwenden. Sie möchten beispielsweise den Inhalt des dritten < Es gibt zwei Methoden:
$("p").eq(2).html(); //Rufen Sie die Methode von jquery object auf
$("p").get(2).innerHTML ; / /Dom-Methodenattribute aufrufen

4. Dieselbe Funktion implementiert set und get
Viele Methoden in Jquery sind so, hauptsächlich einschließlich der folgenden:
$("#msg").html (); // Den HTML-Inhalt des Elementknotens mit der ID msg zurückgeben.
$("#msg").html("neuer Inhalt");
//Schreiben Sie "neuer Inhalt" als HTML-Zeichenfolge den Inhalt des Elementknotens mit der ID von msg, die Seite zeigt fetten neuen Inhalt an

$("#msg").text(); //Gibt den Textinhalt des Elementknotens mit der ID von zurück Nachricht.
$("#msg").text("neuer Inhalt");
//Schreiben Sie "neuer Inhalt" als normale Textzeichenfolge Geben Sie den Inhalt des Elementknotens mit der ID msg ein und die Seite zeigt fett gedruckten neuen Inhalt

$("#msg").height(); //Das Element mit der ID msg zurückgeben Die Höhe des Elements
$("#msg").height("300"); //Setzen Sie die Höhe des Elements mit der ID msg auf 300
$("#msg").width() ; / /Gib die Breite des Elements mit der ID msg zurück
$("#msg").width("300"); //Setze die Breite des Elements mit der ID msg auf 300

$ ("input ").val("); //Den Wert des Formulareingabefelds zurückgeben
$("input").val("test"); //Den Wert des zu testenden Formulareingabefelds festlegen

$("#msg").click(); //Trigger das Klickereignis des Elements mit der ID msg
$("#msg").click(fn); Klickereignis des Elements mit der ID msg Funktionen für Klickereignisse hinzufügen
Ähnlich können Unschärfe-, Fokus-, Auswahl- und Übermittlungsereignisse zwei Aufrufmethoden haben

5. Sammlungsverarbeitungsfunktion
Für den Sammlungsinhalt von jquery zurückgegeben, müssen wir es nicht selbst durchlaufen und jedes Objekt wird separat verarbeitet. jquery hat uns eine sehr praktische Methode zur Verfügung gestellt, um Sammlungen zu verarbeiten:
$("p"). every(function(i){this. style.color=['#f00','#0f0','#00f']})
//Setzen Sie verschiedene Schriftfarben für die p-Elemente mit den Indizes 0, 1, bzw. 2.

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})

//Alternative Tabellenzeilen erzielen Farbwechseleffekt

$("p").click(function(){.html())})

//Klickereignis für jedes p-Element hinzugefügt, Klicken Sie auf ein p-Element. Dann wird dessen Inhalt angezeigt

6. Erweitern Sie die Funktionen, die wir benötigen

$.extend({
min: function(a, b){return a < b?a :b; },
max: function(a, b){return a > (über „$.Method name“-Aufruf):
+",min="+$.min(10,20));

7. Unterstützung der Methodenverkettung
Die sogenannte Verkettung bedeutet, dass Sie ein JQuery-Objekt schreiben können, das kontinuierlich verschiedene Methoden aufruft.

Zum Beispiel:

$("p").click(function(){.html())})
.mouseover(function(){})
.each(function(i ) {this.style.color=['#f00','#0f0','#00f']});

8. Die Manipulation des Elementstils
umfasst hauptsächlich die folgenden Methoden:
$("#msg").css("background"); //Die Hintergrundfarbe des Elements zurückgeben
$ (" #msg").css("background","#ccc") //Setzen Sie den Elementhintergrund auf grau
$("#msg").height(300); $("#msg"). width( "200"); //Breite und Höhe festlegen
$("#msg").css({ color: "red", background: "blue" });//Stile in Form von Namen festlegen -Wertepaare
$("#msg").addClass("select"); //Eine Klasse mit dem Namen select zum Element hinzufügen
$("#msg").removeClass("select"); /Lösche das Element Die Klasse namens select
$("#msg").toggleClass("select"); //Wenn es existiert (existiert nicht), lösche (füge) die Klasse namens select

9. Verbesserung der Ereignisverarbeitungsfunktion

Jquery hat uns verschiedene Ereignisverarbeitungsmethoden zur Verfügung gestellt. Wir müssen Ereignisse nicht direkt in HTML-Elemente schreiben, sondern können Ereignisse direkt zu über JQuery erhaltenen Objekten hinzufügen.
Zum Beispiel:
$("#msg").click(function(){}) //Dem Element ein Klickereignis hinzugefügt
$("p").click(function(i) { this.style.color=['#f00','#0f0','#00f']})
//Stellen Sie unterschiedliche Verarbeitungen für drei verschiedene p-Element-Klickereignisse ein
In jQuery Mehrere benutzerdefinierte Ereignisse:
(1) hover(fn1,fn2): Eine Methode, die Hover-Ereignisse imitiert (die Maus bewegt sich über ein Objekt und aus diesem heraus). Wenn die Maus über ein passendes Element fährt, wird die erste angegebene Funktion ausgelöst. Wenn sich die Maus aus diesem Element herausbewegt, wird die angegebene zweite Funktion ausgelöst.
//Wenn die Maus auf einer Zeile der Tabelle platziert wird, setzen Sie die Klasse auf „Over“ und beim Verlassen auf „Out“.
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .addClass("out");
});
(2) ready(fn): Binden Sie eine Funktion, die ausgeführt werden soll, wenn das DOM geladen und zur Abfrage und Bearbeitung bereit ist.
$(document).ready(function(){})
//Wenn die Seite geladen wird, wird „Load Success“ angezeigt, was dem Onload-Ereignis entspricht. Äquivalent zu $(fn)
(3) toggle(evenFn,oddFn): Schalten Sie die Funktion um, die jedes Mal aufgerufen werden soll, wenn darauf geklickt wird. Wenn auf ein passendes Element geklickt wird, wird die erste angegebene Funktion ausgelöst, und wenn erneut auf dasselbe Element geklickt wird, wird die zweite angegebene Funktion ausgelöst. Jeder weitere Klick wiederholt den Aufruf dieser beiden Funktionen nacheinander.
//Rotieren Sie das Hinzufügen und Löschen der ausgewählten Klasse bei jedem Klick.
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass( "selected");
});
(4) trigger(eventtype): Löst einen bestimmten Ereignistyp für jedes passende Element aus.
Zum Beispiel:
$("p").trigger("click"); //Das Klickereignis aller p-Elemente auslösen
(5) bind(eventtype,fn), unbind(eventtype) : event Binding and unbinding
entfernt (fügt) das gebundene Ereignis von jedem passenden Element hinzu.
Zum Beispiel:
$("p").bind("click", function(){.text());} //Ein Klickereignis für jedes p-Element hinzufügen
$( "p").unbind(); //Alle Ereignisse auf allen p-Elementen löschen
$("p").unbind("click") //Alle Klickereignisse auf allen p-Elementen löschen

10. Mehrere praktische Spezialeffektfunktionen

Unter ihnen bieten die Methoden toggle() und slidetoggle() Funktionen zum Umschalten des Zustands.
Zum Beispiel umfasst die Methode toggle() die Methoden hide() und show().
Die Methode slideToggle() umfasst die Methoden slideDown() und slideUp.

11. Mehrere nützliche jQuery-Methoden
$.browsertyp: Browsertyp erkennen. Gültige Parameter: Safari, Opera, Msie, Mozilla. Wenn Sie beispielsweise prüfen, ob es sich um IE: $.browser.isie handelt und es sich um einen IE-Browser handelt, wird true zurückgegeben.
$.each(obj, fn): Allgemeine Iterationsfunktion. Kann verwendet werden, um Objekte und Arrays ungefähr zu durchlaufen (anstelle einer Schleife).
Zum Beispiel ist
$.each( [0,1,2], function(i, n){ ; });
äquivalent zu:
var tempArr=[0,1, 2] ;
for(var i=0;i;
}
kann auch JSON-Daten verarbeiten, z. B.
$.each( { name : "John", lang: "JS" }, function(i, n){ });
Das Ergebnis ist:
Name:name, Wert:John
Name:lang, Wert:JS
$ .extend(target,prop1,propN): Erweitern Sie ein Objekt mit einem oder mehreren anderen Objekten und geben Sie das erweiterte Objekt zurück. Dies ist die von jquery implementierte Vererbungsmethode.
Zum Beispiel:
$.extend(settings, options);
//Einstellungen und Optionen zusammenführen und das zusammengeführte Ergebnis an die Einstellungen zurückgeben, was dem Erben der Optionen durch die Einstellung und dem Speichern des geerbten Ergebnisses in der Einstellung entspricht .
var settings = $.extend({}, defaults, options);
//Standardeinstellungen und Optionen zusammenführen und das zusammengeführte Ergebnis auf die Einstellung zurücksetzen, ohne den Standardinhalt zu überschreiben.
Kann mehrere Parameter haben (mehrere Elemente kombinieren und zurückgeben)
$.map(array, fn): Array-Zuordnung. Speichert die Elemente in einem Array (nach Verarbeitung der Transformation) in ein neues Array und gibt das resultierende neue Array zurück.
Zum Beispiel:
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
Der Inhalt von tempArr ist: [4,5 ,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr content is: [2 ,3]
$.merge(arr1,arr2): Zwei Arrays zusammenführen und doppelte Elemente löschen.
Zum Beispiel: $.merge( [0,1,2], [2,3,4] ) //Return [0,1,2,3,4]
$.trim(str): Löschen Sie Leerzeichen an beiden Enden der Zeichenfolge.
Zum Beispiel: $.trim("Hallo, wie geht es dir? "); //Return "Hallo, wie geht es dir? "

Konflikte zwischen benutzerdefinierten Methoden oder anderen Klassenbibliotheken und jQuery lösen
Oft definieren wir die $(id)-Methode selbst, um ein Element zu erhalten, oder einige andere js-Bibliotheken wie Prototypen definieren auch die $-Methode. Wenn diese Inhalte gleichzeitig zusammengestellt werden, führt dies zur Definition einer variablen Methode Konflikte bietet Jquery eine spezielle Methode zur Lösung dieses Problems.
Verwenden Sie die Methode jQuery.noConflict(); in jquery, um die Kontrolle über die Variable $ an die erste Bibliothek zu übertragen, die sie implementiert, oder an die zuvor angepasste $-Methode. Wenn Sie Jquery später verwenden, ersetzen Sie einfach alle $ durch jQuery. Beispielsweise wird die ursprünglich referenzierte Objektmethode $("#msg") in jQuery("#msg") geändert.
Zum Beispiel:
jQuery.noConflict();
// Beginnen Sie mit der Verwendung von jQuery
jQuery("p p").hide();
// Verwenden Sie $() aus anderen Bibliotheken
$("content").style.display = 'none';

Das Obige ist eine Zusammenfassung der jQuery-Syntax und Vorsichtsmaßnahmen. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.org). php.cn)!