Maison > Article > interface Web > Comment implémenter des éléments jquery invisibles
Comment implémenter des éléments jquery invisibles
- 藏色散人original
- 2020-12-08 10:01:582741parcourir
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();".
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>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>Méthode 3 : Utiliser css('display','none')
Exemple :
$("#id").css('display','none');//隐藏
$("#id").css('display','block');//显示ou
$("#id")[0].style.display='none';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('visibility','hidden');//元素隐藏
$("#id").css('visibility','visible');//元素显示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!