Detaillierte Erläuterung der Verwendung des zusammengesetzten Selektors von jQuery

Dieses Mal erkläre ich Ihnen ausführlich, welche Vorsichtsmaßnahmen Sie bei der Verwendung des zusammengesetzten Selektors von jQuery beachten müssen.

Einführung

Der zusammengesetzte Selektor kombiniert mehrere Selektoren (kann

ID-Selektor, Elementauswahl oder Klassennamen-Selektor sein). Zusammen werden die beiden Selektoren kombiniert werden durch Kommas getrennt. Solange eine der Filterbedingungen erfüllt ist, wird ein jQuery-Paketsatz in Form einer Sammlung zurückgegeben. Sie können den jQuery-Indexer verwenden, um die Elemente abzurufen in der Sammlung.

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.

Die Methode zur Verwendung des zusammengesetzten Selektors ist wie folgt:

$(" selector1,selector2,selectorN");

Selektor1: Es handelt sich um einen gültigen Selektor, der ein ID-Selektor, ein elementloser Selektor oder eine Klasse sein kann Namensauswahl. Geräte usw.

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");

Zweite Anwendung

Fügen Sie 3 verschiedene Elemente zur Seite 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 language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<p class="default">p元素</p>
<p class="default">p元素</p>
<span class="default" id="span">ID为span的元素</span>
<input type="button" value="为p元素和ID为span的元素换肤" />
<script type="text/javascript">
$(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>

Vier Laufeffekte

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Vue implementiert die Reduzierung der Anzahl von Serveranfragen

Detaillierte Schritte zum Übermitteln von Daten an den Server mithilfe von JSON

Wie Vue Caching verwendet

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des zusammengesetzten Selektors von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!