Comment implémenter des éléments jquery invisibles-js tutoriel-php.cn

Comment implémenter des éléments jquery invisibles

藏色散人

Libérer： 2023-01-04 09:36:38

original

2820 Les gens l'ont consulté

Comment implémenter des éléments jquery invisibles : 1. Utilisez la méthode hide pour masquer l'élément sélectionné, avec une syntaxe telle que "$("p").hide();" 2. Utilisez la méthode toggle pour masquer l'élément, avec une syntaxe telle que "$("p").toggle();".

Comment implémenter des éléments jquery invisibles

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.0, ordinateur Dell G3 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : Tutoriel vidéo jquery

jquery rend les éléments invisibles (masquer)

Utiliser jquery pour contrôler le masquage des éléments , Cela peut être fait en une phrase, par exemple :

1. Utilisez la méthode hide()

hide() pour masquer l'élément sélectionné.

Astuce : ceci est similaire à la propriété CSS display:none.

Remarque : Les éléments masqués ne seront pas entièrement affichés (n'affectent plus la mise en page de la page).

Pour afficher les éléments cachés, utilisez la méthode show().

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>

Copier après la connexion

Méthode 2 : utilisez la méthode toggle()

toggle() pour basculer entre hide() et show() sur l'élément sélectionné. Si l'élément est visible, passez-le en masqué ; si l'élément est masqué, passez-le en visible.

Cette méthode vérifie l'état visible de l'élément sélectionné. Si un élément est masqué, show() est exécuté, si un élément est visible, hide() est exécuté – cela crée un effet bascule.

Remarque : Les éléments masqués ne seront pas entièrement affichés (n'affectent plus la mise en page de la page).

Conseil : Cette méthode peut être utilisée pour basculer entre les fonctions personnalisées.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换  hide() 和 show()</button>
</body>
</html>

Copier après la connexion

Méthode 3 : Utiliser css('display','none')

Exemple :

$("#id").css(&#39;display&#39;,&#39;none&#39;);//隐藏
$("#id").css(&#39;display&#39;,&#39;block&#39;);//显示

Copier après la connexion

 $("#id")[0].style.display=&#39;none&#39;;

Copier après la connexion

display=none contrôle le masquage des objets

display=block contrôle l'affichage des objets

Méthode 4 : Utiliser css('visibility','hidden')

Exemple :

$("#id").css(&#39;visibility&#39;,&#39;hidden&#39;);//元素隐藏
$("#id").css(&#39;visibility&#39;,&#39;visible&#39;);//元素显示

Copier après la connexion

La propriété CSS de visibilité spécifie si un élément est visible.

visible L'élément est visible.

caché L'élément est invisible.

collapse Lorsqu'elle est utilisée dans un élément de tableau, cette valeur peut supprimer une ligne ou une colonne, mais elle n'affecte pas la disposition du tableau. L'espace occupé par les lignes ou les colonnes est mis à disposition pour d'autres contenus. Si cette valeur est utilisée sur un autre élément, elle sera rendue "cachée".

inherit Hérite de la valeur de l'attribut de visibilité de l'élément parent.

Remarque :

display:none et visible:hidden peuvent masquer un élément sur la page Web. Il n'y a pas de différence dans les effets visuels, mais il existe des différences entre les deux dans certaines opérations DOM. :

display:none ---Ne réservez pas l'espace physique pour l'objet caché, c'est-à-dire que l'objet disparaît complètement de la page, en termes simples, il ne peut pas être vu ou touché.

visible:hidden--- rend l'objet invisible sur la page Web, mais l'espace occupé par l'objet sur la page Web n'a pas changé, c'est-à-dire qu'il a toujours des attributs tels que la hauteur, la largeur, etc. . En termes simples, cela signifie qu'il est invisible mais touchable.

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!