jQuery の attr メソッドを使用すると、要素の属性に対して 値を設定したり変更したりすることができます。
今回は、jQuery の attr メソッドの使い方を解説いたします。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
attr メソッドは、引数によって 4 通りの記述方法があります。
$(セレクタ).attr( name );
$(セレクタ).attr( name, value );
$(セレクタ).attr( map );
$(セレクタ).attr( name, function(index, attr) );
attr メソッドの引数の内容は、それぞれ以下の通りです。
.attr( name )
name |
---|
属性の名前を指定 |
.attr( name, value )
name |
---|
属性の名前を指定 |
value |
設定する値を指定 |
.attr( map )
map |
---|
属性の名前と値との Map 値を指定 (まとめて要素の属性を設定することが可能となる) |
.attr( name, function(index, attr) )
name |
---|
属性の名前を指定 |
function(index, attr) |
新しい属性値を戻り値として返す関数を指定 index:要素の index attr:変更前の属性値 |
attr メソッドを使用して、ボタンの属性(色とテキスト)を変更します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").on("click", function() {
$("#btn1").attr("value","オン");
$("#btn1").attr("style","background-color:red");
$("#btn2").attr("value","オフ");
$("#btn2").attr("style","background-color:#F0F0F0");
});
$("#btn2").click(function() {
$("#btn1").attr({
value:"オフ",
style:"background-color:#F0F0F0"
});
$("#btn2").attr({
value:"オン",
style:"background-color:red"
});
});
});
</script>
<div style="background-color : #CCC; padding : 20px;">
<input type="button" id="btn1" value="オフ"> <input type="button" id="btn2" value="オフ">
</div>
左のボタン( #btn1 )をクリックした際の属性変更は「 .attr( name, value ) 」の形で次のように記述しています。
$("#btn1").attr("value","オン");
$("#btn1").attr("style","background-color:red");
同様の処理をしていますが、右のボタン( #btn2 )をクリックした際の属性変更は「 .attr( map ) 」の形で次のように記述しています。
$("#btn1").attr({
value:"オフ",
style:"background-color:#F0F0F0"
});
属性自体を削除する場合は、removeAttr メソッドを使用します。
removeAttr メソッドは、次のように記述します。
$(セレクタ).removeAttr( name );
removeAttr メソッドの引数の内容は次の通りです。
.removeAttr( name )
name |
---|
属性の名前を指定 スペース区切りで複数指定可能 |
removeAttr メソッドを使用して、テキストボックスの属性であるプレースホルダー(入力のヒントとなるテキスト)を削除します。
削除ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn3").on("click", function() {
$("#txt").removeAttr("placeholder");
});
});
</script>
<div style="background-color : #CCC; padding : 20px;">
<div style="display:inline-flex; align-items:center;">
<input type="button" id="btn3" value="削除">
<input type="text" id="txt" placeholder="ここが削除されます。">
</div>
</div>
jQueryのattr メソッドについて、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.