Beispiel für eine JQuery-Header-Auswahl

Der Header-Selektor in JQuery wählt alle Header-Elemente der Webseite aus. Ein Header-Element enthält normalerweise die Überschrift des Abschnitts. Es wählt alle Elemente von h1 bis h6 im Dokument aus. Kurz gesagt, der Header-Selektor enthält mindestens ein Heading-Tag von h1 bis h6. Es ist wichtig zu beachten, dass die Kopfzeilenauswahl keinen neuen Abschnitt darstellt, sondern den Kopf des Abschnitts einführt. Ein weiterer wichtiger Hinweis ist, dass wir nicht mit dem-Element verwechselt werden sollten. Beides sind unterschiedliche Elemente. Der Header-Selektor bietet einen großen Mehrwert zur Beschreibung des Abschnittskopfes.

JQuery-Header-Selektor-Syntax

$(“:header”)

Beispiel für eine JQuery-Header-Auswahl

<!doctype html>
<head>
<title>JQuery Header Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Header Selector Example</h2>
<style>
   .myheader
   {
      border: 3px dashed green;
      color:blue;
   }
</style>
<script>
   $(document).ready(function(){
      $(":header").css("background-color","pink");
   });
</script>
<body>
      <p>Hello World!!!</p>
      <h3  >Welcome to JQuery.</h3>
      <p>It is JavaScript Library.</p>
      <h4  >It is combination of HTML, CSS and JavaScript.</h4>
</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.
  • $(„:header“).css(„Hintergrundfarbe“, „rosa“); Zeile definiert den Header-Selektor, der alle Header-Elemente im Dokument auswählt. Die Hintergrundfarbe aller Kopfzeilenelemente bleibt rosa.
  • Wenn wir das obige Skript ausführen, erhalten wir die Hintergrundfarbe aller Header-Elemente in Rosa und die Header-Elemente verwenden die Klasse myheader, die gestrichelte Ränder mit grüner Farbe und Texte mit blauer Farbe festlegt.

JQuery-Header-Selektor-Demo

  • Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:
  • Führen Sie die JQuery Header Selector-Demo aus

JQuery-Header-Auswahlbild

Kommentar verfassen

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

Nach oben scrollen