JavaScript中級者への道!jQueryをそこはかとなく知るの巻

JavaScript
JavaScript

この3月をJavaScript強化月間としていろいろ学習しています。
今回はまだまだ現役なjQueryを学んでいきます。

こちらのJavaScriptロードマップも併せてご覧ください。

目指せ中級!JavaScript学習ロードマップ(非webエンジニア向け)
当ブログの筆者のinashunです。 私はJavaをメインの技術としてお仕事をしているのですが、最近お仕事でJavaScriptを扱う機会が増えてきました。 これまでも扱う機会は多々あったのですが、すべて「既存ソースの改修」か「実装...

jQueryとは

jQueryは、ウェブブラウザで動作するJavaScriptのコードを簡単に記述できるようにしたライブラリです。
write less, do more」(少ない記述で、もっと多くのことをする) というキャッチコピーを掲げており、この文はロゴにも掲載されています。このキャッチコピーの通り、短くて簡潔な記述で多くの処理ができるように設計されているライブラリなので、覚えることは多くなく、なおかつ多くのことができるようになっています。

簡単に扱えて便利であることから、一時期はJavaScriptライブラリのデファクトスタンダードとも呼ばれるほど広く知れ渡り利用されてきました。現在でも、jQueryが使用されているシステムやプラットフォーム、ライブラリなどは数多く存在します。

jQueryを利用することの利点は多くありますが、まとめるならば下記の4つのポイントになります。

  1. ブラウザごとの挙動の違いを吸収してくれる⇒ブラウザを意識せずコーディングできる
  2. DOM操作とイベント処理を簡潔に記述できる
  3. アニメーション処理を簡潔に記述できる
  4. Ajax処理を簡潔に記述できる

今回の記事では、この利点の中でも2DOM操作とイベント処理に的を絞って解説していきます。
1は「へ~そうなんだ」くらいに思っておいてもらえればいいです。3は素敵な機能なのですがアニメーションをこだわるというのは少し基礎から外れるかなということでこの記事では除外します。4のAjaxについては、とても重要な要素ですしjQueryのみで語りたくない部分なので、別の記事でまとめようと思います。

ではでは、jQueryを頑張って勉強していきましょう~

jQueryの読み込み方

jQueryはライブラリであり、1つのJSファイルを読み込まなければ動作しません。jQueryのあれこれを学ぶ前に、まずは読み込み方を学んでjQueryが動作する環境を整えてしまいましょう!

2つのパターンを紹介します。1つはインターネット上で公開されているjQueryファイルを読み込む方法、もう一つはjQueryファイルをダウンロードして読み込む方法です。それぞれ簡単に紹介していきます。

CDNで読み込む方法

CDNとはコンテンツデリバリネットワークの略で、インターネットで素早くコンテンツを提供できるように最適化されたネットワークのことです。簡単に「インターネットからのダウンロードが早くて確実になる仕組み」と覚えておいてください。

これを利用することで、手元にjQueryファイルがない状態でも簡単に動作環境を作ることができます。
今回の例ではGoogleの提供するCDNからダウンロードしてきましょう。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
    $("p").click(() => {
        console.log("click PPPPPPP!!");
    });
</script>

HTMLファイル内にscriptタグを利用してダウンロードする一文を記載します。src属性にjQueryファイルのダウンロードURLを記載することで、ページの読み込み時にjQueryファイルをダウンロードしてきてくれます。

  • ダウンロード定義の下のscriptタグの中でjQueryを利用してソースを書いていますが、これをダウンロード定義の上に書いてしまうと、まだjQueryを読み込んでいない状態でそのソースが動いてしまうので実行時にエラーとなってしまいます。必ず①jQuery読み込み⇒②jQueryを利用したソース読み込む の順になるようにしてください。

HTMLファイルでなく、JSファイルにjQueryを利用したソースを記述する場合も、HTMLファイルを経由してjQueryを読み込みます。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../resources/js/sample.js"></script>

このように、順番は①jQuery読み込み⇒②jQuery利用ソース読み込み の順であれば、sample.js内のjQueryを利用したソースも正常に動きます。

  • この例ではGoogleのCDNではなく、本家jQueryのCDNを利用しています。Googleの方が早いみたいですが。。他にもMicrosoftのCDNも速度は速いみたいです。<http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js>
  • ライブラリの読み込み、ソースの読み込みのどちらにもかかわらず、HTMLでJavaScriptを読み込む際は必ずHTML内の一番後ろの方にscriptタグを書きましょう。ページの各要素がDOMとして読み込まれる前にJavaScriptが動作してしまうとDOM操作が正しく行われないためです。筆者はbodyの閉じタグの後ろに書くようにしています。

ライブラリをダウンロードして読み込む方法

CDNを利用した読み込みはタグを書くだけなので楽なのですが、まず前提として動作時にインターネットにつながっていなければいけないという条件があります。いくらCDNが高速でコンテンツを持ってきてくれるといっても、それを受け取るクライアント側が残念なネットワーク回線を利用していては読み込みに時間がかかってしまい遅延につながります。閉じられたネットワーク内で動作するシステムで利用したい場合もあるでしょう。
そのような状況ではライブラリをダウンロードして、それを配置して読み込む方法をとる必要があります。

ライブラリのダウンロードは、jQueryの公式サイトから行うことができます。

赤枠のリンクを右クリックして「名前を付けてリンク先を保存…」を押下します。任意の場所を指定してファイルを保存してください。ファイル名はそのままで構わないです。
Download the compressed, production jQuery 3.6.0」を選択すると、jQueryのminファイル(読み込み速度を早くするためにコメントや空白や改行などの動作と関係ない文字を削除したファイル)が保存されます。特にこだわりのない場合はこちらで構わないでしょう。
Download the uncompressed, development jQuery 3.6.0」を選択すると、人が読めるようにフォーマットされた通常状態のjQueryファイルが保存されます。

あとは、この保存したjQueryファイルを適当なフォルダに配置して、それをscriptタグで読み込めば完了です。

<script type="text/javascript" src="../resources/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../resources/js/sample.js"></script>

このときも、①jQuery読み込み⇒②jQuery利用ソースの読み込み の順番を守るようにしてくださいね!

jQueryの基礎知識

jQueryが利用できる環境が整ったので、いよいよ本格的にjQueryについて知っていきましょう!

jQueryのソースを読み書きして理解していくにあたって、まず初めに覚えなければいけない重要な基礎知識が一つあります。まず初めにそれをご紹介しますね。
覚えなければいけないもの、それは $⇐こいつです!
この記号こそが、jQueryが便利である理由であり、一方で理解しづらく魔法のライブラリに見える元凶でもあります。まず最初にこの記号の意味をしっかりと理解することで、その後のjQueryの学習を楽にしちゃいましょう!

$⇐これなぁに?

結論から言うと$はjQueryで最も重要な関数です!この関数を使用することで、jQueryでのDOM操作に利用するjQueryオブジェクトを簡単に取得することができます。
実はこの関数は、本名はjQuery()という関数です。$はこの関数のただの別名でしかありません。

const $Obj = $("p");
const jqObj = jQuery("p");

この書き方であればpタグのDOM要素のjQueryオブジェクトを取得できます。$jQueryどちらの書き方でも取得できるオブジェクトは同じとなります。だって結局同じ関数なのですから。

この関数は、引数の値によってさまざまな働きをします。その内容については次以降の項にて解説していきます。

jQueryというライブラリは、このjQuery関数と、それによって取得されるjQueryオブジェクト、jQueryオブジェクトが持つプロパティやメソッドが機能の中心となっています。
中でも特にjQuery関数は使用頻度が高いです。というかこれを使わないのであればjQueryを使う意味がないというレベル。
そのくらい頻繁に使用されるので、「毎回jQueryって書くの面倒だよね~、じゃあ別名で$つけちゃうか」ということでこのような書き方になりました。

  • ちなみに、JavaScriptとして$マークは特段意味を持つ記号ではありません。ですので、自分で命名する変数名などに$マークを含めることも可能です。裏を返せば、変数名が被ることに注意する必要があるということです。そのため、他のライブラリなどと併用する場合は、$ではなくjQueryの方を使ってjQuery関数を使用することが勧められています。暗黙的な了解で$=jQueryのものだから使用を避ける、みたいになっている気がするので構わない気もしますが。。。

$マークが暗号に見える理由

これは個人的な感覚なのだと思うのですが、jQueryの$マークがどうしても「魔法の文字」に見えて、jQueryって全然JavaScriptとは別の言語なんだなと思ってしまいます。最も使用頻度の高い文字が魔法に見えたら、ちょっととっつきにくい感じがしてしまいますよね。
感覚的な部分なのですが、この理由を探って言語化してみました。

jQueryの$は関数です。ですので、このような書き方には納得できます。

const $p = $("p");

このような書き方も、取得したjQueryオブジェクトのメソッドを呼び出して連鎖させているんだな、と納得できます。(メソッドチェーンと呼ばれています)

$("p").addClass("green");

続いては、、、

$.ajax({
    // ??????
});

ちょっと待ってくれ!$って関数じゃなかったの?!

関数のはずなのにオブジェクトのようにメソッドを持っているような書き方です。JavaScriptってそんなことできるんだっけ?

それができちゃうのです!JavaScriptでは関数も1つのオブジェクトであるので、メソッドを持つことができます。
これらはユーティリティ関数と呼ばれ、ajax()メソッドなど多くの便利なメソッドが集まっています。

JavaScriptの関数はオブジェクト、ということ自体は基礎的な知識ではあるのですが、ぶっちゃけあまり直感的ではないですよね。違和感を感じやすい部分だと思います。しかもそこに$という最初は暗号にしか見えない記号がでてきて、脳内が大混乱しちゃいます。
ちゃんと順を追って理解すれば大したことはないと気付けると思います。$はjQueryで最も重要なグローバルの関数オブジェクト、それ自体がDOM操作のための関数だし、プロパティとしていろいろな便利なメソッドを持っている、ということを理解していただければ、あとはその中身を覚えればすぐに使いこなせるようになります。簡単ですね!

このことが理解出来たら、いよいよjQueryでDOM操作をしていきましょう!

jQueryでDOM操作

DOM要素の取得

まずはDOM要素の取得からです。先ほど紹介した$関数を使用していきます。

<h1>タグがH1です</h1>
<p id="foo">idがfooです</p>
<p class="bar">classがbarです</p>
<p name="baz">nameがbazです</p>
const $h1 = $("h1");            // タグを指定するときはそのままタグ名
const $foo = $("#foo");         // idを指定するときは{#id}
const $bar = $(".bar");         // classを指定するときは{.class}
const $baz = $("[name='baz']"); // 任意の属性を指定するときは{[属性=値]}

上記の例のように、$関数の引数にCSSセレクタを使用することで該当するDOM要素のjQueryオブジェクトを取得することができます。

通常のJavaScriptではquerySelector()メソッドまたはquerySelectorAll()メソッドを使用することで、同様にCSSセレクタからDOM要素を取得することができます。CSSセレクタの書き方の詳細などはこれについて紹介した記事に書いていますので、そちらもご参照ください。
JavaScript中級者への道!DOMを操作するの巻
3月は個人的にJavaScript集中強化月間としてお勉強していきます。 今回はJavaScriptでHTMLのDOM操作をする方法をまとめていきます。 こちらのJavaScriptロードマップも併せてご覧ください。 DO...

jQueryオブジェクト

$関数を使用することで得られるjQueryオブジェクトについて、その仕組みを簡単に紹介します。

jQueryオブジェクトは、「DOMのノードオブジェクトの配列」+「jQueryが提供するDOM操作用メソッド群」で構成される一つのオブジェクトとなります。

DOMのノードオブジェクトの配列には、$関数で指定したCSSセレクタに該当するDOM要素のノードオブジェクトが含まれています。これら一つ一つは、通常のJavaScriptのノードオブジェクトそのものです。
jQueryオブジェクト⇔ノードオブジェクトは相互に変換することが可能です。(変換というより、取り出したり埋め込んだりするイメージですね)

jQueryオブジェクト⇒ノードオブジェクト

変換するには、jQueryオブジェクトのget()メソッドを利用します。引数に取り出したいノードオブジェクトのインデックス番号(0スタートです)を指定することで取得できます。
また、配列のように[0]のような形式でインデックス番号を指定しても同様の結果が得られます。

const $p = $("p");          // jQueryオブジェクトを取得

const p0 = $p.get(0);       // getメソッドでノードオブジェクトを取得
const p1 = $p[1];           // 配列のように直接インデックス番号の指定も可能

console.log(p0.innerText);  // ノードオブジェクトなのでinnerTextなどが使用可能
console.log(p1.innerText);
  • ちなみに、get()メソッドではなくeq()メソッドを使用すると、ノードオブジェクトではなくjQueryオブジェクトそのままで中の特定のオブジェクトを取得することができます。引数に指定するのは取得したいオブジェクトのインデックス番号で同じです。他にも、find()next()などの子要素を取得するメソッドが複数用意されています。

ノードオブジェクト⇒jQueryオブジェクト

変換するには、$関数の引数にノードオブジェクトを渡します。

const p = document.querySelector("p");     // 通常のノードオブジェクトを取得
const $p = $(p);                           // ノードオブジェクトを渡してjQueryオブジェクトを取得
console.log($p.text());

const ps = document.querySelectorAll("p"); // NodeListの配列も変換可能
const $ps = $(ps);

const children = document.body.children;   // HTMLCollectionも変換可能
const $children = $(children);

ノードオブジェクトの正体であるHTMLElementの配列であるNodeListや、上記の例のchildrengetElementsByTagNameメソッドなどで取得できるHTMLCollectionなどもそのまま変換することができます。

DOM要素の取得・操作

値の取得・操作

text

jQueryオブジェクトのtext()メソッドを使用することで、DOM要素のテキストを取得または操作することができます。

このメソッドを引数なしで使用すると、そのオブジェクトが表すDOM要素のテキストを取得することができます。
このメソッドの引数に文字列を渡すと、そのオブジェクトが表すDOM要素のテキストが、その文字列に置き換わります。
jQueryオブジェクトのメソッドは、このように引数の有無によって取得か操作かの挙動が変化することが多いので、このことを覚えておくと理解しやすいですよ。

というわけで使用例です。

<div id="foo">
    <p id="bar">一つ目のテキストです</p>
    <p id="baz">二つ目のテキストです</p>
</div>
const $bar = $("#bar");
console.log($bar.text());         // 引数なしは要素の取得

const $baz = $("#baz");
$baz.text("三つ目のテキストです");  // 引数ありは要素の書き換え
複数のDOM要素を持つjQueryオブジェクトでtext()メソッドを使用した場合、引数なしであればすべての要素のテキストを連結した文字列が取得されます。引数ありの場合、すべてのDOM要素のテキストが引数の文字列に置き換わります。
また、子要素を持つDOM要素に対して使用すると、引数なしであれば子要素を含めたすべてのテキストを連結した文字列が取得されます。引数ありの場合、その要素自体に文字列が適用され、子要素は上書きされて無くなってしまいます。気をつけて使用しましょう。
html

html()メソッドを使用すると、そのDOM要素の内側のHTMLをタグごと文字列として取得できます。引数にタグを含めた文字列を指定すると、そのDOM要素の子要素としてタグが認識されて設定されます。
ノードオブジェクトのinnerHTMLと同様の働きをします。

const $foo = $("#foo");

console.log($foo.html());      // タグごと取得
$foo.html("<p>これこそが<strong>HTML</strong>なのです!!</p>");  // タグごと設定

text()と同様に、引数を指定するとその文字列の内容で中のHTMLを完全に上書きしてしまいます。
既存の状態に付け加えたい場合は、before()prepend()append()after()といった要素を追加するメソッドを使用してください。

複数のDOM要素を持つjQueryオブジェクトでは、text()html()で挙動が変わります。
引数なしの場合、text()ではすべての要素のテキストを合体させた文字列を出力しましたが、html()の場合はjQueryオブジェクトの先頭のDOM要素のHTMLコンテンツのみを取得します。
引数ありの場合は両方とも同様の挙動になります。jQueryオブジェクトに含まれるすべてのDOM要素の内容が、引数で指定されたコンテンツに置き換わります。

見た目の操作

css

css()メソッドを使用することで、そのDOM要素のスタイルを直接編集できます。
1つ目の引数には操作するスタイルのプロパティ名を指定します。2つ目の引数を指定しない場合は、そのプロパティの値が取得されます。2つ目のプロパティを指定した場合は、プロパティはその値に置き換えられます。

const $bar = $("#bar");
$bar.css("color", "#00ff00");
console.log($bar.css("color"));
class

ページのスタイルは、classの付与によって決定されることがほとんどかと思います。jQueryオブジェクトにも、いくつかのclass操作メソッドが用意されています。

まずはhasClass()メソッドです。引数に指定したclassがそのDOM要素に付与されているかどうかを判定します。

<p id="bar" class="border red">一つ目のテキストです</p>
<p id="baz" class="border blue">二つ目のテキストです</p>
console.log($bar.hasClass("red"));    // true
console.log($baz.hasClass("red"));    // false

続いて、addClass()removeClass()メソッドです。それぞれ引数で指定したclassの付与と削除ができます。

const $bar = $("#bar");

$bar.removeClass("red");
$bar.addClass("green");

最後はtoggleClass()です。引数で指定されたclassがあれば削除し、なければ追加するという処理をします。

$bar.on("click", () => {
    $bar.toggleClass("red");
    $bar.toggleClass("green");
});

class操作の処理は、プレーンのJavaScriptの処理(classListを使用した処理)と仕組みはほぼ同じですね。

属性の取得・操作

attr

attr()メソッドを使用することで、DOM要素の属性の値を取得、変更することができます。
1つ目の引数には属性名を指定します。2つ目の引数を指定しない場合、そのDOM要素の属性の値を取得します。2つ目の引数を指定した場合は、その値で属性の値を上書きします。

<a id="google" href="https://google.co.jp">Googleへ</a>
const $googleLink = $("a");
console.log($googleLink.attr("href"));   // https://google.co.jp
$googleLink.attr("href", "https://yahoo.co.jp");
val

val()メソッドを使用することで、DOM要素のvalue属性の値を取得、変更することができます。
引数を指定しない場合、そのDOM要素のvalue属性の値を取得します。引数を指定した場合は、その値でvalue属性の値を上書きします。

<input type="text">
<button type="button">おしてほしい</button>
<p></p>
$("button").on("click", () => {
    const $input = $("input");
    $("p").text($input.val());    // テキストボックスに入力された値を取得してpタグのテキストにする
    $input.val("おつかれさん!");   // テキストボックスの値を書き換え
});

このように、入力フォームの値はvalue属性に設定されるので、そのような値を取得するときなどに便利です。

jQueryでイベント処理

続いてはイベント発生時の処理を定義する方法をご紹介します。

各イベントごとのメソッド

jQueryではブラウザ上で発生するイベントごとにメソッドが用意されています。click()keydown()scroll()など多くのメソッドが用意されています。
これらのメソッドのほとんどは、共通して引数にコールバック関数を渡すことでイベント処理を設定することができます。また、引数なしで呼び出した場合はそのイベントを引き起こします。

例としてclick()メソッドの使い方を紹介します。

$("button").click(() => {
    $("input").val("クリックしたね!");
});
$("button").click();

引数にコールバック関数を指定した場合、その要素のクリック時にこのコールバック関数が実行されます。
引数を指定せずに呼び出した場合、その要素をクリックします。

onメソッド

on()メソッドは、引数にイベント名とイベントハンドラーを渡すことで使用できます。各イベントごとのメソッドを使用してイベントを定義することの弱点を補うようにして後から誕生したメソッドです。もちろん、できる仕事も増えていますので、基本的にはこちらのon()メソッドを使用することを推奨します。

$("button").on("click", () => {
    const $input = $("input");
    $("p").text($input.val());
    $input.val("おつかれさん!");
});

1つ目の引数にイベント名を、2つ目の引数にイベント発生時の処理をコールバック関数で指定します。
上記の例の場合はボタンがクリックされたら処理が実行されることになります。

1つ目の引数のイベント名は複数指定することが可能です。例えば"click focus"のようにすると、クリック時とフォーカスイン時の両方で同じイベントを走らせることができます。このとき、イベント名の間は半角スペース1文字でつなぎます。

他にも、「複数のイベントハンドラを一気に定義する」「イベントハンドラに任意のデータを渡す」「off()メソッドによってイベントの定義を解除する」「子要素にイベントをデリゲートする」といったことがon()メソッドではできます。

jQueryでDOM要素の作成と追加

DOM要素を新規に作成したい場合は、$関数の引数に作りたい要素のタグを直接記述します。

const $form = $("<form />");

また、2つ目の引数に属性の値を設定したオブジェクトを指定することもできます。
作成したDOM要素は、DOMツリー上に追加することで画面に表示されるようになります。すでにDOMツリー上にある別の要素を使用して追加します。
例えば、以下のappend()メソッドは、自身の子要素の末尾に引数で指定されたDOM要素を追加します。

$("body").append($form);

自身の子要素としてDOM要素を追加する場合、prepend()メソッドで子要素の先頭に、append()メソッドで子要素の末尾に追加します。
自身の兄弟要素として追加する場合、before()メソッドで一つ前に、after()メソッドで一つ後ろに要素を追加できます。

jQueryのthis

主にイベントのコールバック関数などで、thisを使用することができます。何を指しているのかが理解できれば使いやすくなるので、ぜひ覚えてください。

<p>おはよう</p>
<p>こんにちは</p>
<p>こんばんは</p>
$("p").on("click", function() {
    $(this).css("color", "red");
});

上記の例では、すべてのpタグの要素に「クリックされたら赤くなる」というイベントを仕込んでいます。その中で$(this)が使われています。これは「クリックイベントが発生したpタグ」を指すことになります。「こんにちは」が押下された場合、$(this)は2つ目のpタグのみの要素に置き換わり、「こんにちは」の文字だけが赤くなります。
これをもし$("p")としていたなら、おはようもこんばんはも、すべての文字が赤くなってしまいます。

上記はfunction()でコールバック関数を宣言した場合です。アロー関数を使用した場合、$(this)では意図した動作にはなりません。元々のthisキーワードの扱いが変わるためです。
アロー関数で上記と同様の処理を行うにはこのように記述します。

$("p").on("click", (event) => {
    $(event.currentTarget).css("color", "red");
});

コールバック関数の引数としてeventを受け取り、その中のcurrentTargetプロパティを$関数に渡してオブジェクトを作成します。少しだけ記述が長くなってしまいますが、同等の操作を実現できるので活用していきましょう!

まとめ

  • jQueryの$は最も大事な関数オブジェクト、これを使用してDOM要素を取得しよう
  • $オブジェクトのプロパティには便利なメソッドが備わっているので活用しよう
  • DOM要素は$("CSSセレクタ")で取得しよう、取得できるのはjQueryオブジェクトになるよ
  • jQueryオブジェクトの様々なメソッドを使用してDOM要素を操作しよう
  • on()メソッドを使用してイベントを定義しよう
  • (古いバージョンのものが多いが)日本語のリファレンスサイトが多くあるので、「jquery リファレンス」と検索してみよう

jQueryはもともと、記述が冗長で使いづらかったJavaScriptの弱点を補うライブラリとして作成されました。
そのきっかけとなった状況からはもう15年ほど経っています。その間にバニラのJavaScriptも大きく進化し、今ではjQueryと同等の扱いやすさで処理を記述できるようになっています。当時は大きな課題だったブラウザごとの挙動の差分も今ではほとんどありません。(IE?知らんわそんなもん)

これから新規でシステムを開発する場合に、jQueryを採用するという選択肢はほぼないのではないかと思います。バニラのJavaScript(特にES6以降)をメインに携え、ユースケースによってVue等のフレームワークを採用するような選択肢が基本になるかと。

ただ一方で、既存のシステムの中には、今でも至る所にjQueryの存在があります。これらがその姿を消すまでにはあと10年以上はかかるのではないかと思っています。クライアント側の処理のすべてを担うような存在ですので、jQueryだけを置き換えるというようなリプレイスはないでしょう。であれば、今jQueryが使われているシステムが寿命を迎えるまで、それを保守するエンジニアもjQueryに添い遂げなければならないということです。

なので、jQueryを今更覚える価値はある?と聞かれたら「ある」と答えてもいいかなと思います。といっても、プレーンのJavaScriptの基礎を身に付けておけばjQueryの学習コストはあまり高くないので、まずはバニラのJavaScriptで基礎をしっかり固めてから、そこはかとなくjQueryを勉強しておく、くらいがいいかもしれないですね。

参考

jQuery公式 (英語)
jQuery リファレンス

コメント

タイトルとURLをコピーしました