jqueryのセレクターeqとは何ですか-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

jqueryのセレクターeqとは何ですか

PHPz

May 14, 2023 am 10:13 AM

jQuery は、HTML ドキュメントの走査と操作、イベント処理、アニメーション効果、および AJAX インタラクションを簡素化するように設計された JavaScript ライブラリです。 jQuery セレクターは、jQuery ライブラリの最も基本的かつ中心的な部分であり、jQuery ライブラリが DOM 要素を検索するために使用する関数です。

jQuery セレクターでは、eq() はインデックスベースのトラバーサルおよびフィルターセレクターです。これは、1 つ以上の要素内の特定のインデックス位置にある要素を選択して、要素のコレクションを取得するために使用されます。ふるい分けとフィルターを行います。

以下、jQueryセレクターeq()の使い方と操作テクニックを詳しく紹介します。

1. jQuery セレクター eq() の構文

jQuery では、eq() セレクターの構文は次のとおりです:

$(selector).eq (index)

このうち、$(selector) は jQuery のセレクター式で、フィルタリングして選択する必要がある要素を指定するために使用されます。 Index は 0 から始まる整数値で、選択する要素のインデックス位置を指定するために使用されます。

index が 0 より小さいか、要素数から 1 を引いた値より大きい場合、eq() はエラーを報告する代わりに空の jQuery オブジェクトを返すことに注意してください。

2. jQuery セレクター eq() の例

以下では、jQuery セレクター eq() の具体的な使い方と操作をよりよく理解するために、実際の応用例をいくつか紹介します。

例 1: セレクターフィルター処理

次の例では、3 つの異なるセレクターフィルター処理メソッドを使用してリスト内の li 要素を選択し、次に eq(1) を使用して選択します。背景色を変更する 2 番目の要素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery demo - eq()选择器</title>
    <style type="text/css">
        .active {
            background-color: #EE9A00;
        }
    </style>
</head>
<body>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Pineapple</li>
        <li>Orange</li>
        <li>Grape</li>
    </ul>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        // 根据元素名筛选
        $('li').eq(1).addClass('active');  
        // 根据类名筛选
        $('.active').eq(1).addClass('active');  
         // 根据ID名筛选
        $('#word3').eq(0).addClass('active');  
    </script>
</body>
</html>

ログイン後にコピー

例 2: セレクターのトラバーサルと操作

次の例では、セレクター eq() を使用して、フォーム内の複数の入力ボックス要素のトラバーサルと操作を実装します。いずれかの入力ボックスで操作を行うと、他の入力ボックスの値もそれに応じて変化します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery demo - eq()选择器</title>
</head>
<body>
    <form>
        <input type="text" id="input1" value="default value"/>
        <input type="text" id="input2" value="default value"/>
        <input type="text" id="input3" value="default value"/>
        <input type="text" id="input4" value="default value"/>
    </form>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $("input").on("input", function() {
            var index = $("input").index(this);
            $("input").eq(index).val($(this).val());
        }); 
    </script>
</body>
</html>

ログイン後にコピー

3. 概要

上記の例を通じて、jQuery における eq() セレクターの重要な役割がわかります。これを使用すると、必要な要素を迅速かつ正確に特定、フィルタリング、操作できるため、より効率的で便利なプログラミングと開発が実現します。したがって、jQuery セレクターを学習してマスターする場合は、eq() セレクターの使用法と操作スキルを習得することに重点を置く必要があります。これは、プログラミングの効率と作業品質を向上させる上で非常に重要です。

以上がjqueryのセレクターeqとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。