Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

id値/タグ名/クラス名で特定の要素を取り出すには? ― 基本セレクター

2016年1月7日

jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。

  • このエントリーをはてなブックマークに追加

 jQueryのコードは「何を」「どうする」が基本。要素を特定して(=何を)、これを操作する(=どうする)、というわけです。そして、その中でも「何を」を表す$()関数は、jQueryプログラミングの基本であり、基点とも言えます。

 $()関数では、CSSセレクター(Selector*1)を利用することで、複雑な検索条件もごくシンプルに表現できるのが特長です。本稿では、数あるセレクター構文の中でも、まず押さえておきたい「#id」「element」「.class」セレクターについて解説します。

1指定されたid値を持つ要素を取得する

 取得すべき要素をid値で指定するには、#idのように指定します。内部的には、document.getElementByIdメソッドを利用しています。

 例えば以下は、id="jq"である要素の背景を黄色にする例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<ul id="list">
  <li id="docker">プログラマのためのDocker教科書</li>
  <li id="js">JavaScript逆引きレシピ</li>
  <li id="android">アプリを作ろう! Android入門</li>
  <li id="jq">10日でおぼえるjQuery入門教室 第2版</li>
  <li id="ecma">速習 ECMAScript 6</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  // 「id="jq"」の背景を黄色に
  $('#jq').css('background-color', 'Yellow');
});
</script>
</body>
</html>
id値で目的の要素を絞り込むためのコード(id.html)
「id="jq"」の背景を黄色に

 数あるセレクターの中で最も高速に動作しますので、#id単体で要素を特定できるときには、できるだけこれを利用すべきです。

 なお、id値にピリオド(.)やコロン(:)を含んでいる場合、以下のように\\でエスケープ処理してください。さもないと、後述するクラスセレクター/フィルターと誤認識されてしまうからです。

JavaScript
$('#jq\\.main').css('background-color', 'Yellow');
id値にピリオド/コロンを含む場合にはエスケープ処理

[注意]

 id値は、文書内で一意であるはずなので、#idセレクターはただ1つの要素を取り出します。同一のid値が存在する場合も、最初に合致した要素だけを取り出す点に注意してください。ただし、そのような挙動に依存したコードは避けるべきです(重複したid値は、それ自体が不正だからです)。

2指定された要素を取得する

 取得する要素をタグ名で指定するには、セレクターとして単に「タグ名」を指定します。内部的には、document.getElementsByTagNameメソッドを利用しています。

 例えば以下は、全ての<li>要素に枠線を付与する例です。

HTML
<ul id="list">
  <li id="docker">プログラマのためのDocker教科書</li>
  <li id="js">JavaScript逆引きレシピ</li>
  <li id="android">アプリを作ろう! Android入門</li>
  <li id="jq">10日でおぼえるjQuery入門教室 第2版</li>
  <li id="ecma">速習 ECMAScript 6</li>
</ul>
……中略……
<script>
$(function() {
  // <li>要素である要素に枠線を付与
  $('li').css('border', '1px solid #000');
});
</script>
タグ名で目的の要素を絞り込むコード(tag.html)
<li>要素に枠線を付与
<li>要素に枠線を付与

 #idセレクターに次いで、高速なセレクターです。

 全ての要素を取得するならば、$('*')のように指定することもできます(<head><body><script>などの要素も含みます)。ただし、極めて低速でもあり、あまり利用することはないでしょう。

3スタイルクラスをキーに要素を取得する

 「.クラス名」の形式で、class属性で指定されたスタイルクラスをキーに、要素を取得することもできます。ブラウザーが対応していれば、ネイティブなgetElementsByClassNameメソッドを利用します(逆に言えば、未対応なブラウザー(Internet Explorer 8未満)では、jQueryが独自に処理しなければならないため、低速です)。

 例えば以下は、class="basic"である要素のテキスト色を変更する例です。

HTML
<ul id="list">
  <li class="basic">プログラマのためのDocker教科書</li>
  <li class="Intermediate">JavaScript逆引きレシピ</li>
  <li class="Elementary">アプリを作ろう! Android入門</li>
  <li class="Elementary">10日でおぼえるjQuery入門教室 第2版</li>
  <li class="basic">速習 ECMAScript 6</li>
</ul>
……中略……
<script>
$(function() {
  // 「class="basic"」である要素のテキスト色を赤に
  $('.basic').css('color', 'Red');
});
</script>
スタイルクラスで目的の要素を絞り込むコード(class.html)
「class="basic"」である要素のテキスト色を変更

4複数のセレクターを組み合わせる

 セレクター同士をカンマ区切りで列挙することで「~か、~の場合」を表現することもできます。例えば以下はid="jq"、もしくはclass="basic"である要素に背景色を付与する例です。

HTML
<ul id="list">
  <li id="docker" class="basic">プログラマのためのDocker教科書</li>
  <li id="js" class="Intermediate">JavaScript逆引きレシピ</li>
  <li id="android" class="Elementary">アプリを作ろう! Android入門</li>
  <li id="jq" class="Elementary">10日でおぼえるjQuery入門教室 第2版</li>
  <li id="ecma" class="basic">速習 ECMAScript 6</li>
</ul>
……中略……
<script>
$(function() {
  // 「id="jq"」または「class="basic"」である要素のテキスト色を水色に
  $('#jq, .basic').css('background-color', 'Aqua');
});
</script>
複数のセレクターを組み合わせた例(join.html)
「id="jq"」または「class="basic"」である要素の背景色を変更
処理対象:jQueryオブジェクト カテゴリ:コア
API:jQuery()|$() カテゴリ:Core(コア)
処理対象:jQuery拡張 カテゴリ:セレクター
API:IDセレクター ("#id") |要素セレクター ("element") |全要素セレクター ("*") |クラスセレクター (".class") |複数セレクター ("selector1, selector2, selectorN") カテゴリ:Selectors(セレクター) > Basic

※以下では、本稿の前後を合わせて5回分(第34回~第38回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
34. JSON形式のWeb APIにアクセスするには?($.getJSON)

クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。

jQuery逆引きリファレンス
35. 非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?(ajaxXxxxx)

jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明する。

jQuery逆引きリファレンス
36. 【現在、表示中】≫ id値/タグ名/クラス名で特定の要素を取り出すには? ― 基本セレクター

jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。

jQuery逆引きリファレンス
37. 属性値で目的の要素を絞り込むには? ― 属性フィルター

jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説。条件指定には、属性名のみや、属性値の完全一致/部分一致/複数一致などが指定できる。

jQuery逆引きリファレンス
38. 親子/兄弟関係にある要素を取り出すには? ― 階層セレクター

jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素/子孫要素/直後の要素/以降の要素などを絞り込んで取り出す方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!