Welche Methoden gibt es in jQuery? Häufig verwendete Methoden in jQuery (mit Code)

Der Inhalt dieses Artikels befasst sich mit den häufig verwendeten Methoden in jQuery. Ich hoffe, dass sie für Sie hilfreich sind .

.each()

Durchlaufe ein jQuery-Objekt und führe eine Funktion für jedes passende Element aus

$('p').each(function(idx,node){
  $(node).text(idx + ':' + 'hello')
})

$.extend()

jQuery.extend([deep,] target [, object1 ] [, objectN ] )
Mehrere Objekte zusammenführen und alle Attribute zum ersten Objekt hinzufügen

• Wenn wir zwei oder mehr Objekte für $.extend() bereitstellen, werden dem Ziel alle Eigenschaften des Objekts hinzugefügt Objekt (Zielparameter).

• Wenn nur ein Argument für $.extend() bereitgestellt wird, bedeutet dies, dass das Zielargument weggelassen wird. In diesem Fall wird das jQuery-Objekt selbst standardmäßig auf das Zielobjekt gesetzt. Auf diese Weise können wir neue Funktionen unter dem jQuery-Namespace hinzufügen. Dies ist nützlich für Plugin-Entwickler, die jQuery neue Funktionen hinzufügen möchten. Das heißt, {} ist das Standardattribut. Der Benutzer legt das Attribut fest und überschreibt das Standardattribut. Die Methode

var object = $.extend({}, object1, object2)
var object1 = {  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97
}var object2 = {  banana: { price: 200 },  durian: 100
}
// 将obj2合并到obj1上的案例
$.extend( object1, object2 )

.clone()

.clone() kopiert den Satz aller übereinstimmenden Elemente, einschließlich aller übereinstimmenden Elemente, untergeordneter Elemente übereinstimmender Elemente und Text, tiefgreifend Knoten.
Wenn wir ein Element auf der Seite an einer anderen Stelle im DOM einfügen, wird es normalerweise von der alten Stelle verschoben, ähnlich einem Schereffekt.

Zum Beispiel:

<div class="container">    
<div class="hello">Hello</div>    
<div class="world">World</div></div>
$(&#39;.hello&#39;).appendTo(&#39;.world&#39;);<div class="container">  <div class="world">
    World    <div class="hello">Hello</div>  </div></div>

Wenn Sie kopieren statt ausschneiden müssen, können Sie den Code wie folgt schreiben:

$('.hello').clone().appendTo('.world')

.index()

Von Ein bestimmtes Element in der angegebenen Sammlung suchen indexTiefgestellt

• Ohne Parameter das erste Element zurückgebenindex

• Wenn der Parameter ist DOM-Objekt oder jQuery-Objekt, dann geben Sie den Parameter in der Sammlung zurück index

• Wenn der Parameter ein Selektor ist, geben Sie das erste passende Element zurück index -1

$('p').eq(2).index()  //2
$('.ok').index('p')  //获取p标签中的.ok的下标

.ready()

entspricht nativem JS. document.onDOMContentLoaded
gibt eine Funktion an, die ausgeführt werden soll, wenn das DOM bereit ist.

Wenn beispielsweise der ausgeführte Code nach dem Laden des Elements verwendet werden muss (z. B. muss das Ermitteln der Bildgröße nach dem Laden des Bildes erfolgen), müssen Sie diesen Code einfügen das Ladeereignis.

Die folgenden beiden Schreibweisen sind gleichwertig

$(document).ready(function(){
})

$(function(){
})

Beispiel

$(function(){    console.log('ready')
})

window.onload und $(document).ready

Wir brauchen es oft in Entwicklung Bindet Handler an Ereignisse für einige Elemente. Das Problem besteht jedoch darin, dass das Element keine Wirkung hat, wenn es nicht auf der Seite geladen wurde, das Bindungsereignis jedoch ausgeführt wurde. Diese beiden Ereignisse werden grob verwendet, um eine solche Situation zu vermeiden. Fügen Sie die gebundenen Funktionen in die Rückrufe dieser beiden Ereignisse ein, um sicherzustellen, dass die Ereignisfunktionen gebunden werden können, nachdem bestimmte Elemente der Seite geladen wurden. Was ist der Unterschied zwischen window.onload und $(document).ready? document.onDOMContentLoadedWas ist mit

Was ist der Unterschied zwischen window.onload und $(document).ready?

Ausführungszeiten variieren

window.onload muss warten, bis alle Elemente auf der Seite, einschließlich Bilder, geladen sind, bevor es ausgeführt werden kann.
$(document).ready() ist eine DOM-Struktur, die nach Abschluss des Zeichnens ausgeführt wird, ohne darauf zu warten, dass alle Seitenelemente geladen werden.

Der Unterschied bei der wiederholten Ausführung der beiden Methoden

Sie können nicht mehrere window.onloads gleichzeitig schreiben. Wenn es mehrere window.onload-Methoden gibt, nur die letzte
$ (Dokument) wird ausgeführt. Mehrere ready() können gleichzeitig geschrieben und alle ausgeführt werden.
Wenn beide Methoden geschrieben sind, wird $(document).ready() vor window.onload ausgeführt.

Vereinfachtes Schreiben

Es gibt kein vereinfachtes Schreiben für window.onload
$(document).ready(function(){}) kann als $(function(){})document.onDOMContentLoaded Was?

entspricht document.onDOMContentLoaded in jQuery. Das DOMContentLoaded-Ereignis wird ausgelöst, nachdem das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Subframes vollständig geladen werden. .ready()

In der Einleitung zur jQuery-Dokumentation gibt es einen Absatz, der erklärt, dass diese beiden nicht dieselbe Funktion haben

Übersetzung

Das bereit( )-Methode stellt eine Methode bereit, die JavaScript-Code ausführt, sobald das DOM-Dokumentobjektmodell der Seite für den Betrieb sicher ist. Dies ist häufig ein guter Zeitpunkt, um erforderliche Aufgaben auszuführen, bevor der Benutzer die Seite anzeigt oder mit ihr interagiert, z. B. das Hinzufügen von Ereignishandlern und das Initialisieren von Plugins. Wenn durch aufeinanderfolgende Aufrufe dieser Methode mehrere Funktionen hinzugefügt werden, werden sie im DOM vorbereitet und in der Reihenfolge ausgeführt, in der sie hinzugefügt wurden. In jQuery In 3.0 stellt jQuery sicher, dass eine in einem Handler auftretende Ausnahme nicht die Ausführung nachfolgend hinzugefügter Handler verhindert.

Die meisten Browser beginnen mit Eine ähnliche Funktionalität wird in Form des DOMContentLoaded-Ereignisses bereitgestellt. Allerdings ist .ready() von jQuery Methoden haben einen wichtigen und nützlichen Unterschied: Wenn das DOM bereit ist, lädt der Browser es, bevor der Code .ready(handler) aufruft. DOMContentLoaded , dann wird der Funktionshandler weiterhin ausgeführt. Im Gegensatz dazu wurde der DOMContentLoaded-Ereignis-Listener, der nach der Auslösung des Ereignisses hinzugefügt wurde, nie ausgeführt.

document.onDOMContentLoaded ist also nicht gleichbedeutend mit .ready() in jQuery, es kann nur gesagt werden, dass es sich um eine ähnliche Methode handelt.

Verwandte Empfehlungen:

Implementierung und Verwendung des ungeordneten Bildvorladens in jquery

Zwischen jQuery-Objekt und nativem DOM-Objekt Der Unterschied und die Konvertierung

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es in jQuery? Häufig verwendete Methoden in jQuery (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!