Was ist ein verstecktes Element in jquery?

Das Ausblenden von Elementen in jQuery ist ein sehr wichtiges Konzept. Bevor Sie jQuery zum Ausblenden von Elementen verwenden, müssen Sie zunächst die Eigenschaften ausgeblendeter Elemente in CSS-Stilen verstehen, z. B. Anzeige, Sichtbarkeit, Deckkraft und andere Eigenschaften. Darunter versteckt display:none das Element vollständig und belegt nicht den Dokumentfluss, Visibility:hidden verbirgt das Element, belegt aber weiterhin den Dokumentfluss und opacity ändert die Transparenz des Elements, ohne die Position des Elements im Dokument zu beeinflussen.

Das Betriebssystem dieses Tutorials: Windows 10-System, jQuery Version 3.6.4, Dell G3-Computer.

jQuery ist eine sehr beliebte JavaScript-Bibliothek, die das Durchlaufen von HTML-Dokumenten, die Ereignisbehandlung, Animation und Ajax-Operationen vereinfacht. Versteckte Elemente sind ein sehr wichtiges Konzept in jQuery. In diesem Artikel wird die Verwendung versteckter jQuery-Elemente unter verschiedenen Aspekten wie CSS-Stilen, jQuery-Funktionen, Methoden, Erfassung, Kontrolle, Beurteilung und Auswahl erläutert.

1. CSS-Stil

Bevor Sie jQuery zum Ausblenden von Elementen verwenden, müssen Sie zunächst die Attribute des Ausblendens von Elementen in CSS-Stilen verstehen, wie z. B. Anzeige, Sichtbarkeit, Deckkraft und andere Attribute. Darunter bedeutet display:none, dass das Element vollständig ausgeblendet ist und den Dokumentfluss nicht belegt, und Visibility:hidden bedeutet, dass das Element ausgeblendet ist, aber dennoch den Dokumentfluss belegt. Die Deckkraft ändert die Transparenz eines Elements und hat keinen Einfluss auf die Position des Elements im Dokument.

2. jQuery-Funktionen

jQuery bietet einige grundlegende Funktionen zum Ausblenden von Elementen, wie z. B. die Funktionen .hide() und .show(). Die Funktion .hide() dient zum Ausblenden übereinstimmender Elemente und die Funktion .show() zum Anzeigen übereinstimmender Elemente.

3. Methoden zum Ausblenden von Elementen in jQuery

Es gibt viele Möglichkeiten, Elemente in jQuery auszublenden. Sie können je nach tatsächlichem Bedarf verschiedene Methoden auswählen, z. B. die Verwendung von CSS-Stilen und jQuery-Funktionen, -Klassen und anderen Methoden.

CSS-Stile und jQuery-Funktionen

/* 使用display属性来隐藏元素 */
$(element).css("display", "none");
/* 使用display属性来显示元素 */
$(element).css("display", "block");
/* 使用visibility属性来隐藏元素 */
$(element).css("visibility", "hidden");
/* 使用visibility属性来显示元素 */
$(element).css("visibility", "visible");
/* 使用opacity属性来改变元素的透明度 */
$(element).css("opacity", "0");
/* 使用opacity属性来恢复元素的透明度 */
$(element).css("opacity", "1");
/* 使用.hide()函数来隐藏元素 */
$(element).hide();
/* 使用.show()函数来显示元素 */
$(element).show();

Klassen

Definieren Sie die Klasse des ausgeblendeten Elements in CSS und verwenden Sie dann jQuery, um die Klasse hinzuzufügen oder zu entfernen, um das Element auszublenden oder anzuzeigen.

/* 在CSS中定义隐藏元素的类 */
.hide { display: none; }
/* 使用addClass()函数来添加该类 */
$(element).addClass("hide");
/* 使用removeClass()函数来删除该类 */
$(element).removeClass("hide");

4. Erfassung versteckter jQuery-Elemente

In der tatsächlichen Entwicklung ist es notwendig, versteckte Elemente abzurufen und zugehörige Vorgänge auszuführen. Sie können die folgenden von jQuery bereitgestellten Funktionen verwenden, um versteckte Elemente abzurufen: .is(":hidden"), .not(":visible"), .filter(":hidden") usw.

Verwenden Sie die Funktion .is(), um festzustellen, ob ein Element ausgeblendet ist

/* 判断元素是否被隐藏 */
if ($(element).is(":hidden")) {
    // 隐藏时的操作
} else {
    // 显示时的操作
}

Verwenden Sie die Funktion .not(), um nicht ausgeblendete Elemente herauszufiltern

5. jQuery steuert das Anzeigen und Ausblenden

In der tatsächlichen Entwicklung müssen Sie möglicherweise Ereignisse steuern, um Elemente anzuzeigen und auszublenden. Sie können die folgenden von jQuery bereitgestellten Funktionen verwenden: .toggle(), .fadeIn(), .fadeOut (), usw.

/* 获取非隐藏的元素 */
var visibleElements = $("div").not(":hidden");

/* 获取隐藏的元素 */
var hiddenElements = $("div").filter(":hidden");

In der tatsächlichen Entwicklung müssen Sie möglicherweise feststellen, ob das Element derzeit angezeigt oder ausgeblendet ist. Dies können Sie mit der folgenden Methode erreichen.

Verwenden Sie die Funktion .is(), um zu bestimmen, ob das Element ausgeblendet ist

/* 在按钮点击时切换元素的显示状态 */
$("#toggleBtn").click(function() {
    $("div").toggle();
});

/* 在按钮点击时淡入元素 */
$("#fadeInBtn").click(function() {
    $("div").fadeIn();
});

In der tatsächlichen Entwicklung Es kann erforderlich sein, bestimmte Bedingungen zu verwenden. Um Elemente auszublenden oder anzuzeigen, können Sie die folgenden Methoden verwenden.

Verwenden Sie die Funktion .hide(), um Elemente auszublenden

/* 在按钮点击时淡出元素 */
$("#fadeOutBtn").click(function() {
    $("div").fadeOut();
});

/* 判断元素是否被隐藏 */
if ($(element).is(":hidden")) {
    // 元素是隐藏的
} else {
    // 元素是显示的
}

Verwenden Sie die Funktion .toggle(), um den Elementstatus zu wechseln In der tatsächlichen Entwicklung ist es notwendig, das angegebene Element auszuwählen, um verwandte Vorgänge auszuführen. Sie können die folgenden von jQuery bereitgestellten Funktionen zur Auswahl verwenden: .eq(), .siblings(), .next(), .prev() usw.

Verwenden Sie die Funktion .eq(), um das Element mit dem angegebenen Index auszuwählen

/* 获取元素的display属性 */
var display = $(element).css("display");
if (display == "none") {
    // 元素是隐藏的
} else {
    // 元素是显示的
}

Verwenden Sie die Funktion .siblings(), um Geschwisterelemente auszuwählen

/* 在条件成立时隐藏元素 */
if (condition) {
    $(element).hide();
}

Verwenden Sie die Funktion .next(), um das nächste Geschwisterelement auszuwählen

/* 在条件成立时显示元素 */
if (condition) {
    $(element).show();
}

Verwenden Sie die Funktion .prev(), um das vorherige Bruderelement

/* 在按钮点击时切换元素的显示状态 */
$("#toggleBtn").click(function() {
    $("div").toggle();
});