jQuery逆引きリファレンス
id値/タグ名/クラス名で特定の要素を取り出すには? ― 基本セレクター
jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。
jQueryのコードは「何を」「どうする」が基本。要素を特定して(=何を)、これを操作する(=どうする)、というわけです。そして、その中でも「何を」を表す$()
関数は、jQueryプログラミングの基本であり、基点とも言えます。
$()
関数では、CSSセレクター(Selector*1)を利用することで、複雑な検索条件もごくシンプルに表現できるのが特長です。本稿では、数あるセレクター構文の中でも、まず押さえておきたい「#id」「element」「.class」セレクターについて解説します。
- *1 厳密には、一部の構文がjQueryによって拡張されています。具体的には、以下のリンク先のようなものです。
1指定されたid値を持つ要素を取得する
取得すべき要素をid
値で指定するには、#id
のように指定します。内部的には、document.getElementById
メソッドを利用しています。
例えば以下は、id="jq"
である要素の背景を黄色にする例です。
<!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値にピリオド(.)やコロン(:)を含んでいる場合、以下のように\\
でエスケープ処理してください。さもないと、後述するクラスセレクター/フィルターと誤認識されてしまうからです。
$('#jq\\.main').css('background-color', 'Yellow');
|
[注意]
#id
セレクターはただ1つの要素を取り出します。同一のid値が存在する場合も、最初に合致した要素だけを取り出す点に注意してください。ただし、そのような挙動に依存したコードは避けるべきです(重複したid値は、それ自体が不正だからです)。2指定された要素を取得する
取得する要素をタグ名で指定するには、セレクターとして単に「タグ名」を指定します。内部的には、document.getElementsByTagName
メソッドを利用しています。
例えば以下は、全ての<li>
要素に枠線を付与する例です。
<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>
|
#id
セレクターに次いで、高速なセレクターです。
全ての要素を取得するならば、$('*')
のように指定することもできます(<head>
、<body>
、<script>
などの要素も含みます)。ただし、極めて低速でもあり、あまり利用することはないでしょう。
3スタイルクラスをキーに要素を取得する
「.クラス名」の形式で、class
属性で指定されたスタイルクラスをキーに、要素を取得することもできます。ブラウザーが対応していれば、ネイティブなgetElementsByClassName
メソッドを利用します(逆に言えば、未対応なブラウザー(Internet Explorer 8未満)では、jQueryが独自に処理しなければならないため、低速です)。
例えば以下は、class="basic"
である要素のテキスト色を変更する例です。
<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>
|
4複数のセレクターを組み合わせる
セレクター同士をカンマ区切りで列挙することで「~か、~の場合」を表現することもできます。例えば以下はid="jq"
、もしくはclass="basic"
である要素に背景色を付与する例です。
<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>
|
API:jQuery()|$() カテゴリ:Core(コア)
処理対象:jQuery拡張 カテゴリ:セレクター
API:IDセレクター ("#id") |要素セレクター ("element") |全要素セレクター ("*") |クラスセレクター (".class") |複数セレクター ("selector1, selector2, selectorN") カテゴリ:Selectors(セレクター) > Basic
※以下では、本稿の前後を合わせて5回分(第34回~第38回)のみ表示しています。
連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。
34. JSON形式のWeb APIにアクセスするには?($.getJSON)
クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。
35. 非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?(ajaxXxxxx)
jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明する。
36. 【現在、表示中】≫ id値/タグ名/クラス名で特定の要素を取り出すには? ― 基本セレクター
jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。
37. 属性値で目的の要素を絞り込むには? ― 属性フィルター
jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説。条件指定には、属性名のみや、属性値の完全一致/部分一致/複数一致などが指定できる。
38. 親子/兄弟関係にある要素を取り出すには? ― 階層セレクター
jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素/子孫要素/直後の要素/以降の要素などを絞り込んで取り出す方法を説明する。