Contoh untuk menerangkan penggunaan pemilih penapis keterlihatan dalam jQuery_jquery

Penapis Keterlihatan
Penapis keterlihatan memilih elemen berdasarkan keterlihatan dan keterlihatan mereka.

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

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

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

Hinweis: Der :hidden-Filter enthält im Allgemeinen Elemente, deren CSS-Stil display:none ist, deren Eingabeformulartyp type="hidden" ist und Sichtbarkeit:hidden ist.

Beispiel
Der Sichtbarkeitsselektor von jQuery wählt die entsprechenden Elemente basierend auf dem sichtbaren und unsichtbaren Status der Elemente aus. Es gibt zwei Hauptmerkmale: sichtbar und unsichtbar: verborgen. Heute lernen wir hauptsächlich, wie man diese beiden Selektoren verwendet. Schauen wir uns zunächst eine HTML-Struktur an, um das Erlernen der Verwendung dieser beiden Selektoren zu erleichtern:

<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>

CSS-Code:

<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>

Erste Ergebnisse

Werfen wir einen Blick auf die Syntax, Nutzungsregeln und Funktionen dieser beiden Selektoren

1. Unsichtbarkeitsauswahl: :hidden

Selektor

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

oder

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

Beschreibung:

E:hidden bedeutet die Auswahl ausgeblendeter E-Elemente, während :hidden die Auswahl aller unsichtbaren Elemente bedeutet

Rückgabewert:

Sammlungselemente

Beispiel:

$(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隐藏
});

Funktion:

„:hidden“ wählt alle unsichtbaren Elemente in

aus, und die hier genannten unsichtbaren Elemente haben den Stil „display:none“ und die Form „type= „hidden““ und „hidden“, aber nicht das versteckte Element, das „visibility:hidden“ enthält. Darüber hinaus möchte ich alle daran erinnern, dass „:hidden“ manchmal dazu führt, dass alle Tags im

ausgewählt werden. Daher wird empfohlen, ein Element-Tag voranzustellen.

Wirkung:

2. Sichtbarkeitsauswahl: :sichtbar

Selektor:

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

oder

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

Beschreibung:

„E:visible“ bedeutet die Auswahl sichtbarer E-Elemente, zum Beispiel „$(“div:visible“)“ bedeutet die Auswahl aller sichtbaren div-Elemente und „$(“:visible“)“ bedeutet die Auswahl aller sichtbaren Elemente

Rückgabewert:

Sammlungselemente

Beispiel:

<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>

Funktion:

Der erste Codeteil oben besagt, dass nach einem Mausklick auf das sichtbare DIV-Element das Element einen 2 Pixel großen roten Rahmenstil hinzufügt, während der zweite Codeteil darin besteht, dass durch Klicken auf die Schaltfläche alle ausgeblendeten Elemente angezeigt und ein hinzugefügt werden roter Hintergrund. Die hier genannten sichtbaren Elemente sind die gleichen wie die zuvor erwähnten versteckten Elemente, mit der Ausnahme, dass sie nicht durch „display:none“ oder „.hide()“ ausgeblendet werden.

Wirkung:

Ein letzter Punkt: „:visible“ filtert alle sichtbaren Elemente heraus, aber „sichtbar“ bezieht sich hier auf Elemente, die nicht durch „display:none“ ausgeblendet werden oder bei Verwendung der Funktion „.hide()“ alle ausgewählt werden Versteckte Elemente. Ebenso bezieht sich das sogenannte Hidden hier nicht auf „visibility:hidden“, sondern auf das Formularelement von „display:none“ oder „type="hidden"“.

Dies ist eine kurze Einführung in den Sichtbarkeitsfilterselektor von jQuery, der ihn vor Ort testen kann, um sein Verständnis zu verbessern.