jQuery APIリファレンスDOM要素の属性：属性
- attr(name)〔最初にマッチした要素の指定した属性の値を取得 〕
- attr(properties)〔マッチした要素に複数のプロパティを設定〕
- attr(key, value)〔マッチした要素に1つのプロパティを設定〕
- attr(key, fn)〔マッチした要素にキーと計算した値をプロパティとして設定〕
- removeAttr(name)〔マッチした各要素から指定した属性を削除 〕
attr(name)
最初にマッチした要素の指定した属性の値を取得
2009/2/27
attr(name) 戻り値：オブジェクト
指定した属性名を持っている要素を検索し、最初にマッチした要素の指定した属性の値を取得します。 指定した名前の属性を持っている要素が見つからなかった場合は「undefined」を返します。
第1引数nameには、取得する属性の名前（title属性、alt属性、src属性、href属性、width属性、style属性など）を指定します。
attr()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM要素の属性(Attirbutes)：属性（Attr）：attr()の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn_add_attr").click(function(){
$("#sample").attr("alt","くまさんケーキ");
$("#res").text($("#sample").attr("alt"));
});
$("#btn_remove_attr").click(function(){
$("#sample").removeAttr("alt");
$("#res").text($("#sample").attr("alt"));
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>DOM要素の属性(Attirbutes)：属性（Attr）：attr()の使用例 | jQuery</h1>
<!-- CODE -->
<p>
img要素のalt属性に値を<button id="btn_add_attr">設定</button>
<button id="btn_remove_attr">削除</button>
</p>
<p><img id="sample" src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_t.jpg" width="100" height="75" /></p>
<p>alt属性の値：<strong id="res"></strong></p>
<!-- CODE / -->
</div>
</body>
</html>
見出しとアンカー
a要素のhref属性の値を取得し、取得したアンカー名をIDとする要素までスムーズにスクロールします。
attr()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM要素の属性(Attirbutes)：属性（Attr）：attr()の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li").click(function(){
/* a要素のhref属性の値を取得 */
var hash = $(this).find("a").attr("href");
/* 取得したアンカー名をIDとする要素にスムーズにスクロール */
$($.browser.safari ? 'body' : 'html')
.animate({scrollTop: $(hash).offset().top}, 1200, "swing");
/* デフォルトの動作を無効化 */
return false;
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>DOM要素の属性(Attirbutes)：属性（Attr）：attr()の使用例 | jQuery</h1>
<p>▼見出しインデックスをクリックすると、該当する見出しのコンテンツまでスムーズにスクロールします。</p>
<!-- CODE -->
<ul>
<li><a href="#mida1">見出し1</a></li>
<li><a href="#mida2">見出し2</a></li>
<li><a href="#mida3">見出し3</a></li>
<li><a href="#mida4">見出し4</a></li>
<li><a href="#mida5">見出し5</a></li>
</ul>
<h2 id="mida1">見出し1</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p style="text-align:right;"><a href="#wrap">▲ページの先頭へ</a></p>
<h2 id="mida2">見出し2</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p style="text-align:right;"><a href="#wrap">▲ページの先頭へ</a></p>
<h2 id="mida3">見出し3</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p style="text-align:right;"><a href="#wrap">▲ページの先頭へ</a></p>
<h2 id="mida4">見出し4</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p style="text-align:right;"><a href="#wrap">▲ページの先頭へ</a></p>
<h2 id="mida5">見出し5</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p style="text-align:right;"><a href="#wrap">▲ページの先頭へ</a></p>
<!-- CODE / -->
</div>
</body>
</html>
attr(properties)
マッチした要素に複数のプロパティを設定
2009/2/27
attr(properties) 戻り値：jQuery
マッチした各要素にプロパティとしてキーと値を設定します。
マッチした各要素に複数のプロパティを設定する場合に便利です。 クラス属性を設定したい場合は、キーとして「className」を使用するか、.addClass(class)または.removeClas(class)を使用してください。 attr(key, value)またはattr(key, fn)が再帰的に呼ばれることを覚えておいてください。 渡したプロパティが関数の場合、その関数は評価され、属性自体には格納されません。
第1引数propertiesには、オブジェクトプロパティとして設定するキーと値のペアを連想配列で指定します。
attr(properties)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM要素の属性(Attirbutes)：属性（Attr）：attr(properties)の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("img").attr({
src:"http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44_s.jpg",
width:"75",
height:"75",
title:"みかん星人ですよー",
alt:"みかん星人"
});
$("#res").html("img要素のtitle属性：<strong>"+$("img").attr("alt")+"</strong>");
});
</script>
</head>
<body>
<div id="wrap">
<h1>DOM要素の属性(Attirbutes)：属性（Attr）：attr(properties)の使用例 | jQuery</h1>
<!-- CODE -->
<p>
<img />
<img />
<img />
</p>
<p id="res"></p>
<!-- CODE / -->
</div>
</body>
</html>
attr(key, value)
マッチした要素に1つのプロパティを設定
2009/2/27
attr(key, value) 戻り値：jQuery
マッチした各要素に1つのプロパティを設定します。
第1引数keyには、設定するプロパティ名を指定します。
第2引数valueには、keyに指定したプロパティ名の値を指定します。
attr(key, value)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM要素の属性(Attirbutes)：属性（Attr）：attr(key, value)の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button:gt(1)").attr("disabled","disabled");
});
</script>
<style type="text/css">
button { padding:2px 5px; }
</style>
</head>
<body>
<div id="wrap">
<h1>DOM要素の属性(Attirbutes)：属性（Attr）：attr(key, value)の使用例 | jQuery</h1>
<p>▼2番目のボタン（button要素）のdisabled属性に「disabled"」を設定します。</p>
<!-- CODE -->
<p>
<button>0番目のボタン</button>
<button>1番目のボタン</button>
<button>2番目のボタン</button>
</p>
<!-- CODE / -->
</div>
</body>
</html>
attr(key, fn)
マッチした要素にキーと計算した値をプロパティとして設定
2009/2/27
attr(key, fn) 戻り値：jQuery
マッチした各要素にキーと関数で計算した値をプロパティとして設定します。
attr(key, value)は値を文字列で渡しますが、attr(key, fn)は関数で計算した値を渡します。
第1引数keyには、設定するプロパティ名を指定します。
第2引数fnには、key似指定したプロパティ名の値を返す関数を指定します。
スコープには現在の要素、引数には現在の要素のインデックス番号を指定します。function callback(indexArray){ // indexArray == position in the jQuery object this; // DOM要素 }
attr(key, fn)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM要素の属性(Attirbutes)：属性（Attr）：attr(key, fn)の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sample p").attr("id", function(ary){
return "div-id"+ary;
})
.each(function(){
$("span", this).html("(ID='<strong>"+this.id+"</strong>')");
});
});
</script>
<style type="text/css">
button { padding:2px 5px; }
</style>
</head>
<body>
<div id="wrap">
<h1>DOM要素の属性(Attirbutes)：属性（Attr）：attr(key, fn)の使用例 | jQuery</h1>
<p>▼ページ上の表示位置に基づいてidを設定します。</p>
<!-- CODE -->
<div id="sample">
<p>Zero-th <span></span></p>
<p>First <span></span></p>
<p>Second <span></span></p>
</div>
<!-- CODE / -->
</div>
</body>
</html>
removeAttr(name)
マッチした各要素から指定した属性を削除
2009/2/27
removeAttr(name) 戻り値：jQuery
マッチした各要素から指定した属性を削除します。
第1引数nameには、削除するプロパティ名を指定します。
removeAttr()の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM要素の属性(Attirbutes)：属性（Attr）：removeAttr()の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$(this).next().removeAttr("disabled")
.focus()
.val("この要素は編集可能です")
});
});
</script>
<style type="text/css">
button { padding:2px 5px; }
input { width:20em; }
</style>
</head>
<body>
<div id="wrap">
<h1>DOM要素の属性(Attirbutes)：属性（Attr）：removeAttr()の使用例 | jQuery</h1>
<p>▼ページ上の表示位置に基づいてidを設定します。</p>
<!-- CODE -->
<button>有効化</button>
<input type="text" disabled="disabled" value="この要素は編集不可です" />
<!-- CODE / -->
</div>
</body>
</html>