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入門 with Dreamweaver CS5.5
http://www.adobe.com/jp/devnet/dreamweaver/articles/dwjquery_01.html

カテゴリー: jQuery タグ: , , パーマリンク