So verwenden Sie zusammengesetzte Selektoren in jQuery

Dieses Mal zeige ich Ihnen, wie Sie zusammengesetzte Selektoren in jQuery verwenden und welche Vorsichtsmaßnahmen für die Verwendung zusammengesetzter Selektoren in jQuery gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

1 Einleitung

Ein zusammengesetzter Selektor kombiniert mehrere Selektoren (dies können ID-Selektor , Elementauswahl oder Klassennamen-Selektor sein. Die beiden Selektoren werden durch ein Komma "," getrennt, solange sie übereinstimmen. Jede Filterbedingung wird erfüllt und ein jQuery-Wrapper-Set in Form einer Sammlung wird zurückgegeben. Die jQuery-Objekte in der Sammlung können mit dem jQuery-Indexer abgerufen werden.

Selektoren mit mehreren Übereinstimmungsbedingungen stimmen nicht mit Elementen überein, die gleichzeitig die Übereinstimmungsbedingungen dieser Selektoren erfüllen. Stattdessen werden die von jedem Selektor übereinstimmenden Elemente kombiniert und zusammen zurückgegeben.
Der zusammengesetzte Selektor wird wie folgt verwendet:

$(" selector1,selector2,selectorN");

Selektor1: Es handelt sich um einen gültigen Selektor, der ein ID-Selektor, ein elementloser Selektor oder ein Klassennamen-Selektor usw. sein kann.

selector2: ist ein weiterer gültiger Selektor, der ein ID-Selektor, ein elementloser Selektor oder ein Klassennamen-Selektor usw. sein kann.

selectorN: (optional) ist eine beliebige Anzahl von Selektoren, die ID-Selektoren, elementlose Selektoren oder Klassennamen-Selektoren usw. sein können.

Um beispielsweise alle -Tags in einem Dokument und das

-Tag mithilfe der CSS-Klasse myClass abzufragen, können Sie den folgenden jQuery-Code verwenden:

$("span,p.myClass");

Zwei Anwendungen

Fügen Sie der Seite drei verschiedene Elemente hinzu und legen Sie die Stile einheitlich fest. Verwenden Sie einen zusammengesetzten Selektor, um

-Elemente und Elemente zu filtern, deren ID-Attributwert span ist, und ihnen neue Stile hinzuzufügen.

Drei Codes

<script></script>
<p>p元素</p>
<p>p元素</p>
<span>ID为span的元素</span>
<input>
<script>
$(document).ready(
function()
{
  $("input[type=button]").click(
  function() //绑定按钮的单击事件
  {
    var myClass = $("p,#span");   //选取DOM元素
    myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色
    myClass.css("color","#FFF");  //为选取的DOM元素设置文字颜色
  });
});
</script>

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte kommen Sie für weitere spannende Informationen. Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der von Vue berechneten Eigenschaften

Wie Vue CDN verwendet, um das Laden des ersten Bildschirms zu optimieren

So packen Sie Vue-Projekte nach Umgebung

Vue-Anfänger-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie zusammengesetzte Selektoren in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!