Comment utiliser les sélecteurs composés dans jQuery

Cette fois, je vais vous montrer comment utiliser les sélecteurs composés dans jQuery, et quelles sont les précautions d'utilisation des sélecteurs composés dans jQuery. Voici des cas pratiques, jetons un coup d'œil.

1 Introduction

Un sélecteur composé combine plusieurs sélecteurs (qui peuvent être un sélecteur d'ID , une sélection d'élément ou un sélecteur de nom de classe). Les deux sélecteurs sont séparés par une virgule ",", tant qu'ils correspondent. Toute condition de filtre sera mise en correspondance). , et un wrapper jQuery défini sous la forme d'une collection sera renvoyé. Les objets jQuery de la collection peuvent être obtenus à l'aide de l'indexeur jQuery.

Les sélecteurs avec plusieurs conditions de correspondance ne correspondent pas aux éléments qui remplissent les conditions de correspondance de ces sélecteurs en même temps. Au lieu de cela, les éléments correspondant à chaque sélecteur sont combinés et renvoyés ensemble.
Le sélecteur de composés s'utilise comme suit :

$(" selector1,selector2,selectorN");

selector1 : C'est un sélecteur valide, qui peut être un sélecteur d'ID, un sélecteur sans élément ou un sélecteur de nom de classe, etc.

selector2 : est un autre sélecteur valide, qui peut être un sélecteur d'ID, un sélecteur sans élément ou un sélecteur de nom de classe, etc.

selectorN : (facultatif) est un nombre quelconque de sélecteurs, qui peuvent être des sélecteurs d'ID, des sélecteurs sans élément ou des sélecteurs de nom de classe, etc.

Par exemple, pour interroger toutes les balises d'un document et la balise

à l'aide de la classe CSS myClass, vous pouvez utiliser le code jQuery suivant :

$("span,p.myClass");

Deux applications

Ajoutez 3 éléments différents à la page et définissez les styles de manière uniforme. Utilisez un sélecteur composé pour filtrer les éléments

et les éléments dont la valeur de l'attribut id est span et leur ajouter de nouveaux styles.

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, veuillez venir pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des propriétés calculées de vue

Comment Vue utilise le CDN pour optimiser le chargement sur le premier écran

Comment empaqueter les projets Vue par environnement

Tutoriel Vue novice

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!