is および where セレクターの原理と実際の応用についての深い理解-CSSチュートリアル-php.cn

is および where セレクターの原理と実際の応用についての深い理解

WBOY

リリース： 2023-09-09 17:54:29

オリジナル

678 人が閲覧しました

is および where セレクターの原理と実際の応用についての深い理解

is セレクターと where セレクターの原理と実際の応用についての深い理解

DOM 操作とイベント処理に jQuery を使用する場合、セレクターはツールの 1 つです。よく使う１つ。 is セレクターと where セレクターは、特に複雑な DOM 構造を扱う場合に、より柔軟で効率的な選択方法を提供します。この記事では、is セレクターと where セレクターの原理を深く調査し、実際のアプリケーションを通じてその強力な機能を実証します。

1. is セレクターの原理と実際の応用

原理
is セレクターは、指定されたセレクターが要素コレクション内に存在するかどうかを照合するために使用されるメソッドです。要素コレクションを走査し、指定されたセレクターを実行して各要素を照合します。照合が成功した場合は true を返し、そうでない場合は false を返します。判定条件は true または false を返せばよいため、実行中に is セレクタを早期に終了することができます。
実用的なアプリケーション
(1) 要素が指定された CSS クラス名を持つかどうかを判断します
```
if($('div').is('.active')) {
 // 执行操作
}
```
ログイン後にコピー
上記のコードでは、is セレクターはすべての div 要素を走査し、「active」という名前の CSS クラスがあります。存在する場合は、対応する操作を実行します。

(2) 要素が指定されたセレクターの説明に属するかどうかを判断します。

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

ログイン後にコピー

上記のコードでは、セレクターはすべての div 要素を走査し、それらが属するかどうかを判断します。デバイスの説明「:visible」を選択します。該当する場合は、対応する操作を実行します。

2. where セレクターの原理と実際の応用

原理
where セレクターは、指定された条件を満たす要素のコレクション内の要素をフィルターするために使用されるメソッドです。要素コレクションを走査し、各要素に対して指定された条件を実行します。条件が満たされた場合、要素は新しいコレクションに追加されて返されます。
実用的なアプリケーション
(1) 特定の属性を持つすべての要素をフィルターする
```
var result = $('div').where('[data-name]');
// result包含所有具有data-name属性的div元素
```
ログイン後にコピー
上記のコードでは、where セレクターはすべての div 要素を走査し、データを持つ要素をフィルターで除外します。 name 属性を持つ要素。新しいコレクションに追加して返します。

(2) 指定されたテキストを含むすべての要素をフィルターする

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

ログイン後にコピー

上記のコードでは、where セレクターはすべての div 要素を走査し、「Hello」を含む要素をフィルターで除外します。 " テキストの要素が返された新しいコレクションに追加されました。

3. コード例
以下では、簡単な例を使用して、is セレクターと 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>

ログイン後にコピー

上記のコードでは、is セレクターを使用して、CSS クラス名「active」を持つ div 要素があるかどうかを判断し、その背景色を黄色に設定します。 where セレクターを使用して、data-id 属性を持ち、「Hello」テキストを含む div 要素をフィルターし、結果をそれぞれ出力します。

概要:
この記事の導入部を通じて、is セレクターと where セレクターの原理と実際の応用について深く理解しました。要素に指定された CSS クラス名があるかどうかを判断する場合でも、特定の属性を持つ要素をフィルタリングする場合でも、指定されたテキストを含む要素をフィルタリングする場合でも、セレクターが重要な役割を果たすことができます。実際の開発では、これら 2 つのセレクターを合理的に使用することで、効率と利便性を向上させることができます。

以上がis および where セレクターの原理と実際の応用についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。