jQueryで操作する命令

命令名・書式意味具体例

テキストの変更と取得

text(変更後のテキスト)テキストを変更$("セレクタ").text("ほげほげ");

text()テキストを取得する参考

　　【text()の例】動的に text を読み出します。　参考

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <div style="width:500px; background:#eee; padding:4px 10px;">
    <span id="spn1"><span>ようこそ！</span></span>
    <p style="border:thin #9d9 solid;">
      上記のコード: 要素 ( id="spn1") <br>
      　<span id="spn1">
        <b><span>ようこそ！</span></b>
      </span>
    </p>
    <input type="button" id="btn1" value="html()で取得" style="color:blue;">
    <input type="button" id="btn2" value="text()で取得" style="color:red;">
    <div id="spn2">　</div>
  </div>
  
  <script>
    $(function() {
      $("#btn1").on("click", function() {
        $("#spn2").text($("#spn1").html()).css("color","blue");   
      });
      $("#btn2").on("click", function() {
        $("#spn2").text($("#spn1").text()).css("color","red");   
      });
    });
  </script>
</body>
</html>

　　　【デモ表示】

HTMLの変更と取得

html(変更後のHTML)HTMLを変更$("セレクタ").html("<strong>ほげほげ</strong>");

html()HTMLを取得する

HTMLの挿入

prepend(挿入するHTML)要素内の先頭にHTMLを挿入$("セレクタ").prepend("<strong>ほげほげ</strong>");

append(挿入するHTML)要素内の最後にHTMLを挿入$("span").append("<strong>ほげ</strong>");

　　【appendの例】動的に htmlを追記します。　参考

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <span><button>ボタン</button>を押して</span>追加する
    <ul></ul>
    <script>
      $(function() {
        $("button").click(function() {
          $("span").append("<strong> htmlを</strong>");
          $("ul").append("<li>追加</li>");
        });
      });
    </script>    
  </body>
</html>

　　　【デモ表示】

before(挿入するHTML)要素の前にHTMLを挿入$("セレクタ").before("<span>◆</span>");

after(挿入するHTML)要素の後にHTMLを挿入$("セレクタ").after("<div>……</div>");

　　【afterの例】要素の後にHTMLを挿入します。　参考

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
        function afterFunc(index){
                if (index == 1) {
                    return "<div class='green'>add";
                }
        }
        $(function () {
                $("button").click( function(){
                    $("div").after( afterFunc );
                })
        });
  </script>
  <style>
       div{ margin:10px; width:150px; height:20px; background:#eee; }
       .green{ background:#9f9; }
  </style>                    
</head>
<body>
        <button>CLICK</button><br>
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
</body>
</html>

　　　【デモ表示】

HTMLの移動 (挿入)

prependTo(移動先セレクタ)他の要素内の先頭に要素を移動$("<b>Hello</b>").prependTo("span");　参考サイト

appendTo(移動先セレクタ)他の要素内の最後に要素を移動$("<b>By!!</b>").appendTo("span");　　参考サイト

insertBefore(移動先セレクタ)他の要素の前に要素を移動$("<b>Hello</b>").insertBefore("span");　参考サイト

insertAfter(移動先セレクタ)他の要素の後に要素を移動参考サイト

他の要素で包む

wrap("<要素名></要素名>")要素を他の要素で包む$("セレクタ").wrap("<h1></h1>");

wrarpAll("<要素名></要素名>")要素をまとめて他の要素で包む

wrapInner("<要素名></要素名>")子要素/テキストを他の要素で包む

要素の置き換え

replaceWith(置換後の要素)要素を他の要素に置き換える$("セレクタ").replaceWith("<h1></h1>");

要素の削除

remove()要素を削除する$("セレクタ").remove();　参考サイト

属性値の変更と取得

attr(属性名, 属性値)指定した属性の値を変更する$("セレクタ").attr("属性名","属性値");

attr(属性名)指定した属性の値を取得する

removeAttr(属性名)指定した属性を削除する$("セレクタ").removeAttr("属性名");

class属性の追加と削除

addClass(class属性値)class属性を追加する$("セレクタ").addClass("class属性値");

removeClass(class属性値)class属性を削除する$("セレクタ").removeClass("class属性値");

【CSSの制御】

css(プロパティ名)指定したCSSプロパティの値を取得例: var color=$("div").css("background-color");

css(プロパティ名,値)指定したCSSプロパティ値を設定$("セレクタ").css("プロパティ","値");

css({ 複数のCSS値 })複数のCSSプロパティの値を設定$("セレクタ").css({"プロパティ":"値",･･･"プロパティ":"値"});

フォーム部品の操作

val（）フォーム入力値（valueの値）を取得例: $('input[name="hoge"]').val();

val（"入力値"）フォーム入力値（valueの値）を変更

その他

is(expr)条件式に合致する要素があればtrue 例: if ($(this).is(":first-child")) {････

not(expr)指定した条件式に合致する要素を除外例: $("div").not(".green").････

イベントによる命令

イベント意味具体例

onアタッチ関数$(セレクター).on(events[, selector][, data], handler); ＊handler: fn等　　参考

readyアクセス準備完了DOMにアクセスできる準備が出来た段階で実行

　　【readyの例】 DOMが全てロード後に実行します。　参考

<!DOCTYPE html>
<html lang="ja">
<head>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(document).ready(function () {
    $("p").text("DOMを読込み完了、操作可能です。");
  });
</script>
</head>
<body>
  <p>まだ DOM のロードが未完です。</p>
</body>
</html>

　　　【デモ表示】

clickクリック$("button").click(function(){ $("img").attr("src","sea.jpg");});

dblclickダブルクリック$("#btn").dblclick(function(){ alert("ダブルクリックされました"); });

mousedownマウスダウン

mouseupマウスアップ

mouseoverマウスオーバー$(".mark").mouseover(function(){ $("p").css("background-color","green");});

mouseoutマウスアウト

mouseenterマウスエンターmouseoverは対象とその子要素で、 mouseenterは対象要素のみでイベントが発生

mouseleaveマウスリーブmouseoutは対象とその子要素で、 mouseleaveは対象要素のみでイベントが発生

mousemoveマウスムーブ

toggleトグル$("button").click(function () { $("p").toggle();});

アニメーション効果を付ける

イベント意味具体例

show表示速度制御$("セレクタ").show(スピード);　　具体例: $("p").show("slow");

hide非表示速度制御$("セレクタ").hide(スピード);

slideDown表示速度制御$("セレクタ").slideDown(スピード);

slideUp非表示速度制御$("セレクタ").slideUp(スピード);

fadeIn表示速度制御$("セレクタ").fadeIn(スピード);

fadeOut非表示速度制御$("セレクタ").fadeOut(スピード);

・コールバック関数も指定可能
　$("セレクタ").アニメーション(スピード,function(){/*アニメーション終了時の命令*/});
具体例: $('.className').fadeIn(400,function(){ alert('フェードイン完了'); });

・CSS値をアニメーションで変更
　$("セレクタ").animate(値を変更したいCSSプロパティ, スピード, 動き, コールバック関数);
具体例: $('.className').animate({top:500,left:600},3000,function(){alert('アニメ完了')});

　＊　スピードは、slow／normal／fast のいずれか、又はミリ秒で指定します
　＊　CSSプロパティの記述例: {'width':'300px','height': '80px'}　参考
　＊　動きは、linear(一定の速度)、swing(最初ゆっくり・後半は速く)で指定します

その他

機能意味具体例

関数を紐づけイベントに実行したい関数を紐づけ$("セレクタ").bind(eventType,handler);

jQueryでAjax要素内をファイル内容で差替え$("セレクタ").load("ファイル名");　非推奨

繰り返し処理eachで繰り返し処理を行う$("セレクタ").each(function(){//セレクタで指定した要素に対する命令});

プラグインの作成新たにメソッドを定義する$.fn.メソッド名 = function(){//実行したい命令return this;}