Plusieurs sélecteurs jquery de base

Le sélecteur de base est le sélecteur le plus couramment utilisé dans jQuery et est également le sélecteur le plus simple. Il trouve les éléments DOM via l'identifiant de l'élément, la classe et le nom de la balise.

sélecteur d'identifiant
sélecteur d'identifiant $('#id') correspond à un élément par l'identifiant donné, renvoyant un seul élément

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

Correspond à la méthode getElementById() du DOM, et jQuery utilise également cette méthode en interne pour gérer l'acquisition des ID

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

Sélecteur d'élément
Sélecteur d'élément $('element ' ) Correspond aux éléments en fonction du nom d'élément donné et renvoie des éléments de collection qualifiés

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

correspond à la méthode getElementsByTagName() du DOM, et jQuery utilise également cette méthode en interne pour gérer l'acquisition des noms d'éléments

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

Sélecteur de classe
Le sélecteur de classe $('.class') correspond aux éléments en fonction du nom de classe donné et renvoie les éléments de collection qualifiés

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

Correspond à la méthode getElementsByClassName() du DOM, et jQuery utilise également cette méthode en interne pour gérer l'obtention des noms de classe

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

Sélecteur de caractères génériques
Sélection de caractères génériques L'appareil $('*') correspond à tous les éléments du document et renvoie l'élément de collection

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

correspondant à la collection document.all du DOM

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

ou getElementsByTagName dont le paramètre est la méthode wildcard *()

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

Sélecteur de groupe
Le sélecteur de groupe $('selector1,selector2,…') fusionne les éléments correspondant à chaque sélecteur ensemble et renvoie l'élément de collection

<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>

correspondant au sélecteur querySelectorAll() du DOM

Array.prototype.forEach.call(document.querySelectorAll('.a,#b,a'),function(item,index,arr){
    item.style.color = 'red';
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!