Detaillierte Erläuterung der jQuery-Funktion_jquery

Bei der JavaScript-Programmierung müssen Entwickler normalerweise viele kleine Programme schreiben, um bestimmte Funktionen zu implementieren. Zum Beispiel Browsererkennung, String-Verarbeitung, Array-Bearbeitung usw. jQuery fasst diese häufig verwendeten Programme zusammen und bietet viele praktische Funktionen.

1. Browser erkennen.

jQuery ruft Browserinformationen über das $.browser-Objekt ab.

Eigenschaftsbeschreibung msie Wenn es so ist, ist es wahr, andernfalls ist es falsch mozilla ist wahr, wenn es sich um einen Mozilla-bezogenen Browser handelt, andernfalls falsch Safari Wenn es sich um einen Safari-Browser handelt, ist es wahr, andernfalls ist es falsch poera Wenn es sich um einen Opera-Browser handelt, ist es wahr, andernfalls ist es falsch Versionsnummer des Browsers Bei Verwendung können Entwickler diese Eigenschaften direkt aufrufen, um Browsereigenschaften abzurufen. Wie folgt:

Code kopieren Der Code lautet wie folgt: $(function() { Funktion Detect() { Wenn ($.browser.msie) return "IE"; Wenn ($.browser.mozilla) Geben Sie „Mozilla“ zurück; Wenn ($.browser.safari) return „Safari“; Wenn ($.browser.opera) Geben Sie „Oper“ zurück; } var sBrowser = discover(); document.write("Ihr Browser ist: " sBrowser " Version ist: " $.browser.version) });

2. Box-Modell Das $.boxModel-Objekt wird in jQuery bereitgestellt, um das aktuell verfolgte Box-Modell zu erkennen. Es handelt sich um einen booleschen Wert. Wenn er wahr ist, bedeutet er, dass er dem W3C-Standard-Box-Modell folgt. Wenn er falsch ist, handelt es sich um das IE-Box-Modell

var sBox = $.boxModel ? "Standard W3C" : "IE"; Document.write("Ihre Seite unterstützt derzeit:" sBox "Box Model");

3. Verarbeiten Sie Javascript-Objekte. In der JavaScript-Programmierung kann man sagen, dass alle Variablen Objekte sind, wie z. B. Zeichenfolgen, Datumsangaben und Werte.

jQuery bietet einige Bearbeitungsmethoden zum Verarbeiten verwandter Objekte, z. B. die Funktion $.trim() (Entfernen führender und nachfolgender Leerzeichen) ist eine davon

i. Verwenden Sie die Methode $each(), um zu durchlaufen

Die Methode every() wurde bereits früher eingeführt und dient zum Durchlaufen von Elementen in Selektoren. Ebenso können Sie für JavaScript-Arrays und -Objekte die Methode $.each() zum Durchlaufen verwenden.

$.each(object,fn); Unter diesen ist object das Objekt, das durchlaufen werden muss, und fn ist die Funktion, die von jedem Element im Objekt ausgeführt wird. Die Funktion fn kann zwei Parameter akzeptieren. Der erste Parameter ist die Seriennummer des Array-Elements oder das Attribut des Objekts . Der zweite Parameter ist der Wert des Elements oder Attributs.

Beispiel: Verwenden Sie die Funktion $.each(), um Arrays und Objekte zu durchlaufen

Code kopieren Der Code lautet wie folgt: var aArray = ["eins", "zwei", "drei", "vier", "fünf"]; $.each(aArray, function(iNum, value) { // Abgabenanordnung document.write("serial number" iNum "value" value " "); }); var oObj = { eins: 1, zwei: 2, drei: 3, vier: 4, fünf: 5 }; $.each(oObj, function(pro, value) { document.write("property" pro "value" value " ") });

Wie Sie dem obigen Beispiel entnehmen können, ist $.each() sehr praktisch zum Durchlaufen von Arrays und Objekten. Verwenden Sie beispielsweise für unbekannte Attribute $.browser $.each, um zu durchqueren $.each($.browser, function(iNum, value) {

// Abgabenanordnung document.write("property" iNum "value" value " "); }); Wert:

Attribut Chromwert wahr

Attributversionswert 39.0.2171.99 Attribut-Webkit-Wert wahr ii. Daten filtern

Für die Daten im Array müssen Entwickler diese häufig filtern. Wenn reines JavaScript verwendet wird, ist häufig eine for-Schleife erforderlich, um sie einzeln zu überprüfen. jQuery stellt die Methode $.grep() bereit. Kann Array-Daten einfach filtern.

Die Syntax lautet wie folgt:

$.grep(Array,fn,[invert])

Unter diesen ist array der Name des Array-Objekts, das gefiltert werden muss, und fn ist die Filterfunktion. Wenn es true zurückgibt, wird es für jedes Objekt im Array beibehalten, andernfalls wird es entfernt. Der optionale invert ist ein boolescher Wert. Wenn er auf true gesetzt ist, wird die Funktion fn invertiert und diejenigen, die die Bedingungen erfüllen, werden entfernt.

Code kopieren Der Code lautet wie folgt: var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5]; var aResult = $.grep(aArray, function(value) { Rückgabewert >= 4; }); document.write(aResult.join());

Definieren Sie zuerst das Array aArray und wählen Sie dann mit der Methode $.grep() einen Wert größer oder gleich 4 aus, um ein neues Array zu erhalten Beispiel 2, erweiterte Methode zum Filtern von Arrays.

Code kopieren Der Code lautet wie folgt: var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5]; var aResult = $.grep(aArray, function(value, index) { //Der Wert, der Wert und die Sequenznummer des Elements werden gleichzeitig beurteilt return (value >= 4 && index > 3); }); document.write(aResult.join());

iii Konvertierungsarray

Oft hoffen Entwickler, dass die Elemente in einem Array einheitlich transformiert werden können, beispielsweise durch Multiplizieren aller Elemente mit 2. Obwohl dies in Javascript wie einer for-Schleife erreicht werden kann, bietet jQuery eine praktischere $.map()-Methode . Diese Methode ist wie folgt

$.map(array,fn) Unter diesen ist array das zu konvertierende Array und fn ist die Konvertierungsfunktion, die für jedes Element im Array ausgeführt wird. Diese Funktion kann auch zwei Funktionen akzeptieren, und ein Parameter ist der Wert des Elements. Die beiden Parameter sind die Seriennummern der Elemente und optionale Parameter.

Code kopieren Der Code lautet wie folgt: $(function() { var aArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i"]; $("p:eq(0)").text(aArray.join()); aArray = $.map(aArray, function(value, index) { //Konvertieren Sie das Array in Großbuchstaben und fügen Sie die Seriennummer hinzu return (value.toUpperCase() index); }); $("p:eq(1)").text(aArray.join()); cArray = $.map(aArray, function(value) { Rückgabewert value; }); $("p:eq(2)").text(cArray.join()); });

Ausführungsergebnisse

a,b,c,d,e,f,g,h,i

A0,B1,C2,D3,E4,F5,G6,H7,I8

A0A0,B1B1,C2C2,D3D3,E4E4,F5F5,G6G6,H7H7,I8I8 Nach Verwendung der Funktion $.map() zum Übertragen stimmt die Länge des Arrays nicht unbedingt mit der des ursprünglichen Arrays überein. Elemente eines Arrays können durch Setzen von Null entfernt werden.

Code kopieren

Der Code lautet wie folgt: $(function() { var aArray = [0, 1, 2, 3, 4, 5, 6, 7, 8]; $("p:eq(0)").text(aArray.join()); $("p:eq(1)").text("aArray length: " aArray.length " value: " aArray.join()); cArray =$.map(aArray,function(value){ //Rückgabe nach 1, die größer als 1 ist, andernfalls löschen Sie es, indem Sie es auf null setzen Rückgabewert>1?Wert 1:null; }); $("p:eq(2)").text("cArray length: " cArray.length " value: " cArray.join()); });

Zusätzlich zum Löschen von Elementen kann $.map beim Konvertieren eines Arrays auch Array-Elemente hinzufügen.

Code kopieren

Der Code lautet wie folgt: $(function() { var aArray = ["eins", "zwei", "drei", "vier", "fünf"]; $("p:eq(0)").text(aArray.join()); cArray =$.map(aArray,function(value){ return value.split(""); }); $("p:eq(1)").text("cArray length: " cArray.length " value: " cArray.join()); });

Ausführungsergebnisse

eins, zwei, drei, vier, fünf

cArray-Länge: 19 Werte: o,n,e,t,w,o,t,h,r,e,e,f,o,u,r,f,i,v,e Während des $.map-Konvertierungsprozesses des obigen Codes teilt die Methode split("") die Elemente in Buchstaben auf iiii Array-Elemente durchsuchen

Für Zeichenfolgen können Sie indexOf() verwenden, um nach der Position eines bestimmten Zeichens zu suchen. Für Array-Elemente bietet JavaScript keine ähnliche Methode. In jQ kann die Funktion $.inArray() eine gute Suchfunktion für Array-Elemente bereitstellen. Die Syntax lautet wie folgt:

$.inArray(value,array) Unter diesen ist value das Objekt, das Sie suchen möchten, und array ist das Array selbst. Wenn es gefunden wird, wird die Position des ersten übereinstimmenden Elements im Array zurückgegeben. Wenn nicht, geben Sie -1 zurück.

Code kopieren

Der Code lautet wie folgt:

$(function() { var aArray = ["eins", "zwei", "drei", "vier", "fünf"]; var cx1 = $.inArray("two", aArray); var cx2 = $.inArray("www", aArray); $("p:eq(0)").text(cx1); $("p:eq(1)").text(cx2); });

4. Externen Code abrufen In einigen größeren Projekten fügen Entwickler unterschiedliche JS in unterschiedliche JS-Dateien ein und laden manchmal je nach Förderbedarf unterschiedliche Codes. jQuery stellt $.getScript() bereit, um das Laden von externem Code zu implementieren. Anwendung:

$.getScript(url,[callback]) Unter diesen ist die URL die Adresse einer externen Ressource, die eine relative oder absolute Adresse sein kann. Rückruf ist die Rückruffunktion nach erfolgreichem Laden, optional.

Code kopieren Der Code lautet wie folgt: $(function() { $("p:eq(0)").click(function() { $.getScript("1.js"); }); $("p:eq(1)").click(function() { textfun(); }); }); Klicken Sie auf 1

& Lt; p & gt; klicken Sie auf 2 & lt;/p & gt;

Der 1.js-Code lautet

Code kopieren

Der Code lautet wie folgt: alarm("Laden ok!") Funktion textfun(){ alarm("testfun") };