Explication détaillée de la façon d'utiliser le sélecteur de nom de classe jQuery (.class)

Cette fois, je vous apporte une explication détaillée de la façon d'utiliser le sélecteur de nom de classe jQuery (.class). Quelles sont les précautions lors de l'utilisation du sélecteur de nom de classe jQuery (.class). un cas pratique. Levez-vous et jetez un œil.

1. Introduction

Le sélecteur de nom de classe trouve les éléments DOM correspondants par le nom de la classe CSS appartenant à l'élément.

Dans une page, un élément peut avoir plusieurs classes CSS, et une classe CSS peut correspondre à plusieurs éléments. S'il existe un nom de classe correspondant dans un élément, il peut être sélectionné par le sélecteur de nom de classe.

Le sélecteur de nom de classe est facile à comprendre. La plupart des gens doivent avoir choisi des cours lorsqu'ils étaient à l'université. Le nom de la classe CSS peut être compris comme le nom du cours, et les éléments peuvent être compris comme les étudiants. choisissez plusieurs cours, et Un cours peut être choisi par plusieurs étudiants.

La relation entre les classes CSS et les éléments peut être une relation plusieurs-à-plusieurs, une relation un-à-plusieurs ou plusieurs-à-un. En termes simples, le sélecteur de nom de classe trouve les éléments correspondants en fonction du nom de classe CSS de l'élément.

Le sélecteur de nom de classe est utilisé comme suit :

$(".class");

où classe est le nom de classe CSS utilisé pour interroger l'élément.

Par exemple, pour rechercher des éléments en utilisant le nom de classe CSS word_orange, vous pouvez utiliser le code jQuery suivant :

$("word_orange");

Application

Dans la page, ajoutez d'abord deux balises

et définissez la classe CSS pour l'une d'entre elles, puis sélectionnez la balise

avec la classe CSS définie via le sélecteur de nom de classe de jQuery, et Définissez son style CSS.

3. Code

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<p class="myClass">注意观察我的样式</p>
<p>我的样式是默认的</p>
<script type="text/javascript">
$(document).ready(
function()
{
  var myClass = $(".myClass");   //选取DOM元素
  myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色
  myClass.css("color","#FFF");  //为选取的DOM元素设置文字颜色
});
</script>

4. 🎜>

5. Instructions d'utilisation

Dans le code ci-dessus, une seule des balises

Le nom de la classe CSS est spécifié, mais comme il n'y a pas de classe CSS nommée myClass dans le programme, cette classe n'a aucun attribut. Le sélecteur de nom de classe renverra un ensemble d'empaquetage jQuery nommé myClass. La méthode

peut être utilisée pour définir la valeur de l'attribut CSS pour l'élément p correspondant. Ici, la couleur d'arrière-plan de l'élément est définie sur. rouge foncé et la couleur du texte est définie sur blanc. Le sélecteur de nom de classe

peut également obtenir un ensemble de wrappers jQuery, puisque plusieurs éléments peuvent avoir le même style CSS.

css()Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour implémenter la vérification multiforme des composants liés dynamiquement de vue, des composants enfants et parents

Sélection d'éléments jQuery Explication détaillée des cas d'utilisation de l'appareil

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!