
スキルアップ
2021.01.08
社会人の勉強は何をするべき?勉強のメリットと勉強方法も紹介!
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
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.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
スキルアップ
2021.01.08
独学でフリーランスエンジニアを目指す方へ向けて、未経験からフリーランスエンジニアになるための手順や独学でのプログラミング学習法、必要なスキルなどをご紹介します。 独学とスクールどちらで勉強すればいいか迷っている、そもそも […]
スキルアップ
2021.01.05
高卒女子の就職内定率は大卒女子とほぼ同じ。でも知恵袋には「高卒女性が応募できる正社員求人って少ないのでは…?」と心配する人たちもいるようですが、資格なしでも高収入が期待できる仕事はたくさんあります。そこで今回は現役女子高 […]
スキルアップ
2020.12.30
プログラマの仕事に興味はあるものの「プログラマの仕事はきつい」というのを耳にして不安に思ったりしていませんか?なぜプログラマの仕事はきついといわれるのか?そもそも未経験からでもプログラマになれるのか?本記事では、プログラ […]
スキルアップ
2020.12.21
技術の進歩に伴い、IT業界も人気の業界のひとつとなりましたが、「IT業界はブラック企業が多いからエンジニアを目指すのはやめとけ」という声も聞こえてきます。これは本当なのでしょうか?この記事では、実際の疑問の声に対する理由 […]
スキルアップ
2020.12.18
仕事にやりがいを感じられず悩んではいませんか?本記事では、仕事で満足感を得るにはどうすればいいのか、やりがいの感じやすいお仕事7選、仕事にやりがいを見つけるポイント、転職しなくても仕事の満足度をあげる方法などをご紹介しま […]
INTERNOUS,inc. All rights reserved.