
プログラマハック
2019.12.04
プログラマーの仕事はなくならない!プログラマーの需要を徹底解説
今回は、「プログラマーの需要」について、現状と将来性も含めご紹介します。 プログラマーになろうとしたとき、「AI(人口知能)が普及しているから、プログラマーの仕事は将来なくなるかも」「需要が高いプログラマーになるためには […]
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をご参照下さい。
プログラマハック
2019.12.04
今回は、「プログラマーの需要」について、現状と将来性も含めご紹介します。 プログラマーになろうとしたとき、「AI(人口知能)が普及しているから、プログラマーの仕事は将来なくなるかも」「需要が高いプログラマーになるためには […]
スキルアップ
2019.11.29
今回は、20代フリーターが正社員面接で採用されるための、面接攻略法をご紹介します。「正社員面接って何を聞かれるの?すごく緊張する」そう感じる20代フリーターは多くいます。正社員面接は、アルバイトでの面接と大きく異なります […]
スキルアップ
2019.11.27
エンジニアを目指してプログラミングスクールを検討中の方で「プログラミングスクールに通っても時間と費用を無駄にするのではないか」と不安のある方はいませんか? もちろん、プログラミングスクールに通いさえすれば誰でもエンジニア […]
プログラマハック
2019.11.22
今回は、未経験でプログラマ転職を成功させるためのおすすめポイントについて、ご紹介します。「手に職を付けたいからプログラマになりたい」と思った時、「未経験で本当にプログラマになれるの?」「プログラマになるためには、どうした […]
スキルアップ
2019.11.20
ITエンジニアの職種別平均年収とITエンジニアが年収を上げる方法を紹介します! IT業界で働く人々は高収入のイメージがありますが、実際はどうなんでしょうか。 今回は、ITエンジニアの職種別の平均年収とITエンジニアが年収 […]
スキルアップ
2019.11.15
「フリーターから正社員になりたい!」と思って、懸命に就職活動しているのに、中々内定がもらえず、「フリーターの就職は難しいな」と悩んでいませんか?今回は、そんなフリーターの方が、自分の長所やフリーター経験を活かして、いち早 […]
INTERNOUS,inc. All rights reserved.