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 プログラミングがさらに楽しくなります。 .

関連ラベル：

jquery 疑似クラス セレクタ

ソース：php.cn

前の記事：ファイル button_javascript スキルのデフォルトのスタイル実装コードを変更します。 次の記事：ExtJS4.1について: ショートカットキーsupport_javascriptスキルの問題

このウェブサイトの声明

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

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...

から 2024-04-06 14:54:03

0

2

421

jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...

から 2024-04-05 09:26:49

0

1

1418

エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...

から 2024-04-04 18:40:04

0

1

3528

ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...

から 2024-04-04 17:27:27

0

1

417

Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...

から 2024-04-04 12:53:48

0

1

303

関連トピック

詳細>

• jqueryプラグインとは何ですか?
• jQueryでJSONを操作する方法
• jqueryで要素を削除する方法
• jQueryのhover()メソッドの使用
• jqueryはページングメソッドを実装します
• jqueryの隠し要素とは何ですか
• jQueryでハイライト表示されているもの
• コンピューターを自動的に WiFi に接続するように設定する方法