
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.08.28
jQuery の prop メソッドを使用すると、attr メソッドと同様に 要素の属性に対して 値を設定したり変更したりすることができます。
そして、 checked や selected のように、指定されていれるか否かを true 又は false で表すことができる属性(真偽値属性)には、prop メソッドの使用が向いています。
今回は、jQuery の prop メソッドの使い方と attr メソッドとの違いを紹介したいと思います。
attr メソッドの使用方法についてはjQuery【 attr 】属性に値を設定する attr と 削除する removeAttrをご参照下さい。
1.prop メソッド
2.prop で属性を変更
3.attr と prop との違い
prop メソッドは、引数によって 4 通りの記述方法があります。
$(セレクタ).prop( name );
$(セレクタ).prop( name, value );
$(セレクタ).prop( map );
$(セレクタ).prop( name, function(index, prop) );
prop メソッドの引数の内容は、それぞれ以下の通りです。
.prop( name )
name 属性の名前を指定
.prop( name, value )
name 属性の名前を指定 value 設定する値を指定
.prop( map )
map 属性の名前と値との Map 値を指定
(まとめて要素の属性を設定することが可能となる)
.prop( name, function(index, prop) )
name 属性の名前を指定 function(index, prop) 新しい属性値を戻り値として返す関数を指定
index:要素の index
prop:変更前の属性値
prop メソッドを使用して、ラジオボタンの属性( checked )を変更します。
各ボタンをクリックしてみて下さい。
YES | NO |
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn1").on("click", function() { $("#ch_yes").prop("checked", true); }); $("#btn2").click(function() { $("#ch_no").prop("checked", true); }); }); //--> </script> <div style="background-color : #CCC; padding : 20px;"> <table> <tr><td> <input type="button" id="btn1" value="YESにチェック"> </td><td> <input type="button" id="btn2" value="NOにチェック"> </td></tr> <tr><td> <input type="radio" name="rep" id="ch_yes">YES </td><td> <input type="radio" name="rep" id="ch_no">NO </td></tr> </table> </div>
上のサンプルでは、「 .prop( name, value ) 」の形で次のように記述し、属性変更を行っています。
$("#ch_yes").prop("checked", true);
また、上のサンプルは name に同じ値を設定したラジオボタンのため value 値 に「 true 」を設定した要素以外は自動的にチェックが外れますが、次のように記述して value 値 に「 false 」を設定すると、意図的にチェックを外すことができます。
$("#ch_yes").prop("checked", false);
attr メソッドと prop メソッドとは、共に 要素の属性に対して 値を操作できるメソッドであり、記述方法も同じですが、checked など 指定されていれるか否かを true 又は false で表すことができる属性( 真偽値属性 )の属性値を取得する際に、その戻り値に違いがあります。
属性 | メソッド | 戻り値 |
---|---|---|
checked | prop | true / false |
attr | “checked” / “” | |
selected | prop | true / false |
attr | “selected” / “” | |
disabled | prop | true / false |
attr | “disabled” / “” | |
multiple | prop | true / false |
attr | “multiple” / “undefined” |
上記の通り、真偽値属性の属性値を取得する際に、prop メソッドは真偽値( true 又は false )で取得できますが、attr メソッドは文字列で取得します。
if 文の条件式の中で戻り値を使用する場面等を考えると、戻り値は文字列より真偽値で取得した方が 後続処理の正確性が保たれます。
ですので、真偽値属性に関する操作を行う場合は、prop メソッドを使用するようにしましょう。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.