column

ITコラム

mv12369

プログラミングノウハウ

2018.11.02

jQuery【this】便利な$(this)の使い方

JavaScript でも キーワード「 this 」を使用しますが、jQuery では 「 $(this) 」をオブジェクトとして使用します。
今回は、jQuery の $(this) の使用方法について解説いたします。

※JavaScript の this の使用方法についてはJavaScript【 this 】 ~ 独特なキーワードをご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. $(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 要素のテキストの色を黒に変更しています。

▲目次へ戻る

 

2. $(this) で親要素を取得

 
$(this) を使用して、クリックした要素の親要素の背景色を変更します。
各テキストをクリックしてみて下さい。

背景色#606のテキスト1
背景色#606のテキスト2
背景色#606のテキスト3

背景色#903のテキスト1
背景色#903のテキスト2
背景色#903のテキスト3

 
上のサンプルのソースコードは次の通りです。

<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をご参照下さい。

▲目次へ戻る

3. まとめ

jQueryの $(this) について、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ