概要
jQueryのattr()はHTMLの属性の取得・操作ができます。
例えば、クラス名を取得したり、変更したり、削除したりといった感じです。
以降、使い方を事例を挙げつつ解説していきます。
使い方
基本
属性の取得
$(HTML要素).attr("取得する属性");
第１引数に取得する対象の要素を指定します。
属性の変更
$(HTML要素).attr("変更する属性","変更後の値");
第1引数で「変更する属性」、第2引数で「変更後の値」を指定します。
コード例
①classを操作する
HTML
<div class="demo">デモ</div>
jQuery
//クラス名変更
$("div").attr("class","demo2");
//クラス名取得
const className = $("div").attr("class");
//結果確認
console.log(className);
//demo2
②idを操作する
HTML
<div id="demo">デモ</div>
jQuery
//クラス名変更
$("div").attr("id","demo2");
//クラス名取得
const className = $("div").attr("id");
//結果確認
console.log(className);
//demo2
③dataを取得
HTML
<div data-demo="demo">デモ</div>
jQuery
//dataを変更
$("div").attr("data-demo","demo2");
//dataを取得
const data = $("div").attr("data-demo");
//結果確認
console.log(data);
//data2
④チェックボックスにチェックをつける・外す
デモ
See the Pen Untitled by masahiro nomura (@masahiroview) on CodePen.
コード解説
//チェックをつける
$(".check").click(function() {
$("input").attr("checked","checked");
});
//チェックを外す
$(".unCheck").click(function() {
$("input").removeAttr("checked");
});
チェックボックスの”checked”を操作することも可能です。
removeAttr()で属性の削除もできます。
今回は”checked”属性を削除しています。
※今回は事例として参考までに紹介しましたが、実際にはcheckedの操作にはprop()の方が適しているそうです。詳細は下記外部サイト様をご参照ください。
jQueryでチェックボックスをチェック：prop()とattr()の違い
今回は、jQueryでチェックボックスをチェック状態にする方法について紹介します。 チェックボックスをクリックすればチェ...
uxmilk.jp
応用：まとめて指定
下記のように、複数の属性をまとめて指定もできるらしい。
$('div').attr({
id: "demoID",
class: "demoClass",
type: "checkbox",
value:"demoInput",
checked: "checked"
});
参考
・SAMURAI ENGINEER BLOG : 30分で理解！jQueryのattr()で属性操作を極めるコツ！
・AgoHack：[jQuery] attr()とprop()の使い方と違い
コメント