
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.10.04
jQuery の click メソッドを使うと、ボタンや画像をクリックした際の処理を実装することができます。
今回は、jQuery の click メソッドの使用方法について紹介します。
1.click メソッド
2.ボタンをクリックした際の処理
3.BOX内をクリックした際の処理
click メソッドは、特定の要素をクリックした際にイベントを発生させるメソッドです。
click メソッドは、引数によって 3 通りの記述方法があります。
$(セレクタ).click( );
$(セレクタ).click( handler( eventObject ) );
$(セレクタ).click( [ eventData ], handler( eventObject ) );
引数なしの「 .click( ) 」は、「 .trigger(“click”) 」の省略形です。
(trigger メソッドの使用方法についてはjQuery【 trigger 】手動でイベントを発生させる trigger メソッドをご参照下さい。)
また、「 .click( handler( eventObject ) ) 」及び「 .click( [ eventData ], handler( eventObject ) ) 」は、「 on( “click”, handler ) 」の省略形です。
(on メソッドの使用方法についてはjQuery【 on 】on メソッドの使い方をご参照下さい。)
click メソッドの引数の内容は、それぞれ以下の通りです。
.click( handler( eventObject ) )
handler( eventObject ) クリック時に実行する処理を関数として指定
.click( [ eventData ], handler( eventObject ) )
[ eventData ] イベントハンドラに渡すデータをマップ値で指定 handler( eventObject ) クリック時に実行する処理を関数として指定
click メソッドを使用して、ボタンをクリックした際の処理を実装します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn1").click(function() { $("#out1").html($(this).val()); }); $("#btn2").click(function() { $("#out1").html($(this).val()); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <input type="button" id="btn1" value="OK!"> <input type="button" id="btn2" value="NG!"> <span id="out1"></span> </div>
上のサンプルでは、各ボタンがクリックされた際に「 $(“#out1”).html($(this).val()); 」として ボタンの右のエリアに 各ボタンのテキスト( value 値 )が表示されるように記述しています。
click メソッドを使用して、クリックした位置の横方向(x座標)及び縦方向(y座標)の値を表示します。
グレーのエリア内で任意の場所をクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#div1").click(function(e) { $("#out2").html("x : " + e.pageX + "<br>y : " + e.pageY); }); }); //--> </script> <div id="div1" style="position:relative; height:200px; background-color:#CCC;"> <span id="out2" style="position: absolute; top:20%; left:10%;"></span> </div>
特定の領域( 上のサンプルでは id=”div1″ の div 要素 )を指定して click メソッドを呼び出すと、その領域内であれば どこをクリックしても クリックイベントを発生させることができます。
上のサンプルではクリックした位置の x 座標と y 座標を表示していますが、「 $(“#div1”).click(function(e) { … }); 」のように function に引数( 任意の変数名で上のサンプルでは「 e 」)を渡すと、「 e.pageX 」と「 e.pageY 」でクリック時の x 座標及び y 座標の値( px )が取得できます。
卒業生インタビュー
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.