JavaScript でも キーワード「 this 」を使用しますが、jQuery では 「 $(this) 」をオブジェクトとして使用します。
今回は、jQuery の $(this) の使用方法について解説いたします。
※JavaScript の this の使用方法についてはJavaScript【 this 】 ~ 独特なキーワードをご参照下さい。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
$(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をご参照下さい。
jQueryの $(this) について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.