Eine kurze Einführung in API, Ereignisse und die Koexistenz mehrerer Bibliotheken in jQuery

Der Inhalt dieses Artikels ist eine kurze Einführung in die Koexistenz von APIs, Ereignissen und mehreren Bibliotheken in jQuery. Ich hoffe, dass er für Sie hilfreich ist. Es werden die Methoden

API

prop() und attr()

prop() verwendet Änderungen wirken sich eher auf den dynamischen Zustand von DOM-Elementen als auf die Änderung von HTML-Attributen aus. Zum Beispiel: deaktiviert, aktiviert.

val()

Setzt den Wert von Formularelementen (Eingabe, Auswahl, Textbereich) oder gibt ihn zurück.

width() und height()

Legt die Breiten- und Höhenwerte passender Elemente fest oder ruft sie ab. Der zurückgegebene Wert ist eine Zahl (ohne Einheit). , während $(selector ).css('width') einen String (mit Einheit) zurückgibt.

offset()

Get: Der Rückgabewert {left: Number, top: Number} ist die Position relativ zum Dokument.
Einstellungen: Wenn das Element nicht positioniert ist (d. h. Position: statisch), wird es in relativ geändert.

position()

Ermittelt die Position des passenden Elements relativ zu seinem nächstgelegenen übergeordneten Element mit Positionierung (d. h. die Position ist nicht statisch) {left: Number , oben: Zahl}, kann nicht gesetzt werden.

scrollLeft() und scrollTop().

Ermitteln oder legen Sie die horizontale und vertikale Position des Elements fest, numerischer Typ.

Die vertikale Position der Bildlaufleiste ist die Höhe des verborgenen Bereichs über dem sichtbaren Bereich des scrollbaren Bereichs.

Wenn die Bildlaufleiste oben nicht scrollt oder das aktuelle Element keine Bildlaufleiste hat, dann ist dieser Abstand 0.

Ereignis

Ereignisbindung bind(), Delegate() und on()

bind() wurde nach 1.7 durch on() ersetzt und bindet mehrere Ereignisse: $(selector).on('dblclick contextment', function(){}); on() ist auch mit zepto kompatibel. Der Nachteil beider Methoden besteht jedoch darin, dass das zu bindende Element im Dokument vorhanden sein muss.

Syntax: $(selector).on('events'[, 'selector'][, data], handler); Der erste Parameter kann ein Standardereignisname oder ein benutzerdefiniertes Ereignis sein (ausgelöst durch Trigger) , der zweite und dritte Parameter können weggelassen werden, der zweite Parameter ist das Nachkommeelement des passenden Elements und der dritte Parameter sind die an die Verarbeitungsfunktion übergebenen Daten, die über event.data in der Funktion empfangen werden.

delegate() unterstützt dynamisch erstellte Elemente.

Syntax: $('p').delegate('p', 'mousemove', function(){}); Binden Sie das Mousemove-Ereignis an p unterhalb des div (einschließlich der in der Zukunft generierten).

Ereignis unbind(), undelegate() und off()

Alle Ereignisse des übereinstimmenden Elements ohne Übergabe von Parametern entbinden, andernfalls die angegebenen Parameterereignisse entbinden.
$(selector).off('click', '**'); Entbindet die Klickereignisse aller Agenten, aber die Ereignisse des Elements selbst werden nicht aufgehoben.

Ereignistrigger trigger() und triggerHandler()

Einfacher Trigger: $(selector).click();
trigger() löst ein Ereignis aus und löst Browserverhalten aus. $(selector).trigger("click");
triggerHandler() löst die Ereignisantwortmethode aus und löst kein Browserverhalten aus. $(selector).triggerHandler("focus");

Ereignisobjektereignis

event.data Zusätzliche Daten, die an den Ereignishandler übergeben werden

ereignis .currentTarget entspricht diesem und bezieht sich auf das aktuelle DOM-Objekt

event.target löst die Ereignisquelle aus, die nicht unbedingt mit diesem (normalerweise im Ereignisdelegaten angezeigten)

event identisch ist. Typ Ereignistyp

event.which Maustastentyp: links 1, Mitte 2, rechts 3 oder Tastaturcode

event.keyCode Tastaturcode

event.pageX Maus relativ zur Position des linken Randes des Dokuments

Kettenprogrammierung

Prinzip: Dies zurückgeben;
Normalerweise können nur Einstellungsvorgänge verkettet werden Operationen, und die entsprechenden Rückgaben werden zurückgegeben, wenn Operationen abgerufen werden. Der Wert davon kann nicht zurückgegeben werden.
end() beendet den letzten Filtervorgang der aktuellen Kette und gibt den Zustand vor dem übereinstimmenden Element zurück.

Mehrere Bibliotheken existieren nebeneinander

jQuery占用了$ 和jQuery这两个变量，如果同一个页面引用了jQuery库，还引用了其他库或者其他版本的jQuery也用的了$或jQuery这个变量，为了保证每个库都能正常使用，就需要让jQuery交出变量的控制权。
$.noConflict(); 交出$
$.noConflict(true); 交出$ 和 jQuery

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    console.log($.fn.jquery); // 3.2.1
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict();
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict(true);
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 2.2.4
</script>

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in API, Ereignisse und die Koexistenz mehrerer Bibliotheken in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!