使い方
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>
