Maison > base de données > tutoriel mysql > Plusieurs sélecteurs jquery de base

Plusieurs sélecteurs jquery de base

零到壹度
Libérer: 2018-03-20 16:59:09
original
1461 Les gens l'ont consulté

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>
Copier après la connexion

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(&#39;test&#39;).style.color = &#39;red&#39;;
Copier après la connexion

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>
Copier après la connexion

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(&#39;p&#39;),function(item,index,arr){
    item.style.color = &#39;red&#39;;
});
Copier après la connexion

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>
Copier après la connexion

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(&#39;test&#39;),function(item,index,arr){
    item.style.color = &#39;red&#39;;
});
Copier après la connexion

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

$(&#39;*&#39;).css(&#39;margin&#39;,&#39;0&#39;);
Copier après la connexion

correspondant à la collection document.all du DOM

Array.prototype.forEach.call(document.all,function(item,index,arr){
    item.style.margin = 0;});
Copier après la connexion

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

Array.prototype.forEach.call(document.getElementsByTagName(&#39;*&#39;),function(item,index,arr){
    item.style.margin = 0;});
Copier après la connexion

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>
Copier après la connexion

correspondant au sélecteur querySelectorAll() du DOM

Array.prototype.forEach.call(document.querySelectorAll(&#39;.a,#b,a&#39;),function(item,index,arr){
    item.style.color = &#39;red&#39;;
});
Copier après la connexion

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!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal