属性を操作しよう！
さて、いよいよ「ダイナミックHTML」や「リッチクライアント」っぽいことをやっていきます。
いわゆる「初期表示」の状態から変化させていきます。今回は属性をいじくってみましょう。
属性を操作するにはattr関数を使います。attrはattribute、つまり属性の略です。大きく分けて2つの使い方があります。
1つ目の使い方は属性値の参照です。引数を1つ、属性名をattr関数に渡すと、属性値が返ってきます。
2つ目の使い方は属性の設定です。引数を2つ、属性名と属性値を渡すと属性が設定されます。
実際に動かしてコードを見たほうが分かりやすいでしょう。「1_8.html」のソースを見てみましょう。
いわゆる「初期表示」の状態から変化させていきます。今回は属性をいじくってみましょう。
属性を操作するにはattr関数を使います。attrはattribute、つまり属性の略です。大きく分けて2つの使い方があります。
1つ目の使い方は属性値の参照です。引数を1つ、属性名をattr関数に渡すと、属性値が返ってきます。
2つ目の使い方は属性の設定です。引数を2つ、属性名と属性値を渡すと属性が設定されます。
実際に動かしてコードを見たほうが分かりやすいでしょう。「1_8.html」のソースを見てみましょう。
$(function() {
$("a").click(function() {
// href属性の値を取得してコンソールに出力
console.log($(this).attr("href"));
// href属性の値を"#dummy"に変更
$(this).attr("href", "#dummy");
// href属性の値を取得してコンソールに出力
console.log($(this).attr("href"));
});
});
「$(this)」のhref属性をコンソールに出力して、属性値を「#dummy」に変更、その後もう一度href属性を出力します。
ここで注意して欲しい所が「this」と「$(this)」の違いです。thisはプレーンオブジェクトなので、$objの関数が使えません。
$関数に関数を渡すとreadyイベントに登録、文字列を渡すとセレクターになることは覚えていますか？
$関数に要素を渡すとその要素のjQueryオブジェクトが戻り値として返ってきます。つまり渡した要素の$objを返してくれます。
ここで注意して欲しい所が「this」と「$(this)」の違いです。thisはプレーンオブジェクトなので、$objの関数が使えません。
$関数に関数を渡すとreadyイベントに登録、文字列を渡すとセレクターになることは覚えていますか？
$関数に要素を渡すとその要素のjQueryオブジェクトが戻り値として返ってきます。つまり渡した要素の$objを返してくれます。
さて、ここをクリックしてデベロッパーツールを開きましょう。
まず最初にデベロッパーツールのElementsを開いてhref属性の値が「http://jquery.com/」になっていることを確認しましょう。ここです。
それではリンクをクリックしてみましょう。href属性の値が書き換わり、コンソールに変更前と変更後のhref属性の値が出力されましたね。
アドレスバーにも注目してください。URIの最後が「#dummy」に変わっていますね。
それでは実践です。今度は別の属性を設定してみましょう。「target」属性に「_blank」と言う値を設定してください。
また、href属性と同様に、設定する前後でtarget属性の値をコンソールに出力するようにしましょう。
まず最初にデベロッパーツールのElementsを開いてhref属性の値が「http://jquery.com/」になっていることを確認しましょう。ここです。
それではリンクをクリックしてみましょう。href属性の値が書き換わり、コンソールに変更前と変更後のhref属性の値が出力されましたね。
アドレスバーにも注目してください。URIの最後が「#dummy」に変わっていますね。
それでは実践です。今度は別の属性を設定してみましょう。「target」属性に「_blank」と言う値を設定してください。
また、href属性と同様に、設定する前後でtarget属性の値をコンソールに出力するようにしましょう。
$(function() {
// クリックイベントにアタッチ！
$("a").click(function() {
// href属性の値を取得してコンソールに出力
console.log($(this).attr("href"));
// href属性の値を#dummyに変更
$(this).attr("href", "#dummy");
// href属性の値を取得してコンソールに出力
console.log($(this).attr("href"));
// target属性の値を取得してコンソールに出力
console.log($(this).attr("target"));
// target属性の値を"_blank"に設定
$(this).attr("target", "_blank");
// target属性の値を取得してコンソールに出力
console.log($(this).attr("target"));
});
});
出来ましたか？ここをクリックしてデベロッパーツールを開きましょう。
先ほどのようにElementsを確認してからボタンをクリックしてください。属性が書き換わったことが分かると思います。
コンソールの出力結果も確認しましょう。
target属性が「undefined」（未定義）の状態から「_blank」が設定され、リンク先が新しいウィンドウ（タブ）で開くようになりましたね。
先ほどのようにElementsを確認してからボタンをクリックしてください。属性が書き換わったことが分かると思います。
コンソールの出力結果も確認しましょう。
target属性が「undefined」（未定義）の状態から「_blank」が設定され、リンク先が新しいウィンドウ（タブ）で開くようになりましたね。
attr関数ではこの様に属性を操作できますが、attr関数で操作してはいけない属性があることを覚えておいてください。
まずはstyle属性とclass属性です。この2つはattr関数での操作は可能ですが、CSSが絡むので後述する別の方法を使うようにしましょう。
次にtype属性です。inputやbutton要素にあるtype属性は操作しないでください。エラーになると思ってください。
最後はselectedやchecked、disabled等ですが、これはバージョンにより異なるので詳細は後述します。
いずれにしても、属性を操作する時にはattr関数を使えばいい、という覚え方はしないでください。
大抵の属性操作にはattr関数を使いますが、「あれ？おかしいぞ」と思ったらattr関数以外にも属性操作をする関数があることを思い出してください。
まずはstyle属性とclass属性です。この2つはattr関数での操作は可能ですが、CSSが絡むので後述する別の方法を使うようにしましょう。
次にtype属性です。inputやbutton要素にあるtype属性は操作しないでください。エラーになると思ってください。
最後はselectedやchecked、disabled等ですが、これはバージョンにより異なるので詳細は後述します。
いずれにしても、属性を操作する時にはattr関数を使えばいい、という覚え方はしないでください。
大抵の属性操作にはattr関数を使いますが、「あれ？おかしいぞ」と思ったらattr関数以外にも属性操作をする関数があることを思い出してください。