
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
jQuery
2018.08.23
jQuery の attr メソッドを使用すると、要素の属性に対して 値を設定したり変更したりすることができます。
今回は、jQuery の attr メソッドの使い方を紹介したいと思います。
1.attr メソッド
2.attr で属性を変更
3.removeAttr で属性を削除
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>
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.