jQueryによる要素の選択
jQueryによる要素の選択
「jQueryによる要素の選択」はCoddyKit上の無料jQuery Academyレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全1レッスンが含まれています。
はじめに
こんにちは。
jQueryはXPath構文を使ってDOM要素を選択します。
CSSを使っている方や、XMLでノードを選択するためにXPathを使ったことがある方なら、jQueryでの要素の選択方法はすでにご存じということです。
jQueryで使ってみましょう 🚀
クラスセレクター
目的のクラスを持つ要素は、ドット（.）演算子を使って選択します。
以下の例では、titleクラスを持つすべての要素を選択し、色を変更します。
<p class="title">Hello</p>
<p class="title">CoddyKit</p>
<p class="title">Learning</p>
<p class="title">jQuery</p>
<script>
$('.title').css('color','pink')
</script>警告
次のレッスンではcss()メソッドを紹介します。
ここでは、css()メソッドは要素のスタイルを定義するために使用するものだと覚えておいてください。
IDセレクター
目的のIDを持つ要素は、#（ハッシュ記号）演算子を使って選択できます。ご存じのとおり、同じID値を指定できる要素はHTMLページ内で1つだけです。
以下の例では、titleというIDを持つ要素を選択し、色を変更します。
<p id="title">Hello</p>
<p id="title1">CoddyKit</p>
<p id="title2">Learning</p>
<p id="title3">jQuery</p>
<script>
$('#title').css('color','pink')
</script>タグセレクター
目的のタグに該当する要素は、タグ名だけを使って選択できます。
以下の例では、spanタグを持つ要素を選択し、色を変更します。
<p>Hello</p>
<span>Hello</span>
<span>CoddyKit</span>
<script>
$('span').css('color','pink')
</script>子要素セレクター
要素の子要素を選択する場合は、大なり記号（>）演算子を使います。
以下の例では、目的の要素のすべての子要素を選択します。
<p>
<span>Hello</span>
<span>CoddyKit</span>
</p>
<script>
$('p>span').css('color','pink')
</script>属性セレクター
要素の属性に値が設定されているかを確認して、目的の要素を選択できます。
以下の例では、<a>タグを持ち、target属性の値が_blankである要素を選択します。
<a target="_blank"
href="http://coddykit.com">
CoddyKit
</a>
<script>
$ ('a[target = "_blank"]').css('color','pink')
</script>jQueryの選択メソッド
jQueryには、XPathセレクターに加えていくつかのメソッドが用意されており、DOM内の要素を簡単に選択できます。
それらについて学びましょう。
Parentメソッド
parent()メソッド
jQueryが提供するparent() メソッドを使うと、目的の要素の親要素を選択できます。
以下の例では、要素の親要素を選択し、親要素の文字色を変更します。
<div>
Parent Element Text
<a target="_blank" href="http://coddykit.com">
CoddyKit
</a>
</div>
<script>
$ ('a').parent().css('color','pink')
</script>Childrenメソッド
children()メソッド
jQueryが提供するchildren()メソッドを使うと、目的の要素のすべての子要素を選択できます。
以下の例では、要素のすべての子要素を選択し、子要素の文字色を変更します。
<div>
<a target="_blank" href="http://coddykit.com">
CoddyKit
</a>
<span>Children Element Text</span>
</div>
<script>
$ ('div').children().css('color','pink')
</script>parentsメソッド
parents()メソッド
jQueryが提供するparents()メソッドを使うと、目的の要素の祖先要素を選択できます。
以下の例では、要素の祖先を選択し、親要素の文字色を変更します。
このメソッドがこれまでに学んだ他のメソッドと異なる点は、パラメーターを指定できることです。
そこで、どの祖先を選択するかを指定するために、XPathセレクターをパラメーターとして渡します。
<div class="wrapper">
Hello
<p>
<span>CoddyKit</span>
<p>
</div>
<script>
$ ('span').parents('.wrapper').css('color','pink')
</script>nextメソッド
next()メソッド
next() メソッドは、目的の要素の次の兄弟要素を選択します。
以下の例では、aタグを持つ要素の直後にある最初の兄弟要素を選択します。
<a href="http://coddykit.com">CoddyKit</a>
<span>I am first sibling of a element</span>
<script>
$ ('a').next().css('color','pink')
</script>nextAllメソッド
nextAll()メソッド
nextAll() メソッドは、目的の要素の次にある兄弟要素を選択するために使用します。
以下の例では、divタグを持つ要素より後にあるすべての兄弟要素を選択します。
<span>I'm previous sibling<span>
<div></div>
<span>I'm next sibling<span>
<span>I'm next sibling too<span>
<script>
$ ('div').nextAll().css('color','pink')
</script>siblingsメソッド
siblings()メソッド
siblings()メソッドを使うと、目的の要素のすべての兄弟要素を選択できます。
以下の例では、pタグを持つ要素のすべての兄弟要素を選択します。
<p>Hello</p>
<div>jQuery</div>
<div>Methods</div>
<script>
$ ('p'). siblings().css('color','pink')
</script>prev
prev()メソッド
prev()メソッドは、要素の直前にある兄弟要素を選択するために使用します。
aタグを持つ要素の直前にある最初の兄弟要素を選択します。
<span>Hello Coddy</span>
<div class="test"></div>
<script>
$ ('.test').prev().css('color','pink')
</script>prevAllメソッド
prevAll()メソッド
prevAll()メソッドは、目的の要素の前にある兄弟要素を選択するために使用します。
以下の例では、divタグを持つ要素より前にあるすべての兄弟要素を選択します。
<span>I'm previous sibling</span>
<span>I'm previous sibling too</span>
<div></div>
<span>I'm next sibling</span>
<script>
$('div').prevAll().css('color','pink')
</script>おめでとうございます
おめでとうございます 🎉
このセクションでは、DOM要素の選択について学びました。
次のセクションでは、引き続きDOM操作について学びます。
AI チューターと学ぶ JavaScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 22
- レッスン
- 48
よくある質問
「jQueryによる要素の選択」レッスンは無料ですか？
はい。「jQueryによる要素の選択」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全1レッスンが含まれています。
「jQueryによる要素の選択」で何を学びますか？
jQueryによる要素の選択 ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
jQuery Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。
「jQueryによる要素の選択」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このjQuery Academyレッスンでコードを書いて実行できますか？
はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。