第2回 属性＆コンテンツ編：連載：jQuery逆引きリファレンス（4/19 ページ）

要素セットに含まれる要素本体や属性、スタイルを取得／設定するためのメソッドについてまとめた、すぐに役立つ18本を一挙公開。

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　複数の属性をまとめて設定したい場合には、attr(props)メソッドを使うと便利です。attr(props)メソッドは、属性値を「属性名： 値」のハッシュ形式（＝ディクショナリ形式）で指定できます。

　属性値を設定するメソッドとしては、attr(name, value)メソッドもありますが、こちらは一度の呼び出しで1つの属性しか設定できず、たくさんの属性をまとめて設定しようとすると、コードも冗長になりがちです。複数の属性を設定するには、できるだけattr(props)メソッドを利用するようにしてください。

　以下は、新たな<img>要素を生成して、それを<div id="logo">要素の配下に追加する例です。<img>要素には、src、width、height、alt属性を設定します。

<style type="text/css">

.logo { border: solid 1px Red; }

</style>

<script type="text/javascript">

$(function() {
  $('<img />').attr({
      src : 'http://www.wings.msn.to/books/978-4-7980-2401-1/978-4-7980-2401-1_logo.jpg',
      width : 81,
      height : 30,
      alt : 'ASP.NET MVC実践プログラミング',
      className : 'logo'
    }).appendTo('#logo');
});

</script>

……中略……

<div id="logo"></div>

リスト030 新たな<img>要素を作成＆追加（AttrSets.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト030の実行結果

　Attr(props)メソッドでclass属性を指定する場合には、属性名は「class」ではなく「className」で指定しなければならない点に要注意です（「class」はInternet Explorerでは予約語と見なされてしまうためです）。代わりに、addClassメソッドを使っても構いません。