.attr(attributeName) の形式は obj の属性値を参照します。

alert($("img#img1").attr("src"));

.attr(attributeName, value) の形式は obj の属性値を設定します。

$("img#img1").attr("src", "image/xxx.gif");

.attr(attributes) の形式は下記の記法で obj の属性値を設定します。

$("img#img1").attr({
    src: "image/xxx.gif",
    width: "100",
    height: "100"
});

.attr(attributeName, function(index, attr)) の形式は関数の戻り値を attributeName属性に設定します。

$("img#img1").attr("height", function(i, val) {
    return val * 2;
});

obj から attributeName で指定した属性を削除します。jQuery 1.7 からは空白で区切った複数の属性を指定できます。

$("#img1").removeAttr("height width");

attr() と似ていますが、attr() がHTMLの属性値を扱うのに対して、prop() は JavaScriptのプロパティを扱います。通常、両者は同じ値となりますが、稀に異なるものがあります。例えば、a要素の href属性は、属性値とプロパティで値が異なることがあります。

val = $("#a1").attr("href");    // #prop
val = $("#a1").prop("href");    // http://www.example.com/jquery.html#prop

<a id="a1" href="#prop">prop()</a>

また、チェックボックスなどの checked属性も属性値とプロパティで値が異なります。

val = $("#c1").attr("checked");    // "checked"
val = $("#c1").prop("checked");    // true

<input type="checkbox" id="c1" checked>

obj から attributeName で指定したプロパティを削除します。

$("#d1").prop("lang", "japan");
$("#d1").removeProp("lang");

html() の形式は、obj の内側のHTML文字列を参照します。

val = $("p#p1").html();             // <p id="p1"><b>BBB</b></p> → <b>BBB</b>

html(htmlString) の形式は、obj の内側のHTML文字列を htmlString に置換します。

$("p#p1").html("<p>BBB</p>");      // <p id="p1"><p>BBB</p></p>

html(function(index, oldhtml)) の形式は、obj の内側のHTML文字列を function の戻り値に置換します。

$("p#p1").html(function(i, val) {
    return "[" + val + "]";        // <p id="p1">BBB</p> → <p id="p1">[BBB]</p>
});

text() の形式は、obj の内側のテキストを参照します。

val = $("p#p1").text();             // <p id="p1"><b>BBB</b></p> → BBB

html(htmlString) の形式は、obj の内側のテキストを htmlString に置換します。

$("p#p1").text("<p>BBB</p>");       // <p id="p1">&lt;p&gt;BBB&lt;/p&gt;</p>

text(function(index, oldhtml)) の形式は、obj の内側のテキストを function の戻り値に置換します。

$("p#p1").text(function(i, val) {
    return "[" + val + "]";        // <p id="p1">BBB</p> → <p id="p1">[BBB]</p>
});

val() の形式はフォーム要素(input, textarea, select等)の値を参照します。

val = $("input#userName").val();

val(value) の形式はフォーム要素の値を設定します。

$("input#userName").val("Tanaka");

val(function(index, value)) の形式はフォーム要素の値に関数の戻り値を設定します。

$("input#userName").val(function(i, val) {
    return val.toUpperCase();
});

radioボタンの値を参照するには :checked を用います。値を設定するには値を配列にします。

val = $("input[name='color1']:checked").val();
$("input[name='color1']").val(["Black"]);

checkboxの値を参照するには :checked と map() を用い、取得した jQuery配列を get() で JavaScript配列に変換します。値を設定するには値を配列にします。

val = $("input[name='color2']:checked").map(function() {
    return $(this).val();
}).get();                          // [ "Black", "White" ]
$("input[name='color2']").val(["Black", "White"]);

単一選択selectの値を参照したり設定するには、通常のval()を用います。

val = $("#select1").val();
$("#select1").val("Black");

複数選択selectの値を参照するには通常の val()、値を設定するには値を配列にします。

val = $("#select2").val();              // [ "Black", "White" ]
$("#select2").val(["Black", "White"]);

addClass(className) の形式は、obj の class に className を加えます。

$("#d1").addClass("border");

addClass(function(index, currentClass)) の形式は、obj の class に function の戻り値をクラス名として加えます。i はインデックス番号、currentClass は現在設定されているクラス名を示します。

$("#d1").addClass(function(i, class) {
    return "border";
});

obj から className や function の戻り値で指定したクラスを削除します。

$("#d1").removeClass("border");

obj の中に className クラスを持つ要素がひとつでもあれば true を、さもなくば false を返します。

val = $("div").hasClass("red");    // true or false

obj に対して className で指定したクラスが存在する場合は削除し、存在しない場合は追加します。

$("#d1").toggleClass("border");

state に true を指定すると有無に関わらず追加し、false を指定すると有無に関わらず削除します。

$("#d1").toggleClass("border", true);

toggleClass([switch]) の形式は、obj に最初に設定されていたすべてのクラスを対象とします。switch が true の場合は追加し、false の場合は削除し、省略した場合は有無を切り替えます。

$("#d1").toggleClass();

toggleClass(function(...)) の形式は、className の代わりに関数の戻り値をクラス名とします。

$("#d1").toggleClass(function(i, class, switch) { return "border"; });