Heim > Web-Frontend > js-Tutorial > Hauptteil

Funktionen des jQuery-Tools

巴扎黑
Freigeben: 2017-07-08 13:08:11
Original
944 Leute haben es durchsucht

jquery stellt uns Toolfunktionen zum Bedienen von Arrays und Objekten zur Verfügung, die unsere Operationen an ihnen erleichtern und vereinfachen. Heute werden wir uns mit der Überprüfung der Toolfunktionen von jQuery befassen.

jQuery stellt uns 5 Haupttypen von Werkzeugfunktionen zur Verfügung:

  • URL

  • StringOperationen

  • Array- und Objektoperationen

  • Testoperationen

  • Browser

1: URL-Operation:

$.param(obj)

Rückgabe: string;

Beschreibung: Will Das jquery-Objekt wird nach Name/Wert oder Schlüssel/Wert in URL-Parameter serialisiert und mit & verbunden.

Beispiel:

var obj ={name:zh,age:20};
alert(jQuery.param(obj)); =20";

2: String-Operation:

jQuery.trim(str)

Rückgabe: string;

Beschreibung : Entfernen Sie führende und nachgestellte Leerzeichen aus der Zeichenfolge.

Beispiel:


alert($.trim(" 123 "));

//alert "123";

3: Arrays und Objekte Operation:

(1):

&.each(obj,callback)

Beschreibung:

Allgemeine Iterationsmethode, die verwendet werden kann Objekte und Arrays iterieren.

Im Gegensatz zur Methode $().each(), die jQuery-Objekte durchläuft, kann diese Methode zum Durchlaufen jedes Objekts verwendet werden.

Die Rückruffunktion hat zwei Parameter: Der erste ist das Mitglied des Objekts oder der Index des Arrays und der zweite ist die entsprechende Variable oder der entsprechende Inhalt.

Wenn Sie jede Schleife verlassen müssen, können Sie dafür sorgen, dass die Rückruffunktion „false“ zurückgibt und andere Rückgabewerte ignoriert werden.

Beispiel:

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

$.each(a,function(i,n){document.write (""+i+" und " +n +"
");});

//result:

/*0 und 0

1 und 1
2 und 2
3 und 3
4 und 4
5 und 5I*/

(2):

$.extend(obj,default,option)
Hinweis:

Diese Funktion wird am häufigsten bei der Entwicklung von Plug-Ins zur Verarbeitung von Optionen verwendet.

Unten ist der Code für das Fancybox-Plugin, um Optionen zu erhalten:

settings = $.extend({}, $.fn.fancybox.defaults, settings);
Nach dem Login kopieren
Das obige Codeziel ist ein leeres Objekt, und die Standardeinstellungen werden als erstes Objekt verwendet und die Einstellungen werden übergeben vom Benutzer werden in Standard- und Einstellungswerte zusammengeführt. Für Attribute, die nicht in der Einstellung übergeben werden, wird das zusammengeführte Ergebnis in das Ziel kopiert und als Funktionsrückgabewert zurückgegeben 🎜>

Siehe ein vollständiges Beispiel:

var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
Nach dem Login kopieren
/*result:
Nach dem Login kopieren
//Der Zielparameter muss ein leeres Objekt übergeben, da der Wert des Ziels schließlich geändert wird. Zum Beispiel:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }*/
Nach dem Login kopieren

Der obige Code verwendet Standardwerte als Zielparameter, obwohl die Ergebnisse der endgültigen Einstellungen gleich sind, wurde der Wert von
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(defaults, options);
Nach dem Login kopieren
Standardwerte geändert! in sollte behoben sein!

Achten Sie also bei der Verwendung auf die Verwendung des Zielparameters (3): Filter

jQuery.grep( array, callback , [invertieren] )

Rückgabewert: Array

Anweisungen:

Verwenden Sie die Filterfunktion zum Filtern Array-Elemente.

Diese Funktion übergibt mindestens zwei Parameter: das zu filternde Array und die Filterfunktion. Die Filterfunktion muss „true“ zurückgeben, um das Element beizubehalten, oder „false“, um das Element zu entfernen.

Erklärung:

Die Standardeinstellung „invert“ ist „false“, das heißt, die Filterfunktion gibt „true“ zurück, um das Element beizubehalten. Wenn Sie „invert“ auf „true“ setzen, gibt die Filterfunktion „true“ zurück true, um das Element zu löschen.

Das folgende Beispiel zeigt, wie Elemente in einem Array mit einem Index kleiner als 0 gefiltert werden:

//results:[1,2]
$.grep( [0,1,2], function(n,i){
return n > 0;
});
Nach dem Login kopieren

( 4).Convert

jQuery.map( array, callback )

Rückgabewert:

Array

Erklärung:

Konvertieren Sie Elemente in einem Array in ein anderes Array.

Die Konvertierungsfunktion wird als Parameter für jedes Array-Element aufgerufen und der Konvertierungsfunktion wird ein Parameter übergeben, der das konvertierte Element darstellt.

Die Konvertierungsfunktion kann den konvertierten Wert null (Entfernen des Elements aus dem Array) oder ein Array zurückgeben, das den in das ursprüngliche Array erweiterten Wert enthält.

Beispiel:

var arr = [ "a", "b", "c", "d", "e" ]; ).text(arr.join(", "));

arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); });

$("p").text(arr.join(", "));

arr = jQuery.map(arr, function (a) { return a + a; }) ;

alert(arr.join(", "));

//alert A0A0, B1B1, C2C2, D3D3, E4E4

(5)

jQuery.makeArray( obj ) ,

jQuery.inArray( value, array )

,

jQuery.merge( first, second ) ,jQuery.unique( array )

Ich werde sie nicht einzeln vorstellen,

und JavaScript

s Join( ) und Die Methode split() ist ebenfalls wichtig.

4: Testoperation:(1):

$.isFunction(fn)

Return: Boolean; 🎜>Beschreibung: Testen, ob es sich um eine Funktion handelt;

Beispiel:

var fn =function(){};

alert($.isFunction(fn));

//alert true;

(2):

$.isArray(obj);

Return: Boolean;

Beschreibung: Test Ob es sich um ein Array handelt:

Beispiel: weggelassen;

JavaScript hat nur isNan() und isFinite(): non-number und infinity

5: Browserobjekt:

Die Exzellenz von jQuery liegt in seinen browserübergreifenden Funktionen. Normalerweise müssen wir keinen unterschiedlichen Code schreiben für verschiedene Browser. Wenn Sie jedoch ein jQuery-Entwickler oder Plug-in-Entwickler sind, müssen Sie die Browserunterschiede selbst verwalten, um Benutzern browserübergreifende Funktionen bereitzustellen.

jQuery stellt die folgenden Eigenschaften zum Abrufen bereit Browserfunktionen:

tbody >

jQuery .support

jQuery.support

1.3后版本新增
jQuery.browser 已废除

jQuery.browser.version

已废除
jQuery.boxModel 已废除

Neu in Version 1.3
jQuery.browser

Veraltet

jQuery.browser.version

Veraltet
jQuery.boxModel
    Veraltet
  • $.support:

    Neu in jQuery 1.3. Eine Reihe von Eigenschaften, mit denen die Funktionen und Fehler verschiedener Browser angezeigt werden.
  • jQuery bietet eine Reihe von Eigenschaften, und Sie können auch Ihre eigenen Eigenschaften frei hinzufügen. Viele dieser Eigenschaften sind auf sehr niedrigem Niveau angesiedelt, sodass es schwer zu sagen ist, ob sie im Laufe der Zeit wirksam bleiben. Sie sind jedoch hauptsächlich für Plugin- und Kernel-Entwickler gedacht.

    Alle diese unterstützten Attributwerte werden über die Funktionserkennung und nicht über eine Browsererkennung implementiert. Hier sind einige großartige Ressourcen, die erklären, wie diese Feature-Erkennungen funktionieren:
  • http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser- Skripterstellung
  • http://yura.thinkweb2.com/cft/

    http://www.jibbering .com/faq/faq_notes /not_browser_detect.html

    jQuery.support umfasst hauptsächlich die folgenden Tests:

    boxModel

    : Wenn diese Seite und der Browser mit dem W3C gerendert werden CSS-Box-Modell, gleich true. Normalerweise ist dieser Wert im Quirks-Modus von IE 6 und IE 7 falsch. Dieser Wert ist null, bis das Dokument fertig ist.

    cssFloat

    : Gibt true zurück, wenn cssFloat verwendet wird, um auf den CSS-Float-Wert zuzugreifen. Derzeit wird im IE false zurückgegeben und stattdessen styleFloat verwendet.

    hrefNormalized

    : Gibt true zurück, wenn der Browser das intakte Ergebnis von getAttribute("href") zurückgibt. Im IE wird „false“ zurückgegeben, da seine URLs normalisiert wurden.

    htmlSerialize: Wenn der Browser diese Links beim Einfügen von Linkelementen über innerHTML serialisiert, gibt er true zurück. Derzeit gibt IE false zurück.

    leadingWhitespace: Gibt „true“ zurück, wenn der Browser bei Verwendung von innerHTML führende Leerzeichen beibehält, gibt derzeit in IE 6-8 „false“ zurück. noCloneEvent

    : Gibt true zurück, wenn der Browser das Element beim Klonen des Elements nicht zusammen mit der Funktion

    Event-Handler kopiert. Derzeit wird im IE false zurückgegeben.

    objectAll: true, wenn die Ausführung von getElementsByTagName

    ("*") für ein Elementobjekt alle untergeordneten Elemente zurückgibt, derzeit in IE 7 false.

    opacity

    : Gibt „true“ zurück, wenn der Browser das Transparenzstilattribut richtig interpretieren kann. Derzeit wird im IE „false“ zurückgegeben, da stattdessen ein Alphafilter verwendet wird.

    style

    : true, wenn getAttribute("style") den Inline-Stil des Elements zurückgibt. Derzeit ist es im IE falsch, da stattdessen cssText verwendet wird.

    tbody: Gibt „true“ zurück, wenn der Browser zulässt, dass Tabellenelemente keine tbody-Elemente enthalten. Derzeit wird im IE false zurückgegeben und der fehlende Tbody wird automatisch eingefügt. Es gibt ähnliche Artikel in diesem Blog, siehe: Zusammenfassung des Inhaltsverzeichnisses meiner jQuery-Serie

    Das obige ist der detaillierte Inhalt vonFunktionen des jQuery-Tools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    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
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage