【JavaScript】jQuery - アルパカノフン

使い方
- CDNを使用する方法
- ダウンロードして使用する方法
記入場所
- パターン１：要素の下に記載する
- パターン２：要素の上に記載する
要素の指定
イベント
- （on）
- その他
$(this)
each
- jQuery.each() メソッド
- .each() メソッド

使い方

CDNを使用する方法

特徴：オンラインでのみ使用可能

// jQuery バージョン 3.71の場合
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

ダウンロードして使用する方法

特徴：オフラインでも使用可能
１．公式サイトからファイルをダウンロードする
Download jQuery | jQuery
※「名前を付けてリンク先を保存」でダウンロード

２．ファイルを配置する

３．ダウンロードしたファイルを外部取込する

<script src="/demo/resources/common/js/jquery-3.7.1.min.js"></script>

記入場所

パターン１：要素の下に記載する

<input type="text" id="name" value="あいうえお"/>

<script>
  alert($("#name").val())  // 「あいうえお」が表示される
</script>

パターン２：要素の上に記載する

$(function()をつけるとDOM Documentのロードが終わった際に実行されるようになる

<script>
  $(function() {
      alert($("#name").val())  // 「あいうえお」が表示される
  });
</script>

<input type="text" id="name" value="あいうえお"/>

要素の指定

すべて　$("*")

すべての要素にマッチする

<script>
  $("*").css("font-family", "Arial");
</script>

ID　$("#id")

指定したIDにマッチ

<script>
  // IDを指定
  $("#userId").css("color", "red");         // <p id="userId">～</p>
  // ID＋エレメントを指定
  $("p#userId").css("color", "red");        // <p id="userId">～</p>
  // ID＋クラスを指定
  $(".smpl#userId").css("color", "red");    // <p class="smpl" id="userId">～</p>
</script>

クラス　$(".class")

指定したIDにマッチ

<script>
  // クラスを指定
  $(".smpl").css("color", "red");        // <h1 class="smpl">～</h1>
  // クラス＋エレメントを指定
  $("p.smpl").css("color", "red");       // <p class="smpl">～</p>
  // クラスの組み合わせを指定
  $(".smpl.smpl2").css("color", "red");  // <p class="smpl smpl2">～</p>
</script>

エレメント　$("element")

指定したエレメント要素(div等)にマッチ

<script>
  $("h1").css("color", "red");    // <h1>～</h1>
</script>

複数指定

カンマで区切ると、and条件でマッチ

<script>
  $("label,.smpl").css("color", "red");    // <label class="smpl">～</label>
</script>

○○○=～～～の形式のものを指定

id=○○やclass=○○など「=」を含むものが指定可能

<script>
  // id=～を持つすべての要素を指定(id以外になんでも指定可能)
  $("[id]").css("color", "red");
  // IDを指定
  $("[id='userId']").css("color", "red");    // <p id="userId">～</p>
  // クラスを指定
  $("[class='smpl']").css("color", "red");    // <p class="smpl">～</p>
  // 等しくないものを指定
  $("[id!='userId']").css("color", "red");    // <p id="userName">～</p>
  // 「-」前を指定
  $("[id|='user']").css("color", "red");    // <p id="user-id">～</p>
  // 含むものを指定
  $("[id*='user']").css("color", "red");    // <p id="userId">～</p>
  // 複数条件を指定
  $("[id*='user'][class='smpl']").css("color", "red");    // <p id="userId" class="smpl">～</p>
</script>

親子関係

<script>
  // 親要素を指定
  $("#userId").parent().css("color", "red");
  // 先祖要素をすべて指定
  $("#userId").parents().css("color", "red");
  // 子要素をすべて指定（1階層下）
  $("#userId").children().css("color", "red");
  // 子要素のエレメントを指定（1階層下）
  $("#userId").children("p").css("color", "red");
  // 子要素のエレメントを指定（全階層）
  $("#userId").find("p").css("color", "red");
</script>

順番

<script>
  // 最初の要素
  $("p").first().css("color", "red");
  // 最後の要素
  $("p").last().css("color", "red");
  //n番目の要素（最初は0）
  $("p").eq(0).css("color", "red");

</script>

is

obj の中から selector にマッチする要素が一つでもあれば true を、さもなくば false を返す
if文と合わせて使う

<script>
  // labelにid=userIdがあればアラートを出す
  if ($("label").is("#userId")) {
      alert("Find!");
  }

</script>

表示、非表示

<div id="hiddenItem" hidden>非表示</div>
<div id="visibleItem">表示</div>

<script>
  // hidden(非表示)の場合、アラートを出す
  if ($("#hiddenItem").is(":hidden")) {
      alert("Find!");
  }

  // visible(表示)の場合、アラートを出す
  if ($("#visibleItem").is(":visible")) {
      alert("Find!");
  }
</script>

イベント

（on）

イベント	内容
change	フォーム部品の状態に何らかの変化があった時に発動
click	要素がクリックされた時に発動
blur / focus	要素にフォーカスが当たったとき(focus)、外れたとき(blur)に発動
load	ドキュメントが読み込まれたあとに発動。読み込み前はreadyを使う
resize	ウィンドウサイズが変化した時に発動
scroll	画面がスクロールした時に発動
keyup / keypress	キーボードのキーが押された時(keypress)、離された時(keyup)に発動
mouseup / mousedown	マウスのボタンが押された時(mousedown)、離された時(mouseup)に発動
mousemove	指定の要素内でマウスが動いている時に発動
submit	フォームが送信された時に発動
error	何らかのJavaScriptエラーが発生した時に発動

<script>
  // クリック
  $("#nextButton").on("click", function() {
      alert("クリックされました！");
  });

  // 画面ロード後　※$(function()で囲むと動かない
  $(window).on("load",function(){
      alert("Hello");
  });

  // クリックまたはマウスオーバー
  $("input").on("click change", function() {
      alert("クリックまたは変更");
  });

  // div内のinputを対象
  $("div").on("click","input", function() {
      alert("クリックまたは変更");
  });

  // 複数のイベント
  $("input").on({
      click: function() {
          alert("クリック");
      },
      mouseover: function() {
          alert("マウスオーバー");
      }
  });
</script>

その他

メソッド	内容
.val()	指定した要素の値を取得または設定
.text()	指定した要素のテキストを取得または設定
.prop()	指定した要素の属性を取得または設定（削除はremoveProp）
.css()	指定のCSSスタイルに変更
.remove()	指定した要素を削除
.addClass()	指定した要素にクラスを追加
.removeClass()	指定した要素にクラスを削除

<input type="text" id="userName" value="たかし"/>
<p id="sample">あいうえお</p>
<input type="radio" id="man" name="sex" value="1" /><label>男</label>
<input type="radio" id="woman" name="sex" value="2" checked/><label>女</label>

<script>
  // 値を取得
  $name = $("input#userName").val();
  alert($name);    // たかし
  // 値を変更
  $("input#userName").val("変更後");

  // テキストを取得
  $text = $("p").text();
  alert($text);    // あいうえお
  // テキストを変更
  $("p").text("変更後");

  // 属性(○○=××やchecked等)を取得
  // id属性の値を取得する例
  $id = $("p").prop("id");
  alert($id);    // sample
  // ラジオボタンがチェック済みか判定する例
  if($("#woman").prop("checked")){
    alert("女性");
  }
  // 属性(○○=××)を変更
  $("p").prop("id", "changed");
  // ラジオボタンのチェックをつける
  $("#woman").prop("checked","checked");
  // ラジオボタンのチェックを外す
  $("#woman").prop("checked","");

  // CSSを取得
  $color = $("#userName").css("color");
  alert($color);
  // CSSを変更
  $("#userName").css("color", "red");


</script>

$(this)

$(this)はイベントが発生した要素を指す

<p class="hoge">テキスト1</p>
<p class="hoge">テキスト2</p>
<p class="hoge">テキスト3</p>

<script>
$('.hoge').click(function(){
    $(this).css('color', 'red');    // ここでの$(this)はクリックされた要素だけを指す
});
</script>

each

jQuery.each() メソッド

jQuery オブジェクトをループ処理したい時
indexは省略可能

<p class="hoge">テキスト1</p>
<p class="hoge">テキスト2</p>
<p class="hoge">テキスト3</p>

<script>
  $("p").each(function(index) {
    if ($(this).text()=="テキスト2") {
        return true  // 次のループに行く(continueと同じ)
    }
    $(this).css("color", "red");  // テキスト2だけ色が変わらない
  });
</script>

<p class="hoge">テキスト1</p>
<p class="hoge">テキスト2</p>
<p class="hoge">テキスト3</p>

<script>
  $("p").each(function(index) {
    if ($(this).text()=="テキスト2") {
        return false  // ループ処理を終わる(breakと同じ)
    }
    $(this).css("color", "red");  // テキスト1だけ色が変わる
  });
</script>

.each() メソッド

引数で指定したオブジェクトをループ処理したい時
indexとvalは省略可能

<script>
  array = ["Apple", "Orange", "Grape"];

  $.each(array, function(index, val) {
      alert(index + "：" + val);  // 0：Apple　1：Orange　2：Grape
  });

</script>

使い方