Compréhension approfondie des principes et des applications pratiques des sélecteurs est et où-tutoriel CSS-php.cn

Compréhension approfondie des principes et des applications pratiques des sélecteurs est et où

WBOY

Libérer： 2023-09-09 17:54:29

original

678 Les gens l'ont consulté

Compréhension approfondie des principes et des applications pratiques des sélecteurs est et où

Lorsque vous utilisez jQuery pour les opérations DOM et le traitement des événements, les sélecteurs sont l'un des outils que nous utilisons souvent. Les sélecteurs est et où, en particulier lorsqu'il s'agit de structures DOM complexes, peuvent nous fournir une méthode de sélection plus flexible et plus efficace. Cet article explorera en profondeur les principes des sélecteurs est et où, et démontrera leurs puissantes fonctions à travers des applications pratiques.

1. Principe et application pratique de ce sélecteur

Principe
Ce sélecteur est une méthode utilisée pour déterminer si un sélecteur spécifié existe dans une collection d'éléments. Il parcourra la collection d'éléments et exécutera le sélecteur spécifié pour faire correspondre chaque élément. Si la correspondance réussit, il renverra vrai, sinon il renverra faux. Étant donné que la condition de jugement doit uniquement renvoyer vrai ou faux, le sélecteur is peut se terminer plus tôt lors de l'exécution.
Application pratique
(1) Déterminez si l'élément a le nom de classe CSS spécifié
```
if($('div').is('.active')) {
 // 执行操作
}
```
Copier après la connexion
Dans le code ci-dessus, le sélecteur is parcourra tous les éléments div et déterminera s'ils ont le nom de classe CSS « actif ». S'il existe, effectuez l'opération correspondante.

(2) Déterminer si l'élément appartient à la description du sélecteur spécifiée

if($('div').is(':visible')) {
    // 执行操作
}

Copier après la connexion

Dans le code ci-dessus, le sélecteur is parcourra tous les éléments div et déterminera s'il appartient à la description du sélecteur ':visible'. S'il appartient, effectuez l'opération correspondante.

2. Principe et application pratique du sélecteur Where

Principe
where Selector est une méthode utilisée pour filtrer des éléments dans une collection d'éléments qui répondent à des conditions spécifiées. Il traversera la collection d'éléments et exécutera la condition spécifiée sur chaque élément. Si la condition est remplie, l'élément sera ajouté à la nouvelle collection et renvoyé.
Application pratique
(1) Filtrer tous les éléments avec des attributs spécifiques
```
var result = $('div').where('[data-name]');
// result包含所有具有data-name属性的div元素
```
Copier après la connexion
Dans le code ci-dessus, le sélecteur Where parcourra tous les éléments div, filtrera les éléments avec des attributs de nom de données et les ajoutera à un nouveau retour de collection.

(2) Filtrer tous les éléments contenant le texte spécifié

var result = $('div').where(':contains("Hello")');
// result包含所有包含"Hello"文本的div元素

Copier après la connexion

Dans le code ci-dessus, le sélecteur Where parcourra tous les éléments div et filtrera les éléments contenant le texte "Bonjour", en les ajoutant à un nouveau retour de collection.

3. Exemple de code
Ce qui suit utilise un exemple simple pour démontrer l'utilisation des sélecteurs is et Where.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery is与where选择器示例</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // 判断是否有active类
            if($('div').is('.active')) {
                $('div.active').css('color', 'red');
            }
            
            // 获取所有自定义属性为data-id的元素
            var result = $('div').where('[data-id]');
            console.log(result);
            
            // 获取所有包含'Hello'文本的元素
            var result = $('div').where(':contains("Hello")');
            console.log(result);
        });
    </script>
    <style>
        .active {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="active">Hello, World!</div>
    <div data-id="1"></div>
    <div data-id="2">Hello, jQuery!</div>
    <div>Hello</div>
    <div>World</div>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous utilisons le sélecteur is pour déterminer s'il existe un élément div avec le nom de classe CSS « actif » et définissons sa couleur d'arrière-plan sur jaune. Utilisez le sélecteur Where pour filtrer les éléments div avec des attributs data-id et contenant le texte « Bonjour », et imprimez les résultats respectivement.

Résumé :
Grâce à l'introduction de cet article, nous avons une compréhension approfondie des principes et des applications pratiques de son sélecteur et du sélecteur où. Qu'il s'agisse de déterminer si un élément a un nom de classe CSS spécifié, de filtrer des éléments avec des attributs spécifiques ou de filtrer des éléments contenant du texte spécifié, les sélecteurs est et où peuvent jouer un rôle important. Dans le développement actuel, l'utilisation rationnelle de ces deux sélecteurs peut améliorer notre efficacité et notre commodité.

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!