jQuery 疑似クラス selectors_jquery の使用方法

jQuery セレクターの利点は、セレクターが基本的な CSS セレクターをサポートするだけでなく、多くの CSS 疑似クラス セレクターをサポートし、セレクターをカスタマイズすることもできることです。いくつかの疑似クラス セレクターを見てみましょう。

:nth-child の使用法
nth-child は、jQuery で実装される css3 疑似クラス セレクターです。Jquery API の nth-child の定義は次のとおりです。「親要素の下にある最初の要素と一致します。」 N 個のサブ要素または奇数偶数要素」。読むと少し複雑に感じるので、例で説明します。

コードをコピーします コードは次のとおりです。

f

5

6

seven

2 ;

3

4

6

7

8

9

「青」);



操作効果は次のとおりです:






API 定義での親の一致とは、選択した要素の親要素が異なる場合、それらは別々に選択されることを意味します。上記の例では、合計 18 個の

が選択されていますが、これら 18 個の

は 2 つの異なる

に属しているため、Put の場合は 2 つが選択されます。同じ
で上記のコードを実行します。

上記の一致する親要素を理解した後、このセレクター パラメーターの使用法について説明します。 上記のように選択した位置を直接指定しますが、この位置は 0 ではなく 1 から始まることに注意してください。n 複数の選択方法では、たとえば、3n 1、-3n 1、4n などを n の倍数に一致させることができます。すべてのページに存在します

例:

コードをコピー

コードは次のとおりです。

("li:nth-child(3n-1)").css("background-color", "blue"); < ;/script>
効果:

対応する要素が一致していることがわかります
3. もう 1 つの使用法は、次のようなよく知られた奇数と偶数です。

コードをコピー コードは次のとおりです:




効果:

:最初の子&最後の子
上記の nth-child から、「親クラスと一致する」という意味がわかります。first-child と last-child についても同様であり、これらは nth-child のカプセル化と見なすことができます。
first-child と nth-child(1) は同等なので、ここでは詳しく説明しません。
first-child に関しては、親クラスの最後の子要素に一致する同等の nth-child 式がまだ見つかりません:
Effect:


: 入力は入力と一致するだけではありません
セレクターについては誰もがよく知っていると思いますが、input 疑似クラス セレクターは タグと一致するだけでなく、 と


コードをコピー コードは次のとおりです。
最初のコード:
2 番目:

3 番目:

効果:

最初と最後の li を除いて、他のすべてが選択されていることがわかります。もちろん、ネスト レベルの数には制限があります。具体的な数はわかりません (専門家の方は忘れずに教えてください)。 ) とにかく、悪用せずに使用するには十分です:-)
カスタム疑似クラスセレクター
jquery は元のセレクターを拡張する方法も提供し、独自のニーズに応じてセレクターをカスタマイズできるようにします。実際の例でその方法を見てみましょう。
jquery のシリアライズ メソッドを使用して現在のフォームの要素をサーバーに送信するときは、常に asp.net の ViewState () を選択しますが、これは間違いなく大量のリソースを浪費します。拡張疑似クラス セレクターを使用して、それを選択しない方法を確認します。


コードをコピーします コードは次のとおりです。 🎜>
<フォーム名="form1" メソッド="post" action="default.aspx" id="form1">

<入力タイプ= "隠し" name ="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRWxo4mg/noF3 7k/L7nyw13HVnLQ==" />


" id") === "_VIEWSTATE";
}alert($(":input:noViewState").size());//alert 0 ViewState が選択されていませんn




$.expr を介して疑似クラス セレクターを展開します。上記のセレクターが noViewState を使用した後、viewState が使用されないことがわかります。
が選択されました。

概要:


jQuery の擬似クラス セレクターは非常に強力な機能であり、これらの擬似クラス セレクターをネストしたり拡張したりすることができるため、js プログラミングがさらに楽しくなります。 .

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

レポ：チームメイトを復活させる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

3週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7355

15

Java チュートリアル

1628

14

CakePHP チュートリアル

1353

52

Laravel チュートリアル

1265

25

PHP チュートリアル

1214

29

もっと見る