Qu'est-ce qu'un élément caché dans jquery

Masquer des éléments dans jQuery est un concept très important. Avant d'utiliser jQuery pour masquer des éléments, vous devez d'abord comprendre les propriétés des éléments masqués dans les styles CSS, telles que l'affichage, la visibilité, l'opacité et d'autres propriétés. Parmi eux, display:none masque complètement l'élément et n'occupe pas le flux du document, visible:hidden masque l'élément mais occupe toujours le flux du document, et opacity modifie la transparence de l'élément sans affecter la position de l'élément occupant le document.

Le système d'exploitation de ce tutoriel : système Windows 10, jQuery version 3.6.4, ordinateur Dell G3.

jQuery est une bibliothèque JavaScript très populaire qui simplifie la traversée des documents HTML, la gestion des événements, l'animation et les opérations Ajax. Les éléments cachés sont un concept très important dans jQuery. Cet article développera l'utilisation des éléments cachés jQuery sous plusieurs aspects tels que les styles CSS, les fonctions jQuery, les méthodes, l'acquisition, le contrôle, le jugement et la sélection.

1. Style CSS

Avant d'utiliser jQuery pour masquer des éléments, vous devez d'abord comprendre les attributs des éléments masqués dans les styles CSS, tels que l'affichage, la visibilité, l'opacité et d'autres attributs. Parmi eux, display:none signifie que l'élément est complètement masqué et n'occupe pas le flux de documents, et visibilité:hidden signifie que l'élément est masqué mais occupe toujours le flux de documents. L'opacité modifie la transparence d'un élément et n'affecte pas la position de l'élément dans le document.

2. Fonctions jQuery

jQuery fournit quelques fonctions de base pour masquer des éléments, telles que les fonctions .hide() et .show(). La fonction .hide() est utilisée pour masquer les éléments correspondants et la fonction .show() est utilisée pour afficher les éléments correspondants.

3. Méthodes de masquage d'éléments dans jQuery

Il existe de nombreuses façons de masquer des éléments dans jQuery Vous pouvez choisir différentes méthodes en fonction des besoins réels, comme l'utilisation de styles CSS et de fonctions, classes et autres méthodes jQuery.

Styles CSS et fonctions jQuery

/* 使用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();

Classes

Définissez la classe de l'élément caché en CSS, puis utilisez jQuery pour ajouter ou supprimer la classe afin de masquer ou d'afficher l'élément.

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

4. Acquisition d'éléments cachés jQuery

Dans le développement réel, il est nécessaire d'obtenir des éléments cachés et d'effectuer les opérations associées. Vous pouvez utiliser les fonctions suivantes fournies par jQuery pour obtenir des éléments cachés : .is(":hidden"), .not(":visible"), .filter(":hidden"), etc.

Utilisez la fonction .is() pour déterminer si un élément est masqué

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

Utilisez la fonction .not() pour filtrer les éléments non masqués

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

Utilisez la fonction .filter() pour filtrer les éléments cachés

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

5. JQuery contrôle l'affichage et le masquage

Dans le développement réel, vous devrez peut-être contrôler les événements pour afficher et masquer les éléments. Vous pouvez utiliser les fonctions suivantes fournies par jQuery : .toggle(), .fadeIn(), .fadeOut. (), etc.

Utilisez la fonction .toggle() pour changer l'état de l'élément

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

Utilisez la fonction .fadeIn() pour faire apparaître l'élément en fondu

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

Utilisez la fonction .fadeOut() pour faire disparaître l'élément

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

6. jQuery détermine l'affichage et le masquage

Dans le développement réel, vous devrez peut-être déterminer si l'élément est actuellement affiché ou masqué. Vous pouvez utiliser la méthode suivante pour y parvenir.

Utilisez la fonction .is() pour déterminer si l'élément est caché

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

Utilisez la fonction .css() pour obtenir l'attribut d'affichage de l'élément

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

7. Affichage caché jQuery

En développement réel, cela peut être nécessaire dans des conditions spécifiques. Pour masquer ou afficher des éléments, vous pouvez utiliser les méthodes suivantes.

Utilisez la fonction .hide() pour masquer les éléments

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

Utilisez la fonction .show() pour afficher les éléments

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

Utilisez la fonction .toggle() pour changer d'état des éléments

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

8 Sélectionnez les éléments

. Dans le développement réel, il est nécessaire de sélectionner l'élément spécifié pour effectuer les opérations associées. Vous pouvez utiliser les fonctions suivantes fournies par jQuery pour la sélection : .eq(), .siblings(), .next(), .prev(), etc.

Utilisez la fonction .eq() pour sélectionner l'élément avec l'indice spécifié

/* 选取第1个div元素 */
var firstDiv = $("div").eq(0);

Utilisez la fonction .siblings() pour sélectionner les éléments frères

/* 选取div元素的同级元素 */
var siblings = $("div").siblings();

Utilisez la fonction .next() pour sélectionner l'élément frère suivant

/* 选取div元素的下一个兄弟元素 */
var nextElement = $("div").next();

Utilisez la fonction .prev() pour sélectionner l'élément frère précédent

/* 选取div元素的上一个兄弟元素 */
var prevElement = $("div").prev();

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!