Zusammenfassung einiger gängiger Methoden, die mit jQuery_jquery geliefert werden-js-Tutorial-php.cn

Methode selbst ($.each,$.map,$.contains,$ajax)

Gemeinsame Tools und Methoden

(1)$.trim

Die Methode $.trim wird verwendet, um überschüssige Leerzeichen am Anfang und Ende der Zeichenfolge zu entfernen.

Code kopieren Der Code lautet wie folgt:

$.trim('Hallo') // Hallo

(2)$.contains

Die Methode $.contains gibt einen booleschen Wert zurück, der angibt, ob ein DOM-Element (zweiter Parameter) ein untergeordnetes Element eines anderen DOM-Elements (erster Parameter) ist.

Code kopieren Der Code lautet wie folgt:

$.contains(document.documentElement, document.body); 

// wahr

$.contains(document.body, document.documentElement); 

// falsch

(3) $.each, $.map

Die Methode $.each wird verwendet, um Arrays und Objekte zu durchlaufen und dann das ursprüngliche Objekt zurückzugeben. Es akzeptiert zwei Parameter, nämlich die Datenerfassung und die Rückruffunktion.

Code kopieren Der Code lautet wie folgt:

$.each([ 52, 97 ], function( index, value ) {

console.log( index ": " value );

});

// 0: 52 

// 1:97 

var obj = {

p1: „Hallo“,

p2: „Welt“

};

$.each( obj, function( key, value ) {

console.log( key ": " value );

});

// p1: hallo

// p2: Welt

Es ist zu beachten, dass jQuery-Objektinstanzen auch über eine Each-Methode ($.fn.each) verfügen und die beiden ähnliche Funktionen haben.

Die Methode $.map wird auch zum Durchlaufen von Arrays und Objekten verwendet, gibt jedoch ein neues Objekt zurück.

Code kopieren Der Code lautet wie folgt:

var a = ["a", "b", "c", "d", "e"];

a = $.map(a, Funktion (n, i){

return (n.toUpperCase() i);

});

// ["A0", "B1", "C2", "D3", "E4"]

(4)$.inArray

Die Methode $.inArray gibt die Position eines Werts im Array zurück (beginnend bei 0). Befindet sich der Wert nicht im Array, wird -1 zurückgegeben.

Code kopieren Der Code lautet wie folgt:

var a = [1,2,3,4];

$.inArray(4,a) // 3

(5)$.extend

Die $.extend-Methode wird verwendet, um mehrere Objekte zum ersten Objekt zusammenzuführen.

Code kopieren Der Code lautet wie folgt:

var o1 = {p1:'a',p2:'b'};

var o2 = {p1:'c'};

$.extend(o1,o2);

o1.p1 // "c"

Eine andere Verwendung von $.extend besteht darin, ein neues Objekt zu generieren, um das ursprüngliche Objekt zu erben. Zu diesem Zeitpunkt sollte sein erster Parameter ein leeres Objekt sein.

Code kopieren Der Code lautet wie folgt:

var o1 = {p1:'a',p2:'b'};

var o2 = {p1:'c'};

var o = $.extend({},o1,o2);

o

// Objekt {p1: „c“, p2: „b“}

Standardmäßig ist das von der Erweiterungsmethode generierte Objekt eine „flache Kopie“. Wenn es sich bei einer Eigenschaft um ein Objekt oder Array handelt, wird nur ein Zeiger auf das Objekt oder Array generiert und der Wert nicht kopiert. Wenn Sie eine „tiefe Kopie“ wünschen, können Sie im ersten Parameter der Extend-Methode den booleschen Wert true übergeben.

Code kopieren Der Code lautet wie folgt:

var o1 = {p1:['a','b']};

var o2 = $.extend({},o1);

var o3 = $.extend(true,{},o1);

o1.p1[0]='c';

o2.p1 // ["c", "b"]

o3.p1 // ["a", "b"]

Im obigen Code ist o2 eine flache Kopie und o3 eine tiefe Kopie. Wenn also die Eigenschaften des ursprünglichen Arrays geändert werden, ändert sich auch o2, o3 jedoch nicht.

(6)$.proxy

Die $.proxy-Methode ähnelt der Bind-Methode von ECMAScript 5. Sie kann den Kontext der Funktion (d. h. dieses Objekts) und Parameter binden und eine neue Funktion zurückgeben.

Die Hauptverwendung von jQuery.proxy() besteht darin, Kontextobjekte an Rückruffunktionen zu binden.

Code kopieren Der Code lautet wie folgt:

var o = {

Typ: „Objekt“,

Test: Funktion(Ereignis) {

console.log(this.type);

}

};

$("#button")

.on("click", o.test) // Keine Ausgabe

.on("click", $.proxy(o.test, o)) // object

Im obigen Code bindet die erste Rückruffunktion den Kontext nicht, daher ist das Ergebnis leer und es gibt keine Ausgabe; die zweite Rückruffunktion bindet den Kontext an das Objekt o und das Ergebnis ist Objekt.

Eine andere äquivalente Schreibweise für dieses Beispiel ist:

Code kopieren Der Code lautet wie folgt:

$("#button").on( "click", $.proxy(o, test))

Das $.proxy(o, test) im obigen Code bedeutet, den Methodentest von o an o zu binden.

Dieses Beispiel zeigt, dass es hauptsächlich zwei Möglichkeiten gibt, die Proxy-Methode zu schreiben.

Code kopieren Der Code lautet wie folgt:

jQuery.proxy(Funktion, Kontext)

// oder

jQuery.proxy(Kontext, Name)

Die erste Schreibweise besteht darin, das Kontextobjekt (Kontext) für die Funktion (Funktion) anzugeben, und die zweite Schreibweise besteht darin, das Kontextobjekt (Kontext) und einen seiner Methodennamen (Name) anzugeben.

Sehen Sie sich ein anderes Beispiel an. Unter normalen Umständen verweist das Objekt „this“ im folgenden Code auf das DOM-Objekt, in dem das Klickereignis auftritt.

Code kopieren Der Code lautet wie folgt:

$('#myElement').click(function() {

$(this).addClass('aNewClass');

});

Wenn wir möchten, dass die Rückruffunktion verzögert ausgeführt wird und wir die setTimeout-Methode verwenden, geht der Code schief, da setTimeout dazu führt, dass die Rückruffunktion in der globalen Umgebung ausgeführt wird und diese auf das globale Objekt zeigt.

Code kopieren Der Code lautet wie folgt:

$('#myElement').click(function() {

setTimeout(function() {

​​​​ $(this).addClass('aNewClass');

}, 1000);

});

Dies im obigen Code zeigt auf das globale Objektfenster und verursacht einen Fehler.

Zu diesem Zeitpunkt können Sie die Proxy-Methode verwenden, um dieses Objekt an das myElement-Objekt zu binden.

Code kopieren Der Code lautet wie folgt:

$('#myElement').click(function() {

setTimeout($.proxy(function() {

          $(this).addClass('aNewClass');
}, this), 1000);

});

(7)$.data, $.removeData

Die Methode $.data kann zum Speichern von Daten auf DOM-Knoten verwendet werden.

Code kopieren Der Code lautet wie folgt:

//Daten speichern

$.data(document.body, "foo", 52 );

//Daten lesen

$.data(document.body, "foo");

// Alle Daten lesen

$.data(document.body);

Der obige Code speichert ein Schlüssel-Wert-Paar im Webseitenelementkörper mit dem Schlüsselnamen „foo“ und dem Schlüsselwert 52.

Die Methode $.removeData wird verwendet, um die in der Methode $.data gespeicherten Daten zu entfernen.

Code kopieren Der Code lautet wie folgt:

$.data(div, "test1", "VALUE-1");
$.removeData(div, "test1");

(8)$.parseHTML, $.parseJSON, $.parseXML

Die Methode $.parseHTML wird zum Parsen von Zeichenfolgen in DOM-Objekte verwendet.

Die Methode $.parseJSON wird zum Parsen einer JSON-Zeichenfolge in ein JavaScript-Objekt verwendet, ähnlich der nativen Methode JSON.parse(). Allerdings bietet jQuery keine Methode ähnlich wie JSON.stringify(), das heißt, es bietet keine Methode zum Konvertieren von JavaScript-Objekten in JSON-Objekte.

Die Methode $.parseXML wird verwendet, um eine Zeichenfolge in ein XML-Objekt zu analysieren.

Code kopieren Der Code lautet wie folgt:

var html = $.parseHTML("Hallo, mein Name ist jQuery.");

var obj = $.parseJSON('{"name": "John"}');

var xml = "RSS-Titel";

var xmlDoc = $.parseXML(xml);

(9)$.makeArray

Die Methode $.makeArray wandelt ein Array-ähnliches Objekt in ein echtes Array um.

Code kopieren Der Code lautet wie folgt:

var a = $.makeArray(document.getElementsByTagName("div"));

(10)$.merge

Die Methode $.merge wird verwendet, um ein Array (zweiter Parameter) mit einem anderen Array (erster Parameter) zusammenzuführen.

Code kopieren Der Code lautet wie folgt:

var a1 = [0,1,2];

var a2 = [2,3,4];

$.merge(a1, a2);

a1

// [0, 1, 2, 2, 3, 4]

(11)$.now

Die Methode $.now gibt die Anzahl der Millisekunden zurück, die der aktuellen Zeit ab 00:00:00 UTC am 1. Januar 1970 entsprechen, was (new Date).getTime() entspricht.

Code kopieren Der Code lautet wie folgt:

$.now()

// 1388212221489

Methoden zur Bestimmung des Datentyps

jQuery bietet eine Reihe von Toolmethoden zur Bestimmung von Datentypen, um die Mängel des nativen JavaScript-Operators typeof auszugleichen. Die folgende Methode beurteilt die Parameter und gibt einen booleschen Wert zurück.

jQuery.isArray(): Ob es sich um ein Array handelt.
jQuery.isEmptyObject(): Ob es sich um ein leeres Objekt handelt (enthält keine aufzählbaren Eigenschaften).
jQuery.isFunction(): Ob es sich um eine Funktion handelt.
jQuery.isNumeric(): Ob es sich um ein Array handelt.
jQuery.isPlainObject(): Ob es sich um ein Objekt handelt, das mit „{}“ oder „new Object“ generiert wurde, anstelle eines vom Browser nativ bereitgestellten Objekts.
jQuery.isWindow(): Ob es sich um ein Fensterobjekt handelt.
jQuery.isXMLDoc(): Ermittelt, ob sich ein DOM-Knoten in einem XML-Dokument befindet.
Hier sind einige Beispiele.

Code kopieren Der Code lautet wie folgt:

$.isEmptyObject({}) // true

$.isPlainObject(document.location) // false

$.isWindow(window) // true

$.isXMLDoc(document.body) // false

Zusätzlich zu den oben genannten Methoden gibt es auch eine $.type-Methode, die den Datentyp einer Variablen zurückgeben kann. Sein Kern besteht darin, die Methode Object.prototype.toString zu verwenden, um das Attribut [[Class]] innerhalb des Objekts zu lesen (siehe Abschnitt „Objekt“ der „Standardbibliothek“).

Code kopieren Der Code lautet wie folgt:

$.type(/test/) // "regexp"

Ajax-Betrieb

$.ajax

Das jQuery-Objekt definiert außerdem eine Ajax-Methode ($.ajax()) zur Verarbeitung von Ajax-Operationen. Nach dem Aufruf dieser Methode sendet der Browser eine HTTP-Anfrage an den Server.

$.ajax() kann auf viele Arten verwendet werden, am häufigsten wird ein Objektparameter bereitgestellt.

Code kopieren Der Code lautet wie folgt:

$.ajax({

asynchron: wahr,

URL: '/url/to/json',

Geben Sie ein: 'GET',

Daten: {id: 123},

Datentyp: 'json',

Zeitüberschreitung: 30000,

Erfolg: successCallback,

Fehler: errorCallback,

Complete: CompleteCallback

})

Funktion successCallback(json) {

$('').text(json.title).appendTo('body');

}

Funktion errorCallback(xhr, status){

console.log('Etwas ist schiefgelaufen!');

}

Funktion CompleteCallback(xhr, Status){

console.log('Ajax-Anfrage wurde beendet.');

}

Der Objektparameter des obigen Codes hat mehrere Attribute, die folgende Bedeutung haben:

async: Dieses Element ist standardmäßig auf „true“ gesetzt. Wenn es auf „false“ gesetzt ist, bedeutet dies, dass eine synchrone Anfrage ausgegeben wird.
Cache: Dieses Element ist standardmäßig auf „true“ eingestellt, sodass der Browser die vom Server zurückgegebenen Daten nicht zwischenspeichert. Beachten Sie, dass der Browser selbst die von der POST-Anfrage zurückgegebenen Daten nicht zwischenspeichert. Selbst wenn er auf „false“ gesetzt ist, ist er nur für HEAD- und GET-Anfragen wirksam.
URL: serverseitige URL. Dies ist das einzige erforderliche Attribut, andere Attribute können weggelassen werden.
Typ: HTTP-Verb zum Senden von Informationen an den Server. Andere Verben sind POST, PUT und DELETE.
dataType: Der vom Server angeforderte Datentyp, der auf Text, HTML, Skript, JSON, JSONP und XML festgelegt werden kann.
Daten: An den Server gesendete Daten. Bei Verwendung der GET-Methode wird dieses Element in einen Abfragestring umgewandelt und an das Ende der URL angehängt.
Erfolg: Rückruffunktion, wenn die Anfrage erfolgreich ist. Die Funktionsparameter sind die vom Server zurückgegebenen Daten, Statusinformationen und das ursprüngliche Objekt, das die Anfrage ausgegeben hat.
Timeout: Die maximale Anzahl an Millisekunden, die gewartet werden soll. Wenn die Anfrage nach dieser Zeit nicht zurückgegeben wird, wird der Anfragestatus automatisch in „fehlgeschlagen“ geändert.
Fehler: Rückruffunktion, wenn die Anfrage fehlschlägt. Die Funktionsparameter sind das ursprüngliche Objekt, das die Anfrage ausgegeben hat, und die zurückgegebenen Statusinformationen.
vollständig: Eine Rückruffunktion, die unabhängig davon ausgeführt wird, ob die Anforderung erfolgreich ist oder fehlschlägt. Die Funktionsparameter sind das ursprüngliche Objekt, das die Anforderung ausgegeben hat, und die zurückgegebenen Statusinformationen.
Von diesen Parametern kann die URL unabhängig sein und als erster Parameter der Ajax-Methode verwendet werden. Mit anderen Worten, der obige Code kann auch wie folgt geschrieben werden.

Code kopieren Der Code lautet wie folgt:

$.ajax('/url/to/json',{

Geben Sie ein: 'GET',

Datentyp: 'json',

Erfolg: successCallback,

Fehler: errorCallback

})

Einfache Schreibmethode

Es gibt auch einige einfache Möglichkeiten, die Ajax-Methode zu schreiben.

$.get(): Stellen Sie eine GET-Anfrage.
$.getScript(): Liest eine JavaScript-Skriptdatei und führt sie aus.
$.getJSON(): Geben Sie eine GET-Anfrage aus, um eine JSON-Datei zu lesen.
$.post(): Stellen Sie eine POST-Anfrage.
$.fn.load(): Liest eine HTML-Datei und fügt sie in das aktuelle Element ein.
Im Allgemeinen akzeptieren diese praktischen Methoden drei Parameter der Reihe nach: URL, Daten und Rückruffunktion bei Erfolg.

(1)$.get(), $.post()

Diese beiden Methoden entsprechen der GET-Methode bzw. der POST-Methode von HTTP.

Code kopieren Der Code lautet wie folgt:

$.get('/data/people.html', function(html){

$('#target').html(html);

});

$.post('/data/save', {name: 'Rebecca'}, Funktion (bzw.){

console.log(JSON.parse(resp));

});

Die get-Methode akzeptiert zwei Parameter: die serverseitige URL und die Rückruffunktion nach erfolgreicher Anforderung. Die Post-Methode verfügt über einen weiteren Parameter zwischen diesen beiden Parametern, der die an den Server gesendeten Daten darstellt.

Die Ajax-Schreibmethode, die der obigen Post-Methode entspricht, ist wie folgt.

Code kopieren Der Code lautet wie folgt:

$.ajax({

Geben Sie ein: 'POST',

URL: '/data/save',

Daten: {Name: 'Rebecca'},

Datentyp: 'json',

Erfolg: Funktion (bzw.){

console.log(JSON.parse(resp));

}

});

(2)$.getJSON()

Eine weitere einfache Möglichkeit, die Ajax-Methode zu schreiben, ist die getJSON-Methode. Wenn der Server Daten im JSON-Format zurückgibt, kann diese Methode anstelle der $.ajax-Methode verwendet werden.

Code kopieren Der Code lautet wie folgt:

$.getJSON('url/to/json', {'a': 1}, function(data){

console.log(data);

});

Der obige Code entspricht dem folgenden Schreiben.

Code kopieren Der Code lautet wie folgt:

$.ajax({

Datentyp: „json“,

URL: '/url/to/data',

Daten: {'a': 1},

Erfolg: Funktion(Daten){

console.log(data);

}

});

(3)$.getScript()

Die Methode $.getScript wird verwendet, um eine Skriptdatei von der Serverseite zu laden.

Code kopieren Der Code lautet wie folgt:

$.getScript('/static/js/myScript.js', function() {

FunctionFromMyScript();

});

Der obige Code lädt zunächst das Skript myScript.js vom Server und führt dann die vom Skript in der Rückruffunktion bereitgestellte Funktion aus.

Die Rückruffunktion von getScript akzeptiert drei Parameter: den Inhalt der Skriptdatei, die Statusinformationen der HTTP-Antwort und die Ajax-Objektinstanz.

Code kopieren Der Code lautet wie folgt:

$.getScript( "ajax/test.js", function (data, textStatus, jqxhr){

console.log( data ); // Inhalt von test.js

console.log( textStatus ); // Erfolgreich

console.log( jqxhr.status ); // 200

});

getScript ist eine einfache Möglichkeit, die Ajax-Methode zu schreiben, sodass ein verzögertes Objekt zurückgegeben wird und Sie die verzögerte Schnittstelle verwenden können.

Code kopieren Der Code lautet wie folgt:

jQuery.getScript("/path/to/myscript.js")

.done(function() {

               // ...

})

.fail(function() {

               // ...

});

(4)$.fn.load()

$.fn.load ist keine Tool-Methode von jQuery, sondern eine auf der jQuery-Objektinstanz definierte Methode, mit der die serverseitige HTML-Datei abgerufen und in das aktuelle Element eingefügt wird. Da diese Methode auch zur Ajax-Operation gehört, wird sie hier gemeinsam besprochen.

Code kopieren Der Code lautet wie folgt:

$('#newContent').load('/foo.html');

Die Methode $.fn.load kann auch einen Selektor angeben, den Teil der Remote-Datei, der mit dem Selektor übereinstimmt, in das aktuelle Element einfügen und eine Rückruffunktion angeben, wenn der Vorgang abgeschlossen ist.

Code kopieren Der Code lautet wie folgt:

$('#newContent').load('/foo.html #myDiv h1:first',

Funktion(html) {

console.log('Inhalt aktualisiert!');

});

Der obige Code lädt nur den Teil von foo.html, der mit „#myDiv h1:first“ übereinstimmt. Nach Abschluss des Ladevorgangs wird die angegebene Rückruffunktion ausgeführt.

Ajax-Event

jQuery bietet die folgenden Methoden zum Angeben von Rückruffunktionen für bestimmte AJAX-Ereignisse.

.ajaxComplete(): Die Ajax-Anfrage ist abgeschlossen.
.ajaxError(): Ajax-Anfragefehler.
.ajaxSend(): bevor die Ajax-Anfrage ausgegeben wird.
.ajaxStart(): Die erste Ajax-Anfrage wird ausgegeben, d. h. es liegt noch keine Ajax-Anfrage vor, die abgeschlossen werden muss.
.ajaxStop(): Nachdem alle Ajax-Anfragen abgeschlossen sind.
.ajaxSuccess(): Nachdem die Ajax-Anfrage erfolgreich war.
Nachfolgend finden Sie Beispiele.

Code kopieren Der Code lautet wie folgt:

$('#loading_indicator')

.ajaxStart(function (){$(this).show();})

.ajaxStop(function (){$(this).hide();});

Rückgabewert

Die Ajax-Methode gibt ein verzögertes Objekt zurück, und Sie können die then-Methode verwenden, um eine Rückruffunktion für das Objekt anzugeben (ausführliche Erläuterungen finden Sie im Abschnitt „Verzögertes Objekt“).

Code kopieren Der Code lautet wie folgt:

$.ajax({

URL: '/data/people.json',

Datentyp: 'json'

}).then(function (resp){

console.log(resp.people);

})

JSONP

Aufgrund der „gleichen Domänenbeschränkung“ im Browser kann die Ajax-Methode nur HTTP-Anfragen an den Domänennamen der aktuellen Webseite stellen. Durch Einfügen eines Skriptelements (

Neueste Artikel des Autors