JavaScript + jQuery のスニペット - 制御

投稿日 2015/05/31

[Home] [Index] 

セレクタ

セレクタ 意味
$(*) BODYやHEADを含む全ての要素
$(':animated') アニメーション中の要素
$('[attribute|="value"]') 指定された属性(name)に、指定された文字列、またはハイフンに続いてその文字列で始まる値を持つ要素
$('[attribute*="value"]') 指定された属性値を含む要素
$('[attribute~="value"]') 属性値をスペース区切りして、指定された値を持つ要素
$('[attribute$="value"]') 終端に指定された属性値を持つ要素
$('[attribute="value"]') 指定された値と同値の属性値を持つ要素
$('[attribute!="value"]') 指定された属性値を含まない要素
$('[attribute^="value"]') 始端に指定された属性値を持つ要素
$(':button') ボタン要素(button と input type="button")を選択
$(':checkbox') チェックボックスの要素を選択
$(':checked') チェック入りのチェックボックスとラジオボタンの要素
$('parent > child') 親要素(parent)を持つ子エレメント(child)を選択
$('.class') 指定されたクラスを持つ要素
$(':contains(text)') 指定したテキストを含む要素
$('ancestor descendant') 先祖要素(ancestor)を持つ、子孫エレメント(descendant)を選択
$(':disabled') Disable状態の要素
$('element') タグ名で指定された要素
$(':empty') テキストを含まない要素
$(':enabled') Enable状態の要素
$(':eq(index)') 指定したインデックス番号の要素
$(':even') インデックスが偶数番の要素 (0,2,4..)
$(':file') ファイル要素(input type="file")を選択
$(':first-child') 最初の子要素を選択
$(":first-of-type") 同じ親要素でドキュメントツリー内で同じ要素名がその前に存在しない要素
$(':first') 最初の要素
$(':focus') フォーカスが当たっている要素
$(':gt(index)') インデックス番号が指定した数値より大きい要素
$('[attribute]') 指定した属性を持つ要素
$(':has(selector)') 指定した要素を子要素内に持つ要素
$(':header') ヘッダー要素(h1, h2, h3 …)
$(':hidden') Hidden状態の要素
$('#id') ID属性が指定した値と一致する要素
$(':image') image要素(input type="image")を選択
$(':input') input, textarea, select, button要素を選択
$(":lang(language)") 言語値が指定したコードと一致、または直後に"-"を持つ開始部分が指定されたコードと一致する要素
$(':last-child') 最後の子要素
$(":last-of-type") 同じ親要素でドキュメントツリー内で同じ要素名がその後に存在しない要素
$(':last') 最後の要素
$(':lt(index)') インデックス番号が指定した数値より小さい要素
$('[attrFilter1][attrFilter2] ... [attrFilterN]') 指定したフィルターに全てマッチする要素
$('selector1, selector2, .. selectorN') カンマ区切りで指定したそれぞれのセレクターにマッチする要素
$('prev + next') "prev"と"next"の前後関係になっている"next"の方の要素
$('prev ~ siblings') prevの要素の兄弟要素で、その後ろに続く要素
$(':not(selector)') 指定された条件にマッチしない要素
$(':nth-child(index/even/odd/equation)') 指定された数字の子要素
$(':nth-last-child(index/even/odd/equation)') n番目の子たちで最後の子要素
$(':nth-last-of-type(index/even/odd/equation)') n番目の子たちで最後のタイプ
$(':nth-of-type(index/even/odd/equation)') 親要素のn番目の子要素全て
$(':odd') インデックス番号が奇数の要素
$(':only-child') 他に兄弟要素を持たない要素
$(':only-of-type') 同じ要素名で、兄弟要素を持たない全ての要素
$(':parent') テキストを含め、ある要素の親
$(':password') パスワードテキストボックス(input type="password")
$(':radio') ラジオボタン(input type="radio")
$(':reset') リセットボタン(input type="reset")
$(':root') <html>要素
$(':selected') 選択状態であるoption要素
$(':submit') (推奨されない)
$(':target') URIの示すtarget要素
$(':text') テキスト要素(input type="text")
$(':visible') 可視状態になっている要素

イベント

イベント オブジェクト 説明
error() ブラウザ JavaScript のエラーイベントにバインドされる。
resize() ブラウザ JavaScript のリサイズイベントにバインドされる。
scroll() ブラウザ JavaScript のスクロールイベントにバインドされる。
load() ドキュメント JavaScript の "load" イベントにバインドされる。
ready() ドキュメント DOM が完全にロードされたときのイベントにバインドされる。
unload() ドキュメント JavaScript の "unload" イベントにバインドされる。
bind() イベントハンドラ 要素に対するイベントのハンドラを設定する。
delegate() イベントハンドラ セレクタで指定した要素の複数イベントのハンドラを設定する。
jQuery.proxy() イベントハンドラ 関数内で実行されるthisを任意のオブジェクトに変更する。
off() イベントハンドラ イベントハンドラを削除する。
on() イベントハンドラ イベントハンドラを設定する。
one() イベントハンドラ 要素に1回だけ実行されるイベントをバインドする。
trigger() イベントハンドラ 要素にバインドされたイベントをすべて実行する。
blur() フォームイベント JavaScript の "blur" イベントにバインドする。
change() フォームイベント JavaScript の "change" イベントにバインドする。
focus() フォームイベント JavaScript の "focus" イベントにバインドする。
focusin() フォームイベント JavaScript の "focusin" イベントにバインドする。
focusout() フォームイベント JavaScript の "focusout" イベントにバインドする。
select() フォームイベント JavaScript の "select" イベントにバインドする。
submit() フォームイベント JavaScript の "submit" イベントにバインドする。
keydown() キーボードイベント JavaScript の "keydown" イベントにバインドする。
keypress() キーボードイベント JavaScript の "keypress" イベントにバインドする。
keyup() キーボードイベント JavaScript の "keyup" イベントにバインドする。
click() マウスイベント JavaScript の "click" イベントあるいは要素のトリガにバインドする。
dblclick() マウスイベント JavaScript の "dblclick" イベントあるいは要素のトリガにバインドする。
hover() マウスイベント 要素の上をマウスカーソルが移動したときのイベントにバインドする。
mouseenter() マウスイベント 要素の上にマウスカーソルが入った時のイベントにバインドする。
mousedown() マウスイベント JavaScript の "mousedown" イベントあるいは要素のトリガにバインドする。
mousemove() マウスイベント マウスが移動したときのイベントにバインドする。
mouseout() マウスイベント 要素からマウスが出て行ったときのイベントにバインドする。
mouseover() マウスイベント 要素の上をマウスが移動するときのイベントにバインドする。
mouseup() マウスイベント 要素上でマウスボタンが離されたときのイベントにバインドする。
toggle() マウスイベント マウスがクリックされる毎に2つのイベントハンドラを切り替える。

操作

操作 オブジェクト 説明
addClass() class 属性 class 属性を要素に追加する。
hasClass() class 属性 与えられたclass 属性が要素に存在するかを返す。
removeClass() class 属性 class 属性を要素から削除する。
toggleClass() class 属性 class 属性を要素に追加, 削除する(交互に実施)。
clone() コピー 要素のディープコピーを行う。
wrap() 要素の追加 (囲み) 要素を指定した別の要素で囲む。
unwrap() 要素の追加 (囲み) wrap() の逆の操作を行う。
wrapAll() 要素の追加 (囲み) 要素群を指定した別の要素で囲む。
wrapInner() 要素の追加 (囲み) 要素群を指定した別の要素で個別に囲む。
append() 要素の追加 (内部) 要素の内部に別の要素を追加する。
appendTo() (内部) 要素の追加 要素の内部に別の要素を追加する。
html() 要素の追加 (内部) 要素内の HTML を取得する。あるいは設定する。
prepend() (内部) 要素の追加 要素の内部に別の要素を追加する。(既存の内容の前に追加)
prependTo() 要素の追加 (内部) 要素の内部に別の要素を追加する。(既存の内容の前に追加)
text() 要素の追加 (内部) 要素内部のテキストを得る。あるいは設定する。
after() 要素の追加 (外部) 要素の後に別の要素を追加する。
before() 要素の追加 (外部) 要素の前に別の要素を追加する。
insertAfter() 要素の追加 (外部) 要素の後に別の要素を追加する。
insertBefore() 要素の追加 (外部) 要素の前に別の要素を追加する。
detach() 要素の削除 要素を削除する。
empty() 要素の削除 子要素を削除する。
remove() 要素の削除 要素を削除する。
replaceAll() 要素の置換 マッチした要素を置換する。
replaceWith() 要素の置換 マッチした要素を用意した要素で置換する。
attr() 属性 属性を得る、または設定する。
prop() 属性 属性の値を得る、または設定する。
removeAttr() 属性 要素から属性を削除する。
removeProp() 属性 要素から属性を削除する。
val() 属性 value 属性の内容を得る、あるいは設定する。
css() スタイル CSS を得る、または設定する。
height() スタイル 要素の高さを得る、あるいは設定する。
innerHeight() スタイル 要素の境界やパディングを除く高さを得る、あるいは設定する。
innerWidth() スタイル 要素の境界やパディングを除く幅を得る、あるいは設定する。
offset() スタイル 要素の座標オフセットを得る。
outerHeight() スタイル 要素の境界線やパディングを含む高さを得る、あるいは設定する。
outerWidth() スタイル 要素の境界線やパディングを含む幅を得る、あるいは設定する。
position() スタイル 要素の位置を得る。
scrollLeft() スタイル 現在のスクロール位置を得る、あるいは設定する。
scrollTop() スタイル 現在のスクロール位置を得る、あるいは設定する。
width() スタイル 要素の幅を得る、あるいは設定する。
each() コレクション 要素のコレクションに対して操作を行う。
jQuery.param() コレクション Ajax 通信のパラメータを生成する。
data() データ マッチした要素のデータを取得する、あるいは設定する。
removeData() データ マッチした要素のデータを削除する。
get() DOM の操作 マッチした要素を取得する。
index() DOM の操作 マッチした要素を検索する。
size() DOM の操作 要素の数を得る。
toArray() DOM の操作 要素を配列にする。
context プロパティ HTML DOM ノードのコンテキスト
jquery プロパティ jQuery バージョン番号
length プロパティ jQuery オブジェクトの数
eq() フィルタ 現在マッチしている要素をインデックス番号でフィルタリング
filter() フィルタ セレクターや条件関数を指定して、マッチしている要素をフィルタリング
first() フィルタ 現在マッチしている要素の中で最初の要素だけを取り出す。
has() フィルタ 指定したセレクター、DOM要素を持つ要素のみを取得する。
is() フィルタ 要素の集合体が指定したセレクターにマッチしている、または指定した関数等の条件を満たしている場合にtrueを返す。
last() フィルタ 現在マッチしている要素の中で最後の要素だけを取り出す。
map() フィルタ マッチした要素それぞれに指定した関数を実行し、実行結果をまとめた新しいjQueryオブジェクトを生成して返す。
not() フィルタ マッチした要素集合から指定したセレクターや条件を満たす要素を除外する。
slice() フィルタ マッチした要素集合から、指定した部分を取り出す。
$.Callbacks コールバック コールバック関数を複数格納し、管理するためのリスト
add() コールバック コールバックのリストにコールバック関数またはその集合を追加
disbale() コールバック コールバックリストの実行を無効化
empty() コールバック コールバックリストを空にする。
fire() コールバック 引数を与えて、全てのコールバックリストに追加された関数を実行する。
fireWith() コールバック コンテキストと引数を与えて、全てのコールバックリストに追加された関数を実行する。
fired() コールバック コールバックが少なくとも一度呼ばれているかどうかを返す。
has() コールバック 指定した関数がコールバックリストに含まれているかどうかを返す。
lock() コールバック コールバックリストの現在の状態をロックして、変更させられないようにする。
locked() コールバック コールバックリストがロックされているかどうかを返す。
remove() コールバック コールバックリストに登録されている関数を指定して削除する。

jQuery でのくりかえし (each)

次のサンプルはフォームの背景色をシルバーにする。

$(document).ready(function() {
  $("#each_button").click(function() {
    $("form").each(function() {
      $(this).css("background-color", "silver");
    });
  });
});

下のような書き方もできる。

$(document).ready(function() {
  $("#each_button").click(function() {
    $.each($("form"), function() {
      $(this).css("background-color", "silver");
    });
  });
});

[Top] [サンプル]


コールバックの追加と削除

次のサンプルは $.Callbacks() でコールバックオブジェクトを作成して、そこにコールバック関数を追加して呼び出す例である。

$(document).ready(function() {
  var s;
  $("#fire").click(function() {
    // コールバック用(1)
    var func1 = function(msg) {
      alert(msg);
    }
    // コールバック用(2)
    var func2 = function(msg) {
      $("#fire_result").text(msg);
    }
    
    // コールバックを作成
    var callbacks = $.Callbacks();
    // 関数をコールバックに追加
    callbacks.add(func1);
    callbacks.add(func2);
    
    callbacks.fire("コールバック関数を呼び出す。" + $("#call_param").val());
  });
});

[Top] [サンプル]


クラスの追加と削除

次のサンプルは addClass(), removeClass() メソッドを使って要素のクラスを追加、削除する例である。

$(document).ready(function() {
  var s;
  
  // form1: addClass(),removeClass(),hasClass() のテスト
  $("#button1").click(function() {
     // form タグに "form-inline" クラスが設定されているか?
  if ($("form").hasClass("form-inline")) {
      // "form-inline" クラスを form タグから削除
      $("form").removeClass("form-inline");
      // "form-control" クラスを input タグから削除
      $("input").removeClass("form-control");
      // ボタンの表示文字列を "addClass()" に変更する。
      $("#button1").text("addClass()");
  }
    else {
      // form タグに "form-inline" クラスが設定されていない場合、"form-inline" クラスをform タグに追加する。
      $("form").addClass("form-inline");
      // "form-control" クラスを input タグに追加
      $("input").addClass("form-control");
      // ボタンの表示文字列を "removeClass()" に変更する。
      $("#button1").text("removeClass()");
    }
  });
});

[Top] [サンプル]


スタイルの設定と要素の表示・非表示

次のサンプルは div 要素にスタイルを設定し、表示、非表示する例である。

$(document).ready(function() {
  var s;
  $("#button2").click(function() {
    // 矩形とそのスタイルを定義
    $("#div2").css("width", "320");
    $("#div2").css("height", "160");
    $("#div2").css("border-style", "solid");
    $("#div2").css("border-width", "thin");
    $("#div2").css("border-color", "green");
    $("#div2").css("background-color", "lightgreen");
    $("#div2").css("text-align", "center");
    // 矩形内に表示する文字列を定義する。
    s = "<span style='font-size:larger;color:blue;'>div2: (";
    s += $("#div2").width().toString();
    s += ", ";
    s += $("#div2").height().toString();
    s += ")</span>";
    // 矩形内に文字列を表示する。
    $("#div2").html(s);
  });
  
  $("#button2s").click(function() {
    $("#div2").show();
  });
  
  $("#button2h").click(function() {
    $("#div2").hide();
  });
});

[Top] [サンプル]


表の行の背景色を交互に変える例

下の例はセレクタの指定により表の行の背景色を交互に変更する例である。

$(document).ready(function() {
  $("#table01 th").css("background-color", "silver");
  $("#table01 th").css("text-align", "center");
  $("#table01 tr:even").css("background-color", "#e0e0e0");
});

[Top] [サンプル]


要素の HTML を文字列として置換する

次の例は要素の HTML を文字列として置換する例である。

$(document).ready(function() {
  $("#button4").click(function() {
    $("#form4 li").replaceWith("
  • ????
  • "); }); });

    [Top] [サンプル]


    要素にデータをひもづける

    次の例は要素にデータをひもづける例である。

    $(document).ready(function() {
      // set
      $("#button_data1").click(function() {
         var li = "#L0" + $("#data_text1").val();
         var s = $("#data_text2").val();
         $(li).data("x", s);
         alert(li + " = " + s);
      });
      // show
      $("#button_data2").click(function() {
         var li = "#L0" + $("#data_text1").val();
         var s = $(li).data("x");
         $(li).text(s);
      });
    });

    [Top] [サンプル]


    フォームの子要素を列挙する

    次の例はセレクタを使ってフォームに含まれる要素を列挙する例である。

    $(document).ready(function() {
      $("#button6").click(function() {
        var n = $("#form6").children().length;
        var s = "";
        for (i = 1; i <= n; i++) {
          s += $("#form6 :nth-child(" + i +")").attr("id");
          s += ", ";
        }
        n = $("#div6").children().length;
        for (i = 1; i <= n; i++) {
          s += $("#div6 :nth-child(" + i +")").attr("id");
          s += ", ";
        }
        $("#result6").text(s);
      });
    });

    [Top] [サンプル]


    画像のフェードイン、アウト

    次の例は画像のフェードイン、フェードアウトを行う例である。

    $(document).ready(function() {
      $("#fadeIn").click(function() {
        $("#image7").fadeIn(1000, function() {
          $("#message7").text("fadeIn");
        });
      });
      $("#fadeOut").click(function() {
        $("#image7").fadeOut(1000, function() {
          $("#message7").text("fadeOut");
        });
      });
    });

    [Top] [サンプル]


     

     


     このページの先頭

     開設 2014年12月   著作権 2014-2015 bonk.red  連絡先: こちらからメッセージを送ってください。 (お仕事も大募集)

     このページの先頭へ..