Mehrere grundlegende JQuery-Selektoren

Der Basisselektor ist der am häufigsten verwendete Selektor in jQuery und auch der einfachste Selektor. Er findet DOM-Elemente anhand der Element-ID, der Klasse und des Tag-Namens.

id selector
id selector $('#id') gleicht ein Element anhand der angegebenen ID ab und gibt ein einzelnes Element zurück

<p id="test">测试元素</p><script>//选择id为test的元素并设置其字体颜色为红色$(&#39;#test&#39;).css(&#39;color&#39;,&#39;red&#39;);</script>

Entspricht der getElementById()-Methode von DOM, und jQuery verwendet diese Methode auch intern, um die Erfassung von IDs abzuwickeln

document.getElementById('test').style.color = 'red';

Elementselektor
Elementselektor $('element ' ) Gleicht Elemente basierend auf dem angegebenen Elementnamen ab und gibt qualifizierte Sammlungselemente zurück

<p>1</p>
<p>2</p>
<script>//选择标签名为p的元素并设置其字体颜色为红色$(&#39;p&#39;).css(&#39;color&#39;,&#39;red&#39;);
</script>

entspricht der getElementsByTagName()-Methode von DOM, und jQuery verwendet diese Methode auch intern, um die Erfassung von Elementnamen zu verarbeiten

Array.prototype.forEach.call(document.getElementsByTagName('p'),function(item,index,arr){
    item.style.color = 'red';
});

Klassenselektor
Klassenselektor $('.class') gleicht Elemente entsprechend dem angegebenen Klassennamen ab und gibt qualifizierte Sammlungselemente zurück

<p class="test">1</p>
<p class="test">2</p>
<script>//选择class为test的元素并设置其字体颜色为红色$(&#39;.test&#39;).css(&#39;color&#39;,&#39;red&#39;);
</script>

Entspricht die getElementsByClassName()-Methode von DOM, und jQuery verwendet diese Methode auch intern, um das Abrufen von Klassennamen zu verarbeiten

Array.prototype.forEach.call(document.getElementsByClassName('test'),function(item,index,arr){
    item.style.color = 'red';
});

Wildcard-Selektor
Wildcard-Auswahl Das Gerät $('*') stimmt mit allen Elementen im Dokument überein und gibt das Sammlungselement

$('*').css('margin','0');

zurück, das der document.all-Sammlung des DOM entspricht

Array.prototype.forEach.call(document.all,function(item,index,arr){
    item.style.margin = 0;});

oder getElementsByTagName, dessen Parameter der Platzhalter * ()Method

Array.prototype.forEach.call(document.getElementsByTagName('*'),function(item,index,arr){
    item.style.margin = 0;});

Gruppenselektor Gruppenselektor $('selector1,selector2,…') führt die von jedem Selektor übereinstimmenden Elemente zusammen und gibt das Sammlungselement

zurück

<p class="a">1</p>
<span id="b">2</span>
<a href="#">3</a><script>//选择符合条件的元素并设置其字体颜色为红色$(&#39;.a,#b,a&#39;).css(&#39;color&#39;,&#39;red&#39;);
</script>

entspricht dem querySelectorAll()-Selektor des DOM

Das obige ist der detaillierte Inhalt vonMehrere grundlegende JQuery-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!