#04: jQuery Selectors sind CSS3 Selectors

In CSS können Sie mit diesem alle <h1>-Elemente auf der Seite auswählen

h1 {
 /* style all <h1> elements */
}

In jQuery können Sie genau denselben Selector verwenden.

$("h1") // set of all <h1> elements

Tatsächlich können Sie in jQuery jeden CSS-Selector (auch CSS3-Selectors) verwenden. In diesem Screencast haben wir sogar den :nth-of-type-Selector verwendet, um den zweiten Definitionsbegriff in einer Definitionsliste auszuwählen

$("dt:nth-of-type(2)")
  .html("I'm the second definition term!");

Diese .html()-Methode ist nützlich. Sie ermöglicht es Ihnen, das „innerHTML“ eines Elements zu ändern (oder abzurufen). Das bedeutet, nicht das Element selbst, sondern alles darin. Die „Eingeweide“, könnte man sagen. Es ist ähnlich wie die .text()-Methode, aber text() ist buchstäblich nur für Text. Es gibt kein tatsächliches HTML aus dem Inneren des Elements zurück. Wenn die „Eingeweide“ also Some <span>text</span> wären, würde es nur „Some text“ zurückgeben. Das Setzen von Text damit maskiert jedes HTML, das Sie hineingeben, was bedeutet, dass Sie die „<span>“ buchstäblich sehen würden. Das Abrufen von Text damit ist ebenfalls einzigartig, denn wenn Sie mehrere Elemente auswählen, gibt es den kombinierten Text von allen zurück, was in jQuery einzigartig ist. In anderen Fällen, wenn Sie einen Wert von einer Methode „abrufen“, gibt es den Wert vom ersten Element in der Menge zurück. Wie .height() nur die Höhe vom ersten Element in der Menge zurückgibt.

Siehe den Pen eab1c311dd6e399a2006f1694bbbe051 von Chris Coyier (@chriscoyier) auf CodePen