Detaillierte Erläuterung der Verwendung des jQuery-Selektors examples

Detaillierte Erläuterung der Verwendung des jQuery-Selektors examples_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2016-05-16 15:25:18

Original

1445 Leute haben es durchsucht

Die Beispiele in diesem Artikel beschreiben die Verwendung des jQuery-Selektors. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

jQuery verwendet zwei Methoden zur Auswahl von HTML-Elementen. Die erste verwendet CSS- und Xpath-Selektoren, um eine Zeichenfolge zu bilden, die an den Konstruktor von jQuery gesendet wird (z. B.: $("div > ul a")); Die zweite Methode besteht darin, mehrere Methoden des jQuery-Objekts zu verwenden. Diese beiden Methoden können auch kombiniert eingesetzt werden.

Es gibt viele Möglichkeiten zur Auswahl mithilfe von CSS- und XPath-Selektoren. Detaillierte CSS-Selektoren finden Sie in den entsprechenden Artikeln auf dieser Website.

Schauen wir uns zunächst an, das Element über seine ID zu ermitteln: $( "#id" ). Fügen Sie # vor dem Namen hinzu, um anzuzeigen, dass es sich um eine ID handelt.

Fügen Sie der Seite ein span-Element mit der ID msg hinzu und zeigen Sie helloworld im span-Element an. Dies kann wie folgt erreicht werden:

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
   <script type="text/javascript">
    $( function() {
     $("#msg").html("Hello, world."); } );
   </script>
  </head>
<body>
  <span id="msg"/>
</body>
</html>

Nach dem Login kopieren

Hinweis: #id muss in Anführungszeichen gesetzt werden und die HTML-Funktion mit Parametern wird verwendet, um dem innerHTML des Elements einen Wert zuzuweisen.

Nächstes Beispiel:

Zum Beispiel haben wir eine Liste mit der ID „orderedlist“, dann ist die jQuery zum Abrufen der Referenz dieser Liste $(„#orderedlist“) und fügt ein Klassenattribut $(„#orderedlist“) mit einem Wert von hinzu red. addClass("red"), die addClass-Funktion wird verwendet, um CSS-Einstellungen zu Elementen hinzuzufügen. Rufen Sie die Referenz des letzten Li in der Liste ab, $( "#orderedlist li:last" ).

Das folgende Beispiel ändert den Inhalt des letzten li in hello, world.

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
  <script type="text/javascript">
    $( function() {
     alert("wait");
     $( "#orderedlist li:last" ).html("hello, world.");
    } );
  </script>
</head>
<body>
  <ol id="orderedlist">
   <li>First element</li>
   <li>Second element</li>
   <li>Third element</li>
  </ol>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.