Dreamweaverを使ったjQuery入門
前編　～jQueryの概要とコーディングルール解説

原題：jQuery入門 with Dreamweaver CS5.5　前編

jQueryのコーディングの基本

　次に、jQueryのコーディングに関する基本を押さえておきましょう。jQueryをインストールするのは簡単です。script要素を使用して、jQueryのソースコードを読み込むだけです。最もシンプルな方法は、以下のコードをHTMLに含めることです。

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

　これにより、http://code.jquery.comからJavaScriptファイルがダウンロードされ、ユーザーのブラウザ上でjQueryが動作するようになります。また、上記のコードでsrc属性に指定しているURLからファイルをダウンロードして、自分のサーバでホスティングすることも可能です。インストールが完了すると、以下の2つの関数を使用できるようになります。

jQuery()
$()

　これらは全く同じ意味を示す関数ですが、コードを短く書けるので、通常は「$()」が用いられます。この関数の引数には、window／document／DOM要素／文字列など、様々なものを指定することができます。

// windowオブジェクトを「jQuery化」する
var $win = $(window);

// documentオブジェクト
var $doc = $(document);

// DOM要素（ここではbody要素）
var $body = $(document.body);

　また、引数にCSSセレクタの文字列を指定することもできます。これがjQueryの非常に強力な特徴の1つで、操作対象となるDOM要素の範囲・種類を自由自在に指定することができます。

// ページ内のdiv要素を全て取得
var divs = $('div');

// id属性を指定
var logoImg = $('#logoImg');

// 複雑なCSSセレクタもOK
var checkboxes =
  $('table.list > tbody > tr:odd > td:nth-child(1) input[type=checkbox]');

　$()にこうした様々な種類のオブジェクトを“放り込む"と、元のオブジェクトを“強化"した「jQueryオブジェクト」が返ってます。このjQueryオブジェクトは、元のオブジェクトにはない様々な機能を持っており、それらを使用することでWebページを動的に変更させることができるわけです。

　例えば以下のように、1つまたは複数の要素を内包したjQueryオブジェクトに対し、様々なメソッドを用いて要素の属性やスタイルを変更することができます。

// alt属性を持たないimg要素に赤いボーダーを表示する
$('img:not([alt])').css('border', '1px solid red');

// alt属性を持たないが、title属性を持つimg要素に対し、
// titleの値をaltにコピーする
// each()は、jQueryオブジェクト内の要素を1件ずつ処理する仕組み
$('img:not([alt])[title]').each(function() {
  var img = $(this);
  // alt属性にtitle属性の値を代入
  var title = img.attr('title');
  img.attr('alt', title);
});

　css()やattr()はメソッドといい、要素の状態を変更するためのものです。これらのメソッドでは、「css('borderWidth', '2px')」のように引数を2つ与えると「値を変更する」ことができ、「attr('title')」のように引数を1つだけ与えると「値を取得する」ことができます。

　jQueryのコーディングに関する基本的な解説は以上です。それでは、具体的なサンプルコードを参照しながら、これらの基礎知識を身につけていきましょう。