jQuery逆引きレファレンス、属性＆コンテンツ編(@ITより)

@IT連載：jQuery逆引きリファレンスの第二回のテーマは属性＆コンテンツです。

目次は以下になります。

* 属性値を取得するには？

* 属性値を設定するには？

* 複数の属性値をまとめて設定するには？

* 関数の結果によって動的に属性値を設定するには？

* 属性値を削除するには？

* スタイル・クラスを追加／削除するには？

* スタイル・クラスが適用されているかを判定するには？

* スタイル・クラスの適用／解除を交互に行うには？

* 要素に適用されたスタイル情報を取得するには？

* 要素に特定のスタイルを適用するには？

* 複数のスタイル・プロパティをまとめて設定するには？

* 要素の表示位置を取得するには？

* ページのスクロール位置を取得／設定するには？

* 要素の高さや幅を取得するには？

* 要素の高さや幅を設定するには？

* 要素のテキストを取得するには？

* 要素のテキストを設定するには？

* フォーム要素の値を取得／設定するには？

勉強メモ

text()とhtml()の違い

（1）取得する対象

　要素セット（jQueryオブジェクト）が複数の要素を含んでいる場合、htmlメソッドは先頭要素の内容だけを取得しますが、textメソッドはすべての要素の内容を結合したものを取得します。

（2）取得する内容

　名前のとおり、htmlメソッドは要素の内容をHTML文字列として取得しますが、textメソッドは純粋なテキストだけを取得します。

（3）対応する形式

　textメソッドはHTML／XMLいずれの形式でも動作しますが、htmlメソッドはHTML（XHTMLを含む）形式でしか動作しません。このサンプルでは扱っていませんが、textメソッドをXML形式で利用する方法については、あらためてAjax編で紹介する予定です。

http://www.atmarkit.co.jp/fdotnet/jqueryref/02attribute/attribute_16.html

height(val)、width(val)

引数valには数値、もしくは「em」や「%」などの単位付きの数値を指定できます（単なる数値の場合はピクセル値として認識します）。

要素の高さや幅を取得するには？

－ height()、width()、innerHeight()、innerWidth()、outerHeight()、outerWidth()

関数	padding	border-width	margin
height、width	x	x	x
innerHeight、innerWidth	o	x	x
outerHeight、outerWidth	o	o	x
outerHeight、outerWidth（true	o	o	o

関数の結果によって動的に属性値を設定するには？

－ attr(name, fnc) －

コールバック関数の戻り値を用いて設定。

```javascript $(function() { $('li > img').attr( 'src', function(index) { return "http://www.wings.msn.to/books/" + this.id + "/" + this.id + "_logo.jpg"; }); }); ```