Beispiel für einen leeren JQuery-Selektor

Dieses Tutorial beleuchtet die Vorteile und Verwendung des leeren Selektors in JQuery. Der leere JQuery-Selektor wählt alle Elemente aus, die keine untergeordneten Elemente haben. Es stellt die Elemente ohne untergeordnete Elemente dar, einschließlich Elementknoten, Textknoten usw. Die Kommentare oder Verarbeitungsanweisungen werden nicht als untergeordnete Elemente behandelt und haben keinen Einfluss darauf, ob ein Element als leer betrachtet wird oder nicht. Die leere Methode entfernt die Textknoten innerhalb der ausgewählten Elemente, entfernt jedoch nicht die Attribute und Elemente selbst. Wenn der Textknoten eine Datenlänge von Null enthält, wird er als leer betrachtet. Ein einzelnes Leerzeichen im Textknoten ist nicht leer.

JQuery-Syntax für leere Selektoren

$(“:empty”)

Beispiel für einen leeren JQuery-Selektor

<!doctype html>
<head>
<title>JQuery Empty Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Empty Selector Example</h2>
<style>
.box{
background:orange;
height:100px;
width:200px;
</style>
<script>
   $(document).ready(function(){
	$(":empty").css("background-color", "brown");
   });
</script>
<body>
<div  ></div>
<div  >This is not empty box</div>
</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.
  • $(“:empty”).css(“background-color”, „brown“); Zeile definiert einen leeren Selektor, der alle Elemente darstellt, die keine untergeordneten Elemente haben.
  • Wenn wir das obige Skript ausführen, erhalten wir zwei Kästchen. Das leere Feld wird in brauner Farbe und das nicht leere Feld in oranger Farbe angezeigt.

JQuery Empty Selector Demo

  • Führen Sie diese Demo aus

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

JQuery Empty Selector Demo

Kommentar verfassen

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

Nach oben scrollen