Un exemple pour expliquer l'utilisation du sélecteur de filtre de visibilité dans jQuery

Un exemple pour expliquer l'utilisation du sélecteur de filtre de visibilité dans jQuery_jquery

WBOY

Libérer： 2016-05-16 15:04:52

original

1836 Les gens l'ont consulté

Filtre de visibilité
Le filtre de visibilité sélectionne les éléments en fonction de leur visibilité et de leur invisibilité.

过滤器名	jQuery 语法	说明	返回
:hidden	$(':hidden')	选取所有不可见元素	集合元素
:visible	$(':visible')	选取所有可见元素	集合元素

$('p:hidden).size(); //元素p 隐藏的元素 

$('p:visible').size(); //元素p 显示的元素

Copier après la connexion

Remarque : Le filtre :hidden contient généralement des éléments dont le style CSS est display:none, le type de formulaire de saisie est type="hidden" et la visibilité :hidden.

Exemple
Le sélecteur de visibilité de jQuery sélectionne les éléments correspondants en fonction des états visibles et invisibles des éléments. Il en existe deux principaux : visible : visible et invisible : caché. Aujourd'hui, nous allons principalement apprendre à utiliser ces deux sélecteurs. Regardons d'abord une structure HTML pour faciliter l'apprentissage de l'utilisation de ces deux sélecteurs :

<div class="wrap">
 <span></span>
 <div></div>
 <div style="display:none">Hider!</div>
 <div style="visibility:hidden">Hider!</div>
 <div class="startHidden">Hider!</div>
 <div class="startVisibilityHidden">Hider!</div>
 <div></div>
 <form>
  <input type="hidden" />
  <input type="hidden" />
  <input type="hidden" />
 </form>
 <span></span>
 <button>显示隐然元素</button>
</div>

Copier après la connexion

Code CSS :

<style type="text/css">
 .wrap {
   width: 500px;
   padding: 10px;
   margin: 20px auto;
   border: 1px solid #ccc;
 }
  
 .wrap div {
  width: 70px;
  height: 40px;
  background: #0083C1;
  margin: 5px;
  float: left
 }
 
 span {
  display: block;
  clear: left;
  color: #008000;
 }
 
 .startHidden {
  display: none;
 }
 
 .startVisibilityHidden {
  visibility: hidden;
 }
</style>

Copier après la connexion

Premiers résultats

2016418170550312.png (537×112)

Jetons un coup d'œil à la syntaxe, aux règles d'utilisation et aux fonctions de ces deux sélecteurs respectivement

1. Sélecteur d'invisibilité : masqué

Sélecteur

 $("E:hidden") //E表示元素标签

Copier après la connexion

 $(":hidden") //选择所有隐藏元素

Copier après la connexion

Description :

E:hidden signifie sélectionner les éléments E cachés, tandis que :hidden signifie sélectionner tous les éléments invisibles

Valeur de retour :

Éléments de collection

Exemple :

$(document).ready(function(){
 $("span:first").text("Found " + $(":hidden",document.body).length + " hidden elements total.");//在第一个span标签中增加文本，显示body中有多少个元素隐藏
 $("div:hidden").show("3000");//显示所有隐藏的div元素
 $("span:last").text("Found " + $("input:hidden").length + " hidden inputs");//在最后一个span标签中增加文本，显示有多少input隐藏
});

Copier après la connexion

Fonction :

":hidden" sélectionne tous les éléments invisibles. Certains navigateurs incluent également toutes les balises dans

, et les éléments invisibles mentionnés ici sont le style "display:none" et le formulaire "type= "hidden"" deux. types, mais pas l'élément masqué contenant "visibility:hidden". De plus, je voudrais rappeler à tout le monde que ":hidden" entraînera parfois la sélection de toutes les balises du

, il est donc recommandé d'ajouter une balise d'élément devant.

Effet :

2016418170632545.png (529×142)

2. Sélecteur de visibilité : visible

Sélecteur :

 $("E:visible") //E是指元素标签，选择指定的可见元素标签

Copier après la connexion

 $(":visible")//选择所有可见元素

Copier après la connexion

Description :

"E:visible" signifie sélectionner des éléments E visibles, par exemple, "$("div:visible")" signifie sélectionner tous les éléments div visibles, et "$(":visible")" signifie sélectionner tous les éléments visibles

Valeur de retour :

Éléments de collection

Exemple :

<script type="text/javascript">
 $(document).ready(function(){
   $("div:visible").click(function(e){ //可见DIV元素绑定一个单击事件
 $(this).css("border","2px solid red"); //给可见的DIV元素增加一个2px的红色边框
 e.stopPropagation();//停止事件冒泡
   });
   $("button").click(function(e){ //给button绑定一个单击事件
 $("div:hidden").show("fast").css("background","red");//隐然的元素显示出来，并把背景变成红色
 e.stopPropagation();//停止事件冒泡
 });
  });
</script>

Copier après la connexion

Fonction :

Le premier morceau de code ci-dessus est qu'après que la souris a cliqué sur l'élément DIV visible, l'élément ajoutera un style de bordure rouge de 2 pixels, tandis que le deuxième morceau de code est que cliquer sur le bouton affichera tous les éléments cachés et ajoutera un couleur rouge. Les éléments visibles mentionnés ici sont les mêmes que les éléments cachés mentionnés précédemment, sauf qu'ils ne sont pas masqués par « display:none » ou « .hide() ».

Effet :

2016418170706043.png (533×110)

Un dernier point : ":visible" filtre tous les éléments visibles, mais visible ici fait référence aux éléments qui ne sont pas masqués par "display:none" ou en utilisant la fonction ".hide()" ":hidden" sélectionne tout ; Éléments cachés. De même, ce qu'on appelle caché ici ne fait pas référence à « visibilité : caché », mais à l'élément de formulaire « display:none » ou « type="hidden" ».

Ceci est une brève introduction au sélecteur de filtre de visibilité de jQuery. Les amis intéressés peuvent le tester localement, ce qui peut améliorer leur compréhension.