検索
ホームページウェブフロントエンドjsチュートリアルJQuery のさまざまなセレクターの紹介

JQuery のさまざまなセレクターの紹介

Jun 26, 2017 am 11:55 AM
jquery勉強ノート

1. JQuery基本セレクター

idセレクタークラスセレクタータグセレクターワイルドカードセレクターグループセレクター
express 説明 $("#idName")
$(" .className")
$("tagName")
$("*")
$( "tagName,.className, # ID名、 ...")
2. 階層セレクター

は親子関係と兄弟関係からノードを選択します。

expresssde scriptION
RMARKS $ ("A & GT ;b") を選択しますノード a (孫ノードではなく、子ノードのみを含みます)$("a+b")$("a~b ")ノード a の後のすべての兄弟ノード b を選択しますすべての兄弟ノードではなく、ノード a,

3. 基本的なフィルターセレクター

は、場所の観点からタグをフィルターします。名前:ファースト" )

tagName 要素セットの最初の要素を選択します
$ ("A B") ノード A のすべての子孫ノードを選択します (サブノードと Sun Jie ノードを含む)
のすべての子ノード b
ノード a の後の最初のノードを選択します 兄弟ノード b
の後の兄弟ノードであることに注意してください
(インデックスは配列と同じで、0 から始まります)$("tagName:gt(2)") tagName 要素セット 3 番目の要素を選択tagName 要素内で すべてのヘッダー要素を選択します アニメーション要素を選択$("tagName:not(.one)")
$("tagName:last") tagName 要素セットの最後の要素を選択します
$("tagName:odd ") tagName 要素セット内の奇数位置にある要素を選択します
$("tagName:even") tagName 要素セット内の偶数位置にある要素を選択します
$("tagName:eq (1 )") tagName 要素セットの 2 番目の要素を選択します
の 3 番目の要素以降の要素 (つまり、tagName の下の要素、位置が 3 より大きい)
$("tagName:lt(2)")
より前の要素 (つまり、tagName の下の位置が 3 より小さい要素) に設定します
$(":header")
( h1 から h6 )
$(" :animated")

クラス値がtagName要素の1ではない要素を選択set
4. コンテンツフィルタリングセレクター
ノード値が空かどうか、ノード上のテキストに指定された文字列が含まれているかどうか、および子要素のクラス値が指定されたクラス値であるかどうかvalue.
express

description

Remarks

$( "tagname:empty")

タグネーム要素コレクションの空のコンテンツを使用して要素を選択します(子要素ではありません)
$("tagName:has(.one)")tagNmae要素セット内のクラス値が1の要素を選択します
$("tagName:parent" ) tagName要素セット内の子要素を含む要素を選択します
$("tagName:contents('abc')") 「」を含む要素を選択しますtagName要素セット内のabc"(子要素ではありません)
(子要素ではありません)要素、それは tagName 要素です)

5. 属性フィルター (指定された属性を含む要素を選択)

属性に基づいてノードをフィルターします: 属性の有無、属性値が等しい、等しくない、含む、** で始まる、 * * end、複数のフィルタリング。

$ ("div[id='test']")
選択された要素には id="test" が含まれています そして id 属性を持っています6. 可視性フィルターセレクターは、ページ上の要素が表示されるかどうかに基づいてノードを選択します備考
$("div[title!='test']") 選択された要素 title 属性が「test」ではありません
$("div[title^='te']") 選択した要素の title 属性値が「test」で始まります
$("div[title$='st']") 選択した要素のtitle属性は"test"で終わります
$("div[title*='est']") 選択した要素の title 属性値に "est" が含まれています
$("div[title*='est'][id]") 選択した要素の title 属性値に "est" が含まれています、

特急
説明

$("div:hidden")

非表示のdiv要素を選択

$("div :hidden")
div要素内のすべての非表示要素を選択(子要素と要素を含む)孫要素)$("div:visiable")表示可能な div 要素を選択$("div :visiable") div 内の表示可能な要素を選択( 子要素と孫要素)

以上がJQuery のさまざまなセレクターの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール