ホームページ > 記事 > ウェブフロントエンド > jqueryの擬似クラスセレクターとは何ですか?

jqueryの擬似クラスセレクターとは何ですか?

WBOYオリジナル: 2022-06-08 10:48:252451ブラウズ

jquery の疑似クラスセレクター: 1. 位置セレクター、ページ上の位置に従って要素を選択します; 2. サブ要素セレクター、特定の要素の下のサブ要素を選択します; 3. 可視性セレクター、要素を選択します4. コンテンツセレクター、内部テキストまたはサブ要素に基づいて要素を選択します; 5. フォームセレクター、フォーム要素の操作に使用されます; 6. フォーム属性セレクター、選択するフォーム要素の属性に基づいて。

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery の擬似クラスセレクター

擬似クラスセレクターは特別なセレクターとみなすことができます。疑似クラスセレクターはすべて英語のコロン: で始まります。 jQuery は CSS 擬似クラスセレクターの形式を指し、多数の擬似クラスセレクターを提供します。

よく使われる擬似クラスセレクターには以下の6種類があります。

1.「位置」疑似クラスセレクター。

「位置」擬似クラスセレクターは、ページ上の位置に基づいて要素を選択する擬似クラスセレクターを指します。 jQuery の一般的な「位置」疑似クラスセレクターを表に示します。

jqueryの擬似クラスセレクターとは何ですか?

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-min.js"></script>
    <script>
        $(function () {
            $("li:first,li:last").css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

プログラムの実行結果は図に示すとおりです:

jqueryの擬似クラスセレクターとは何ですか?

2.「子要素」疑似クラスセレクター。

「子要素」擬似クラスセレクターとは、特定の要素の下にある子要素を選択する擬似クラスセレクターを指します。子要素の選択は、jQuery で最もよく使用される操作の 1 つです。

jQuery には、「子要素」疑似クラスセレクターの主なカテゴリが 2 つあります。

:最初の子、:最後の子、:n 番目の子(n)、:のみの子;
:最初の子タイプの最後、タイプの n 番目(n)、タイプのみ。

3.「可視性」疑似クラスセレクター。

「可視性」擬似クラスセレクターは、「可視」と「不可視」の 2 つの状態に基づいて要素を選択する擬似クラスセレクターを指します。 jQuery には、2 つの「可視性」疑似クラスセレクターがあります。

:visible はすべての可視要素を選択します
:hidden はすべての非可視要素を選択します要素可視要素

いわゆる非可視要素は、display:none が定義されている要素を指します。

4.「コンテンツ」疑似クラスセレクター。

「コンテンツ」擬似クラスセレクターは、内部テキストまたはサブ要素に基づいて要素を選択する擬似クラスセレクターを指します。 jQuery では、一般的に使用される「コンテンツ」擬似クラスセレクター

:contains(text) は、指定されたテキスト
:を含む要素を選択します。 (selector) 指定されたセレクターを含む要素を選択します。
#:empty テキストとサブ要素を含まない要素、つまり空の要素を選択します
: 親はテキストまたは子要素を含む要素を選択します

5. 「フォーム」疑似クラスセレクター。

「フォーム」擬似クラスセレクターは、特にフォーム要素を操作する擬似クラスセレクターを指します。

:input はすべての入力要素を選択します
:button はすべての通常のボタンを選択します。つまり、
##:submit はすべての送信ボタンを選択します。つまり、
:reset はすべてのリセットボタンを選択します。つまり、
:text はすべての単一行テキストボックスを選択します
:textareaすべての複数行テキストを選択します。 Box
:password すべてのパスワードテキストボックスを選択します。
#:画像すべての画像フィールドを選択します
#:ファイルすべてのファイルフィールドを選択します

「フォーム属性」擬似クラスセレクターは、フォーム要素の属性に基づいて選択される擬似クラスセレクターを指します。

:checked 選択したすべてのフォーム要素を選択します (通常はラジオボタンまたはチェックボックスです)

#:selected 選択したフォーム要素のオプションを選択します (通常はドロップします)ダウンリスト
:enabled 使用可能なすべてのフォーム要素を選択します
:disabled 使用できないすべてのフォーム要素を選択します
:read-only 読み取り専用のフォーム要素をすべて選択します
##:focus フォーカスされたフォーム要素をすべて選択します
##ビデオチュートリアルの推奨事項:
jQuery ビデオチュートリアル

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

jquery css checkbox 选择器 display 伪类 input

声明：

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

前の記事：jqueryのエントリ関数を記述する方法はいくつかあります。次の記事：jqueryのエントリ関数を記述する方法はいくつかあります。

続きを見る

jqueryの擬似クラスセレクターとは何ですか?

jquery の擬似クラス セレクター

関連記事

jquery の擬似クラスセレクター