Was ist beim Laden einer JQuery-Seite mithilfe eines Auswahlereignisses zu verwenden?

jQuery ist eine sehr beliebte JavaScript-Bibliothek in der Front-End-Entwicklung, mit der sich HTML-Dokumente und CSS-Stile schnell und einfach bearbeiten lassen. In jQuery sind Selektoren eine sehr wichtige und häufig verwendete Funktion, mit der Sie Elemente auf der Seite auswählen und dann bearbeiten können.

jQuery bietet eine Vielzahl von Selektoren, die Elemente basierend auf ihren Tag-Namen, Klassennamen, ID-Werten, Attributwerten usw. auswählen können. Wenn die Seite geladen wird, führen wir normalerweise eine spezielle Verarbeitung für bestimmte Elemente durch, z. B. das Ein- oder Ausblenden bestimmter Elemente oder Bindungsereignisse.

In diesem Fall können Sie den Selektor und die Ereignisbindung von jQuery verwenden. Hier sind einige häufig verwendete Ereignisse und Selektoren.

1. Abschlussereignis beim Laden der Seite

In jQuery kann das Abschlussereignis beim Laden der Seite mithilfe der Methode ready() gebunden werden, die unmittelbar nach dem Laden des DOM ausgeführt wird. Der Beispielcode lautet wie folgt:

$(document).ready(function() {
  // 页面加载完成后执行的代码
});

Da ready() häufig verwendet wird, stellt jQuery außerdem eine Kurzform bereit:

$(function() {
  // 页面加载完成后执行的代码
});

Diese beiden Formen sind völlig gleichwertig und beide können nach dem Laden der Seite bestimmte Vorgänge ausführen.

2. Selektor

Der Basisselektor ist die einfachste Form des Selektors. Er kann Elemente basierend auf ihrem Tag-Namen, ihrem Klassennamen und ihrem ID-Wert auswählen.

Elemente basierend auf Tag-Namen auswählen:

$('p') // 选择所有<p>元素

Elemente basierend auf Klassennamen auswählen:

$('.my-class') // 选择所有class属性值为my-class的元素

Elemente basierend auf ID-Werten auswählen:

$('#my-id') // 选择ID值为my-id的元素

2. Attributselektor

Attributselektoren können Elemente basierend auf ihren Attributwerten auswählen Die am häufigsten verwendeten sind [class^="xxx"] und [class$="xxx"].

Elemente basierend auf dem Attributnamen und Attributwert auswählen:

$('input[type="text"]') // 选择所有type属性值为text的input元素

Elemente basierend auf dem Anfang des Attributwerts auswählen:

$('div[class^="my-"]') // 选择class属性值以my-开头的所有div元素

Elemente basierend auf dem Ende des Attributwerts auswählen:

$('a[href$=".pdf"]') // 选择href属性值以.pdf结尾的所有a元素

3. Hierarchischer Selektor

Der hierarchische Selektor kann untergeordnete Elemente, übergeordnete Elemente, Geschwisterelemente usw. eines Elements auswählen.

Wählen Sie die untergeordneten Elemente eines Elements aus:

$('ul li') // 选择所有ul元素下的li元素

Wählen Sie das übergeordnete Element eines Elements aus:

$('li').parent() // 选择所有li元素的父元素

Wählen Sie die Geschwisterelemente eines Elements aus:

$('li').siblings() // 选择所有li元素的兄弟元素（不包括自己）

4. Formularauswahl

Die Formularauswahl kann Formularelemente auswählen, einschließlich Textfelder, Kontrollkästchen, Optionsfelder, Dropdown-Felder usw.

Alle Textfeldelemente auswählen:

$('input[type="text"]') // 选择所有type属性值为text的input元素

Alle Kontrollkästchenelemente auswählen:

$('input[type="checkbox"]') // 选择所有type属性值为checkbox的input元素

Alle Optionsfeldelemente auswählen:

$('input[type="radio"]') // 选择所有type属性值为radio的input元素

Alle Dropdown-Feldelemente auswählen:

$('select') // 选择所有select元素

3. Ereignisbindung

1. Einzelklick-Ereignis

Das Click-Ereignis ist eines der am häufigsten verwendeten Ereignisse und kann über die click()-Methode gebunden werden. Der Beispielcode lautet wie folgt:

$('button').click(function() {
  // 单击了button按钮后执行的代码
});

2. Doppelklick-Ereignis

Doppelklick-Ereignis bezieht sich auf das Ereignis eines zweimaligen schnellen Klickens auf ein Element, das über die Methode dblclick() gebunden werden kann. Der Beispielcode lautet wie folgt:

$('button').dblclick(function() {
  // 双击了button按钮后执行的代码
});

3. Tastaturereignisse

Tastaturereignisse beziehen sich auf Ereignisse, wenn eine Tastaturtaste auf der Seite gedrückt oder losgelassen wird, und können über drei Methoden gebunden werden: keypress(), keydown() und keyup().

4. Mausereignisse

Mausereignisse beziehen sich auf Ereignisse, wenn sich die Maus auf der Seite bewegt, klickt, doppelklickt, drückt, loslässt usw. Dies kann durch Mousemove(), Mousedown(), Mouseup() erfolgen. Mouseenter(), Mouseleave(), Hover() und andere Methoden zum Binden.

5. Seiten-Scroll-Ereignis

Das Scroll-Ereignis bezieht sich auf das Ereignis, das ausgelöst wird, wenn der Benutzer die Seite scrollt, das über die scroll()-Methode gebunden werden kann.

Die oben genannten sind einige häufig verwendete Ereignisse und Selektoren, die uns helfen können, Elemente auf der Seite schnell zu finden und eine Ereignisbindung durchzuführen. Natürlich bietet jQuery auch viele andere Funktionen und Methoden, die interessierte Leser selbst lernen und erkunden können.

Das obige ist der detaillierte Inhalt vonWas ist beim Laden einer JQuery-Seite mithilfe eines Auswahlereignisses zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!