Exemple d'utilisation simple du sélecteur composé dans jQuery

Cet article présente principalement l'utilisation simple des sélecteurs composés dans jQuery et analyse les concepts, les fonctions, les scénarios d'application et les méthodes d'utilisation associées des sélecteurs composés dans jQuery sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

.

Les exemples de cet article décrivent l'utilisation simple des sélecteurs composés dans jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Introduction

Le sélecteur composé combine plusieurs sélecteurs (peut être des sélecteurs d'identification , sélection d'élément ou sélecteur de nom de classe) sont combinés et les deux sélecteurs sont séparés par une virgule ",". Tant que l'une des conditions de filtre est remplie, elle sera mise en correspondance et un emballage jQuery sera défini sous la forme d'une collection est renvoyée, vous pouvez utiliser l'indexeur jQuery pour obtenir les objets jQuery de la collection.

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.
L'utilisation du sélecteur composé est la suivante :

$(" selector1,selector2,selectorN");

sélecteur1 : est un sélecteur valide, qui peut être un Sélecteur d'ID, sélecteur sans élément ou 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 45a2772a6b6107b401db3c9b82c049c2 d'un document et la balise e388a4556c0f65e1904146cc1a846bee à l'aide de la classe CSS myClass, vous pouvez utiliser le code jQuery suivant :

$("span,p.myClass");

Deuxième application

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 e388a4556c0f65e1904146cc1a846bee et les éléments dont la valeur de l'attribut id est span et leur ajouter de nouveaux styles.

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

Quatre effets de course

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Deux méthodes pour supprimer la détection de spécification de code dans vue

Le projet Vue désactive la vérification eslint

Méthode JS pour parcourir des tableaux multidimensionnels irréguliers

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!