$()関数（jQueryの基本関数）

『jQuery』の基本関数である『$()』は、CSSセレクタや要素を引数に渡すことでDOM要素を選択し、jQueryオブジェクトとして返します。このjQueryオブジェクトに対してメソッドチェーンでさまざまな操作を行うのが、jQueryプログラミングの基本スタイルです。

構文

// CSSセレクタで要素を選択する
$(selector)

// HTML文字列から新しい要素を生成する
$(htmlString)

// DOMの準備完了時に関数を実行する（$(document).ready() の省略形）
$(function() {
    // DOMが準備できたら実行する処理
});

// jQueryオブジェクト・DOM要素・配列をラップする
$(element)
$(elementArray)
$(jQueryObject)

引数一覧

引数/形式	概要
selector（文字列）	CSSセレクタを文字列で指定します。『#id』『.class』『tag』など、CSSで使えるセレクタがほぼすべて利用できます。
htmlString（文字列）	HTML文字列を指定すると、新しいDOM要素を生成してjQueryオブジェクトとして返します。例：『$("<div>テキスト</div>")』
function	関数を渡すと、DOMの準備が完了した時点で実行されます。『$(document).ready(function() {})』の省略形です。
element（DOM要素）	ネイティブのDOM要素を渡すと、jQueryオブジェクトでラップして返します。
elementArray（配列）	DOM要素の配列を渡すと、jQueryオブジェクトでラップして返します。
jQueryObject	既存のjQueryオブジェクトを渡すと、そのコピーを返します。

サンプルコード

各種セレクタによる要素の選択と、DOM操作・イベント登録の基本的な使い方です。

サンプルページはこちら

$(function() {

    // IDセレクタで要素を選択し、テキストを変更する
    $("#title").text("呪術廻戦メンバー一覧");

    // クラスセレクタで要素を選択し、CSSを変更する
    $(".member").css("background-color", "#fff3cd");

    // タグセレクタで要素を選択し、すべての <li> を取得する
    $("li").css("color", "#333");

    // 複数セレクタ（カンマ区切り）で複数の要素を同時に選択する
    $("h1, h2, h3").css("font-weight", "bold");

    // HTML文字列から新しい要素を生成し、#container に追加する
    var $newDiv = $("<div class='member-card'>虎杖悠仁</div>");
    $("#container").append($newDiv);

    // クリックイベントを登録する
    $("#btn").on("click", function() {
        $(this).text("クリックされました");
    });

    // ネイティブのDOM要素をjQueryオブジェクトに変換して操作する
    var nativeElem = document.getElementById("fushiguro");
    $(nativeElem).addClass("active");

    // 属性セレクタで特定の属性を持つ要素を選択する
    $("input[type='text']").val("呪術師");

    // 擬似クラスセレクタで最初の .member 要素だけを選択する
    $(".member:first").css("border", "2px solid #e74c3c");

});

セレクタの種類

よく使うセレクタの一覧です。CSSセレクタとほぼ同じ構文が使えます。

セレクタ	例	説明
IDセレクタ	`$("#itadori")`	id="itadori" の要素を選択します。
クラスセレクタ	`$(".member")`	class="member" を持つ要素をすべて選択します。
タグセレクタ	`$("p")`	すべての `<p>` 要素を選択します。
複数セレクタ	`$("h1, h2")`	カンマ区切りで複数の要素を同時に選択します。
属性セレクタ	`$("[type='text']")`	特定の属性値を持つ要素を選択します。
子孫セレクタ	`$("#panel p")`	#panel 内のすべての `<p>` を選択します。
直接の子要素	`$("#list > li")`	#list の直接の子要素の `<li>` を選択します。
擬似クラス	`$("li:first")`	最初の `<li>` を選択します。
フォーム擬似クラス	`$(":checked")`	チェックされた入力要素を選択します。

jQueryオブジェクトとメソッドチェーン

$() が返すjQueryオブジェクトは複数のDOM要素をラップしたコレクションです。jQueryのほとんどのメソッドは戻り値としてjQueryオブジェクト自身を返すため、ドット（.）でつなぎながら複数の操作を一度に記述できます。これをメソッドチェーンと呼びます。

$(function() {

    // メソッドチェーンで複数の操作を連続して実行する
    $("#nanami")
        .addClass("active")
        .css("color", "#2c3e50")
        .text("七海建人")
        .fadeIn(300);

    // セレクタが空のjQueryオブジェクトを返す場合もエラーにならない
    // マッチする要素がなければ空のコレクションとして扱われる
    var $notExist = $("#doesNotExist");
    console.log($notExist.length); // 0
    $notExist.text("エラーにならない"); // 何も起きない

});

DOM準備完了イベント

$(function() { ... }) は $(document).ready(function() { ... }) の省略形です。DOMの構築が完了した時点で実行されます。画像などの外部リソースの読み込みを待つ window.onload より早く実行されます。

// DOMの準備完了後に実行する（省略形）
$(function() {
    console.log("DOMの準備ができました");
});

// 上記と同じ意味の長い書き方
$(document).ready(function() {
    console.log("DOMの準備ができました");
});

概要

『$()』はjQueryライブラリのエントリーポイントとなる関数です。引数に渡すものによって動作が異なり、文字列を渡した場合はCSSセレクタとして解釈してDOM要素を選択します。HTMLタグを含む文字列（例：『$("<div>")』）を渡した場合は新しい要素を生成します。また、関数を渡した場合はDOMの準備完了イベントのハンドラとして登録します。

『$()』が返すjQueryオブジェクトは、選択された要素のコレクションです。複数の要素が選択された場合でも、メソッドチェーンで一括操作できます。例えば『$(".member").hide()』は、クラス『member』を持つすべての要素を一度に非表示にします。

『$()』は『jQuery()』の省略形です。他のライブラリと競合する場合は『$.noConflict()』を使って『$』の占有を解除し、代わりに『jQuery()』を使うことができます。

関連ページ：.on()（イベント登録）、.ready()（DOM準備完了）

よくあるミス1: DOM準備前に jQuery コードを実行してしまう

jQueryのコードは通常、HTMLドキュメントのDOMが構築された後に実行する必要があります。$(function() { ... }) でラップせずにスクリプトを書くと、対象の要素がまだ存在しない状態でセレクタが実行されて空のjQueryオブジェクトが返り、意図した操作が行われません。

NG: $(function(){}) でラップせずに直接書いている（script タグが head 内にある場合）

// head 内に書いた場合、#itadori がまだ存在しないためセレクタが空になる
$("#itadori").text("虎杖悠仁");

OK: $(function(){}) でラップしてDOMの準備完了後に実行する

$(function() {
    $("#itadori").text("虎杖悠仁");
});

なお、script タグを <body> の閉じタグ直前に置けば、DOMが構築された後に実行されるため $(function(){}) なしでも動作します。ただし、$(function(){}) でラップする書き方の方が意図が明確です。

よくあるミス2: $ が他ライブラリと競合する

Prototype.jsなど、$ を使う他のJavaScriptライブラリと同時に読み込むと、$ の定義が上書きされて競合します。$.noConflict() を呼ぶと、jQueryが $ の占有を解除し、元の $ が復元されます。その後は jQuery という名前でアクセスできます。

NG: $ が競合している状態で使っている

// 他ライブラリが $ を使っている場合、jQuery の $ が上書きされている可能性がある
$("#gojo").text("五条悟");

OK: $.noConflict() で競合を解除して jQuery を使う

var jq = $.noConflict();
jq(function() {
    jq("#gojo").text("五条悟");
});

よくあるミス3: セレクタのタイポで空のjQueryオブジェクトが返り、エラーにならずバグが潜む

セレクタにタイポがあってもjQueryはエラーをスローしません。マッチする要素がない場合は空のjQueryオブジェクトが返り、後続のメソッド呼び出しも静かに無視されます。この挙動により、バグが検出されにくくなることがあります。

NG: セレクタをタイポしているが、エラーが出ないため気づかない

// "itadori" ではなく "itadri" とタイポしている
// エラーにならず、何も起きない
$("#itadri").text("虎杖悠仁");

OK: length プロパティで要素が見つかったか確認する

var $el = $("#itadori");
if ($el.length === 0) {
    console.warn("要素が見つかりませんでした: #itadori");
} else {
    $el.text("虎杖悠仁");
}

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

jQuery辞典