jQuery入門道場 jQueryの使い方

1章　jQueryとは？

DOM要素の生成

$ 又はjQueryの基本的な使い方で見たDOM要素の生成機能を見ていきます。とは言え、便宜上この場所に載せていますが、まだ説明していないjQueryのメソッドが出てきますので、一通り読み終えてから、再度このページに戻って来た方が分かりやすいでしょう。

DOM要素の生成

「jQueryの基本」で、DOM要素の生成の説明で、次のようなサンプルを見ました。

jQuery(function ($) {
  $("<li>三郎</li>").appendTo("#family");
});

「HTMLのタグの文字列」は、セレクターと間違われないようタグから開始します。そうすることで、DOM要素を生成することができます。そして、その生成されたDOM要素を選択しているjQueryオブジェクトが返されます。 しかし、実際の所、生成されるだけでどこかに自動で挿入される訳ではありません。まだ、宙ぶらりんな状態です。その為、appendToなどのメソッドを使って、どこかに入れ込んであげます。

上記のようにHTMLの中身を含めることもできますが、下記のように単純にタグだけの指定もできます。

jQuery(function ($) {
  // 下記の書き方、どれでも可能
  $("<a>")
  $("<a></a>")
  $("<img>")
  $("<img />")
 
  // しかし本家サイトでは、互換性の為、中身を取るタグについては、
  // 終了タグを付けることを推奨している。
  // 中身を取らないタグはどちらでも、OKとしている。
  $("<a></a>")
  $("<img>")
  $("<img />")
});

$("html", attributes )

Ver.1.4からは、第2引数にオブジェクトを指定すると、そのオブジェクトのプロパティは、HTMLの属性として設定されます。

jQuery(function ($) {
  $("<a></a>", {
    href: "abc.html",
    target: "_blank",
    "class": "myClass"
  });
});

上記を見ると、classのキーだけは、クォーテーションで囲まれていますが、これはclassがJavaScriptの予約後の為、このようにする必要があります。 第2引数を指定するときは、第1引数は、属性など書かれていないシンプルなタグに留めないと行けません。欲張って次のような書き方をすることはできません。

jQuery(function ($) {
  $("<a href='bar.html'></a>", {
    target: "_blank"
  });
});

また、Ver.1.4からは、属性のみに限らず、各種イベントタイプやval, css, html, text, data, width, height, offsetなどのjQueryメソッドをオブジェクトに含めることができます。 更に言えば、Ver.1.8からは、あらゆるjQueryメソッドを指定することができます。

jQuery(function ($) {
  $("<div></div>", {
    width: 100,
    height: 100,
    css: {border: "5px solid gray"},
    addClass: "my-div",
    on: {
      click: function(event) {
        // イベント設定
      }
    }
  });
});

もっとも、あまり派手にやると訳が分からなくなりますので、第2引数の使用はある程度限定して、イベントの付与などは、別途生成したjQueryオブジェクトに対して行えば良いでしょう。