Vertiefendes Verständnis der Prinzipien und praktischen Anwendungen von Is- und Where-Selektoren-CSS-Tutorial-php.cn

Vertiefendes Verständnis der Prinzipien und praktischen Anwendungen von Is- und Where-Selektoren

WBOY

Freigeben： 2023-09-09 17:54:29

Original

655 Leute haben es durchsucht

Vertiefendes Verständnis der Prinzipien und praktischen Anwendungen von Is- und Where-Selektoren

Umfassendes Verständnis der Prinzipien und praktischen Anwendungen von Is- und Where-Selektoren

Bei der Verwendung von jQuery für DOM-Operationen und Ereignisverarbeitung sind Selektoren eines der Werkzeuge, die wir häufig verwenden. Die is- und where-Selektoren können uns, insbesondere beim Umgang mit komplexen DOM-Strukturen, eine flexiblere und effizientere Auswahlmethode bieten. In diesem Artikel werden die Prinzipien von Is- und Where-Selektoren eingehend untersucht und ihre leistungsstarken Funktionen anhand praktischer Anwendungen demonstriert.

1. Prinzip und praktische Anwendung des Selektors

Prinzip: Der Selektor ist eine Methode, mit der ermittelt wird, ob ein bestimmter Selektor in einer Sammlung von Elementen vorhanden ist. Es durchläuft die Elementsammlung und führt den angegebenen Selektor für jedes zu vergleichende Element aus. Wenn die Übereinstimmung erfolgreich ist, wird true zurückgegeben, andernfalls wird false zurückgegeben. Da die Beurteilungsbedingung nur wahr oder falsch zurückgeben muss, kann der is-Selektor während der Ausführung vorzeitig enden.
Praktische Anwendung
(1) Bestimmen Sie, ob das Element den angegebenen CSS-Klassennamen hat
```
if($('div').is('.active')) {
 // 执行操作
}
```
Nach dem Login kopieren
Im obigen Code durchläuft der is-Selektor alle div-Elemente und bestimmt, ob sie den CSS-Klassennamen „aktiv“ haben. Wenn es vorhanden ist, führen Sie den entsprechenden Vorgang aus.

(2) Bestimmen Sie, ob das Element zur angegebenen Selektorbeschreibung gehört

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

Nach dem Login kopieren

Im obigen Code durchläuft der is-Selektor alle div-Elemente und bestimmt, ob es zur Selektorbeschreibung „:visible“ gehört. Wenn es dazugehört, führen Sie den entsprechenden Vorgang aus.

2. Prinzip und praktische Anwendung des Where-Selektors

Where-Selektor ist eine Methode zum Filtern von Elementen in einer Sammlung von Elementen, die bestimmte Bedingungen erfüllen. Es durchläuft die Elementsammlung und führt die angegebene Bedingung für jedes Element aus. Wenn die Bedingung erfüllt ist, wird das Element der neuen Sammlung hinzugefügt und zurückgegeben.
Praktische Anwendung
(1) Alle Elemente mit bestimmten Attributen filtern
```
var result = $('div').where('[data-name]');
// result包含所有具有data-name属性的div元素
```
Nach dem Login kopieren
Im obigen Code durchläuft der Where-Selektor alle div-Elemente, filtert Elemente mit Datennamenattributen heraus und fügt sie einer neuen Sammlung hinzu.

(2) Alle Elemente filtern, die den angegebenen Text enthalten

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

Nach dem Login kopieren

Im obigen Code durchläuft der Where-Selektor alle div-Elemente, filtert Elemente heraus, die den Text „Hallo“ enthalten, und fügt sie einer neuen Sammlung hinzu.

3. Codebeispiel

Im Folgenden wird anhand eines einfachen Beispiels die Verwendung von is- und where-Selektoren demonstriert.

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

Nach dem Login kopieren

Im obigen Code verwenden wir den is-Selektor, um zu bestimmen, ob ein div-Element mit dem CSS-Klassennamen „active“ vorhanden ist, und setzen seine Hintergrundfarbe auf Gelb. Verwenden Sie den Where-Selektor, um div-Elemente mit Daten-ID-Attributen und „Hallo“-Text zu filtern und die Ergebnisse entsprechend auszudrucken.

Zusammenfassung:

Durch die Einleitung dieses Artikels haben wir ein tiefes Verständnis der Prinzipien und praktischen Anwendungen von is Selector und Where Selector erlangt. Ob es darum geht, zu bestimmen, ob ein Element einen bestimmten CSS-Klassennamen hat, Elemente mit bestimmten Attributen zu filtern oder Elemente zu filtern, die bestimmten Text enthalten, die Selektoren „is“ und „where“ können eine wichtige Rolle spielen. In der tatsächlichen Entwicklung kann die rationelle Verwendung dieser beiden Selektoren unsere Effizienz und Bequemlichkeit verbessern.

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der Prinzipien und praktischen Anwendungen von Is- und Where-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!