Beispiel für einen versteckten JQuery-Selektor

Der versteckte Selektor in JQuery wählt alle versteckten Elemente im Dokument aus. Beim Testen eines Elements mit ausgeblendetem Selektor sollte berücksichtigt werden, dass ein absolut positioniertes Element möglicherweise als ausgeblendet erkannt wird, obwohl seine untergeordneten Elemente sichtbar sind. Bei den ausgeblendeten Elementen handelt es sich um Elemente, die aus bestimmten Gründen als ausgeblendet gelten, z. B. weil ihre Höhe und Breite auf 0 gesetzt sind. Es wird nur der aktuelle Wert der Anzeige-CSS-Eigenschaft des Elements gespeichert und dann auf „Keine“ gesetzt. Die Formularelemente mit „type=“ versteckt“, das übergeordnete Element ist ausgeblendet, sodass untergeordnete Elemente auf der Seite ausgeblendet werden. Schauen wir uns ein einfaches Beispiel für den versteckten JQuery-Selektor an.

JQuery Hidden Selector-Syntax

$(“:hidden”)

Beispiel für einen versteckten JQuery-Selektor

<!doctype html>
<head>
<title>JQuery Hidden Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Hidden Selector Example</h2>
<style>
   .test1
   {
      color:red;
      border:1px dashed green;
   }
   .test2
   {
      color:blue;
      border:1px dashed green;
   }
</style>
<script>
   $(document).ready(function(){
     $("ul>li:hidden").show(3000);
   });
</script>
<body>
   <ul>
      <li  >My value 1</li>
      <li   style="display: none;">My value 2</li>
      <li  >My value 3</li>
   </ul>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • $(“ul>li:hidden”).show(3000); Zeile definiert einen ausgeblendeten Selektor, der alle ausgeblendeten Elemente auswählt. Es zeigt das ausgeblendete Element aus der Liste nach 3000 Millisekunden an. Der versteckte Selektor ist ein übergeordnetes Element, das untergeordnete Elemente auf der Webseite verbirgt. Um versteckte Elemente anzuzeigen, verwenden wir die Methode show() mit dem versteckten Selektor.
  • Wenn wir das obige Skript ausführen, erhalten wir eine Liste der Elemente, die unter dem Body-Tag definiert sind. Der zweite Wert My value 2 ist ein verstecktes Element, das nach 3000 Millisekunden angezeigt wird. Es wird als verstecktes Element betrachtet, weil; Wir haben den CSS-Anzeigewert auf „Keine“ gesetzt. Das ausgeblendete Element wird mit einem gestrichelten Rand in grüner Farbe und Text in blauer Farbe angezeigt.

JQuery Hidden Selector-Demo

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie die JQuery Hidden Selector-Demo aus

Verstecktes JQuery-Auswahlbild

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen