コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JQuery の要素を取得するメソッドの概要

小云云
リリース： 2017-12-05 09:59:30
オリジナル
2047 人が閲覧しました

1. 説明

要素を取得するには、jQuery セレクターと jQuery トラバーサル関数の 2 つの方法があります。この記事では、皆様のお役に立てればと思い、JQuery の要素を取得する方法の概要を共有します。

要約を作成して知識を統合します。

2番目に、それ自体を取得します

1. 必要なjQueryセレクターは1つだけです

selector インスタンス 手順
#ID $( '# myId') ID セレクター: ID が「myId」の要素を取得できます。大文字と小文字は区別されます

2. さまざまな jQuery セレクターの組み合わせ

は 2 つの部分に分かれています:前半は要素のコレクションを取得し、後半は 2 つの要素を組み合わせて目的の要素を取得できます。 class

$('.myClass')

クラスセレクター: クラス 'myClass' ですべての要素を取得できますelementすべての

要素を取得します

:headerすべてのタイトル要素を取得:

~

:animated$(':animated')すべてのアニメーション要素を取得= 属性 href および値 a.html を持つすべての要素を取得します ! = 属性 href を持つすべての要素を取得します。値は a.html と等しくありません $= 属性 href を持つすべての要素を取得します。値は a.html で終わります ^= 属性を持つすべての要素を取得しますhref であり、値は a.html で始まります。 要素 ~= 属性 href があり、値に単語「a.html」が含まれるすべての要素を取得します。 *= 属性 href があり、値にテキストが含まれるすべての要素を取得します"a.html" $(':input'):enabled:checked 要素要素
$('p') $(':header')
:contains(text)$ ('p:contains(Hello)') テキスト Hello を含むすべての

要素を取得します。中央のテキストは大文字と小文字が区別されます

: hidden $(':hidden') すべての非表示要素を取得:幅と高さは 0、display:none、type=hidden、
[attribute] $('[href]') 属性セレクター: 属性 href を持つすべての要素を取得します
[attribute=value] $('[href=a.html]')
:input
すべての入力要素を取得 :radio

$(':radio')

型を持つすべての入力要素="radio"

類似のものは次のとおりです:

:text、:chexbox、:password、:submit、:reset、:button、:file
$(':enabled') すべての有効な入力要素。 :disabled はその逆です
$(':checked') 選択されたすべての入力選択 (ラジオ ボックス、チェック ボックス)

:gt(index)

$('p :gt (2)')

index は 0 から始まり、2 より大きい (含まれない) インデックスを持つすべての

要素を取得します
:lt(index) $('p:lt(2)' ) インデックスは 0 から始まり、インデックスが 2 未満のすべての

要素を取得します
:even $('tr:even') 偶数のすべての
:odd$('tr:odd')すべての奇数

2) セレクターの後半: 特定の要素に正確に指定できます

Selector

例

説明

:最初

$('p:first')

first

要素

:last

$('p:last')

last

要素

:eq(index)$("p:eq(1)")
2 番目の

要素、インデックスは 0 から始まります

3. jQuery セレクター + トラバーサル関数

も 2 つの部分に分かれています。前半はセレクターを使用して要素のセットを取得し、後半はトラバーサル関数を使用して特定の要素を正確に選択します

1）前半の部分は上記と同じです2）後半：トラバーサル関数

メソジ選択された要素の指定されたインデックス番号 first() last() 選択された要素の最後の要素を返します3. 兄弟要素を取得します 名前が示すように、選択された要素
選択された要素の最初の要素を返します
の

兄弟

要素を取得します。まず、要素を見つけて (

上でまとめたので繰り返しません

)、次にその兄弟要素を取得する必要があります。

1) セレクター

セレクターインスタンス

説明$('p + p')$('p ~ p') は p と同じレベルのすべての

要素を取得します

説明
要素 + 次 各 p は隣接しています。次の < p> 要素 element ~兄弟
2) トラバーサル関数
メソッド

next()

選択された要素の次の兄弟要素を返します

nextAll()選択した要素の前の兄弟要素を返しますprevAll()選択した要素の前のすべての兄弟要素を返します 4. 入手親要素の親要素
選択された要素の後のすべての要素を返します兄弟要素 prev()
選択された要素

を取得する 1) セレクター

セレクター

例

説明

:親$ ('p:parent') 2) トラバーサル関数メソッド 説明
全てのp要素の親要素を取得

親()

選択した要素の親要素を取得します


parents()

選択した要素のすべての祖先要素を取得します 子 要素を取得する 1) セレクター
5. 子要素を取得します
選択された要素の

セレクター

インスタンス

説明

親>子 $('p > p') 2) トラバーサル関数MethodDescription
p の直接の子要素のすべての

要素を取得します

親の子孫 $('p p') p のすべての子孫の

要素を取得します


children()

選択された要素の直接の子要素をすべて返します

内容()返品選択した要素のすべての直接の子要素(テキストノードとコメントノードを含む)find()関連する推奨事項: jquery は要素を取得します。index() メソッドの例の詳細な説明 jquery は要素を取得し、要素をラップし、要素属性の使用法の詳細を挿入します
選択した要素の子孫要素を返します
上記の内容は概要ですJQuery の要素を取得する方法について、皆さんのお役に立てれば幸いです。

jquery メソッドは要素の値を取得します (共通フォーム要素)_jquery

以上がJQuery の要素を取得するメソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
jquery 要約する 方法
ソース：php.cn
前の記事：JS_javascript スキルに実装されたカウントソートおよび基数ソートアルゴリズムの例 次の記事：10 の興味深い Javascript および CSS ライブラリ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
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
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート