Erste Schritte mit jquery-selectors

Download jquery-selectors eBook

Bemerkungen

In diesem Abschnitt erhalten Sie eine Übersicht über die Funktionen von Jquery-Selectors und warum ein Entwickler sie verwenden möchte.

Es sollte auch alle großen Themen in jquery-selectors erwähnen und auf die verwandten Themen verweisen. Da die Dokumentation für Jquery-Selektoren neu ist, müssen Sie möglicherweise erste Versionen dieser verwandten Themen erstellen.

Installation oder Setup

1 Tag-Name Stellt einen im DOM verfügbaren Tag-Namen dar. Zum Beispiel wählt $('p') alle Absätze <p> im Dokument aus.

2 Tag ID Stellt ein Tag dar, das mit der angegebenen ID im DOM verfügbar ist. Zum Beispiel wählt $('#some-id') das einzelne Element im Dokument aus, das eine ID von some-id hat.

3 Tag-Klasse Stellt ein Tag dar, das mit der angegebenen Klasse im DOM verfügbar ist. Zum Beispiel wählt $('.some-class') alle Elemente im Dokument aus, die eine Klasse von some-class haben.

Alle oben genannten Elemente können entweder alleine oder in Kombination mit anderen Selektoren verwendet werden. Alle jQuery-Selektoren basieren auf demselben Prinzip mit Ausnahme einiger Optimierungen.

HINWEIS - Die Factory- function $() ist ein Synonym für die Funktion jQuery() . Falls Sie eine andere JavaScript-Bibliothek verwenden, in der $ sign mit anderen Dingen in Konflikt steht, können Sie $ sign durch den Namen jQuery ersetzen und statt j () die Funktion jQuery () verwenden.

Beispiel Das folgende ist ein einfaches Beispiel, das die Tag-Auswahl verwendet. Dadurch werden alle Elemente mit dem Tagnamen p ausgewählt und der Hintergrund wird auf "gelb" gesetzt.

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
    
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
    
</html>
 

Jquery-Selektoren

Jquery-Selektoren werden verwendet, um DOM (Document Object Model) zu bearbeiten, Ereignisse anzuhängen, Elemente hinzuzufügen und Elemente zur Laufzeit zu entfernen.

Wähler Beschreibung
Elementauswahl Elementselektor werden verwendet, um ein bestimmtes Element auszuwählen
Beispiel: <p>Stackoverflow to help in understanding errors </p>
Um auf dieses "p" -Tag zuzugreifen, müssen wir dieses Element hinzufügen und in die Jquery-Syntax wie folgt einschließen: $ ("p").
"$" steht für das Jquery, es ist nur Aliasing von Jquery und wenn wir wollen, können wir jquery anstelle von "$" wie jQuery () verwenden .
Wenn wir mit einer anderen Bibliothek oder einem anderen Framework (eckig) arbeiten, das das gleiche Aliasing wie jquery ($) hat, können wir diesen Konflikt mithilfe der $ .noConflict () - Methode von Jquery ändern.
ID-Wahlschalter Wir können den ID-Selektor als $ schreiben ("# Text des ID-Attributs")
<div id="selectMe">I am inner content of Div.</div>
Hier ist der Text des ID- Attributs "selectMe". Um diesen ID-Selektor mit jquery auszuwählen, müssen wir folgendes schreiben: $ ("# selectMe").
Mehrere IDs können mit einem durch Komma getrennten Ex ausgewählt werden: $ ("# id1, # ​​id2, # id3 ...")
Klassenauswahl Klassenauswahl wird durch Punkt / "." Dargestellt. und als $ (". className") geschrieben
<span class="demoClass"> Demo JQuery class Selectors </span>
Für den Zugriff auf den Klassenselektor schreiben wir $ (". DemoClass"). Mehrere Klassen können als durch Kommas getrennte Werte ausgewählt werden. $ (". class1, .class2, .class3")
Alle Elementauswahl Um Complete DOM Element auszuwählen, müssen wir das Zeichen "*" .
$("*") Verweist auf ein vollständiges DOM-Element einschließlich HTML, Kopf ...

Das ist p Tag

Dies ist div Tag Dies ist span Tag $ ("*") // Es wird das gesamte DOM-Element | referenzieren

Überprüfen Sie beispielsweise jsfiddle: https://jsfiddle.net/rezjvrum/

Liste der verschiedenen Selektoren:

  1. ": first" - Erstes Element auswählen.
  2. ": last" - Letztes Element auswählen.
  3. ": gerade" - Alle gerade Elemente auswählen.
  4. ": odd" - Alle ungeraden Elemente auswählen.
  5. ": eq (index)" - Wählen Sie das indizierte Element aus. Bsp . :eq(1) wählt das zweite untergeordnete Element aus. Hier beginnt die Indizierung mit "0".
  6. ": gt (index)" - Zeigt alle Elemente an, deren Index größer als der Indexdurchlauf ist. Beispiel :gt(3) gibt das gesamte Element mit einem Index größer als 3 zurück.
  7. ": lt (index)" - Alle Elemente anzeigen, deren Index unter dem Indexdurchlauf liegt. Beispiel :lt(2) gibt alle Elemente mit einem Index unter 2 zurück.

Die oben genannten Selektoren sind abgedeckt in: https://jsfiddle.net/rezjvrum/2/

Stats

46 Contributors: 3
Tuesday, November 15, 2016
Lizenziert unter: CC-BY-SA

Nicht angeschlossen an Stack Overflow
Rip Tutorial: info@zzzprojects.com

EBook herunterladen