
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.11.02
JavaScript でも キーワード「 this 」を使用しますが、jQuery では 「 $(this) 」をオブジェクトとして使用します。
今回は、jQuery の $(this) の使用方法について紹介します。
尚、JavaScript の this の使用方法についてはJavaScript【 this 】 ~ 独特なキーワードをご参照下さい。
1.$(this) で要素を取得
2.$(this) で親要素を取得
$(this) を使用して、クリックした要素のテキストを取得します。
各テキストをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("span").on("click", function() { $("#p1").html($(this).text()); }); }); //--> </script> <div style="background-color:#CCC; padding:20px 20px 5px;"> <span style="color:blue;">青テキスト</span> <span style="color:green;">緑テキスト</span> <span style="color:purple;">紫テキスト</span> <span style="color:red;">赤テキスト</span> <p id="p1"> </p> </div>
上のサンプルでは「 $(this) 」でクリックした span 要素を取得するため、「 $(this).text() 」という記述で クリックした span 要素内のテキストを取得します。
同様に「 $(this) 」を使用して 次のように記述すると、クリックしたテキストの色が黒に変わります。
<script type="text/javascript"> <!-- $(function() { $("span").on("click", function() { $(this).css("color", "black"); }); }); //--> </script> <div style="background-color:#CCC; padding:20px 20px 5px;"> <span style="color:blue;">青テキスト</span> <span style="color:green;">緑テキスト</span> <span style="color:purple;">紫テキスト</span> <span style="color:red;">赤テキスト</span> </div>
「 $(this).css(“color”, “black”); 」という記述で、クリックした span 要素のテキストの色を黒に変更しています。
$(this) を使用して、クリックした要素の親要素の背景色を変更します。
各テキストをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("span").on("click", function() { $(this).parent().css("background-color", "#CCC"); }); }); //--> </script> <div style="background-color:#FFC0CB; padding:20px;"> <div style="background-color:#606;"> <span>背景色#606のテキスト1</span> <span>背景色#606のテキスト2</span> <span>背景色#606のテキスト3</span> </div> <div style="background-color:#903;"> <span>背景色#903のテキスト1</span> <span>背景色#903のテキスト2</span> <span>背景色#903のテキスト3</span> </div> </div>
「 $(this).parent().css(“background-color”, “#CCC”); 」という記述で、クリックした span 要素の親要素である div 要素の背景色を カラーコード #CCC に変更しています。
parent メソッドの使用方法についてはjQuery【 parent 】親要素を取得する parent と parentsをご参照下さい。
卒業生インタビュー
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.