jQueryメモ - 闘うITエンジニアの覚え書き

《関連》

• JavaScriptメモ
• jQuery Mobile を使用してスマホサイト構築
• jQueryプラグインの作り方

要素の取得 †

以下の用にCSSセレクタを指定して要素を取得できる。
※ここではCSSセレクタについては記載しない。（ CSSセレクタ 等を参照。）

// id や class タグ名等を指定して要素を取得する
$("#hoge");       // id=hoge の要素を取得
$(".hoge");        // class=hoge の要素を取得
$("p");               // pタグの要素を取得

// 複数の要素が取得できる場合は size() で要素の数を取得する事ができる。
$(".hoge").size();

// 複数の要素が取得できる場合、eq や get を使用して n 番目の要素を取得する事ができる。
$(".hoge").eq(0);        // class=hoge である1番目の要素を取得する(取得できるのはjQueryオブジェクト)
$(".hoge").get(0);       // class=hoge である1番目の要素を取得する(取得できるのは素のHTMLオブジェクト)

// 複数の要素が取得できる場合、each を使用して全ての要素に対して処理を行う事ができる。
$("p").each(function(){
  console.log($(this).text());     // 全てのpタグの中身をコンソールに出力する。
});

前後や親子要素の取得 †

// 親要素の取得
$("#hoge").parents("div");     // id=hoge の親のdiv要素を取得する

// 直下の子要素の取得
$("#hoge").children("div");    // id=hoge の直下の全てのdiv要素を取得する

// 子要素の取得
$("#hoge").find("div");    // id=hoge の配下に存在する全てのdiv要素を取得する

// 前の要素を取得する
$("#hoge").prev();                 // id=hoge の前の要素を取得
$("#hoge").prev("div");          // id=hoge の前の div 要素を取得

// 後ろの要素を取得する
$("#hoge").next();                 // id=hoge の次の要素を取得
$("#hoge").next("div");          // id=hoge の次の div 要素を取得

要素に対する操作 †

// 要素の表示/非表示の切り替え
$("#hoge").hide();              // id=hoge を非表示にする（ style="display:none" が追加される ）
$("#hoge").show();             // id=hoge を表示する（ style="display:block" が追加される ）
$("#hoge").toggle();           // id=hoge を表示/非表示状態を変更する（表示されているものは非表示に、非表示のものは表示に）

// 要素の中身を取得
$("#hoge").text();             // id=hoge の中身を取得
$("#hoge").html();            // id=hoge の中身(html)を取得 

// 要素の中身を変更
$("#hoge").text("TEST!!");             // id=hoge の中身を変更する

// 要素にclass属性を追加
$("#hoge").addClass("test1");       // id=hoge の要素の class に test1 を追加する

// 要素からclass属性を削除
$("#hoge").removeClass("test1");  // id=hoge の要素の class から test1 を削除する

// 要素のclass属性を追加/削除
$("#hoge").toggleClass("test1");   // id=hoge の要素の class に test1 を追加/削除する(無ければ追加、有れば削除)

// 要素の属性を変更する
$("#hoge").prop("disabled", true);   // id=hoge に disabled 属性を追加
$("input[type=checkbox]").prop("checked", true);   // 全てのチェックボックスをチェック状態にする

// 要素の属性を取得する
$("input[type=text]").eq(0).attr("id");          // 1つ目のテキストボックスのidを取得する
$("input[type=text]").eq(1).attr("name");    // 2つ目のテキストボックスのnameを取得する

入力要素の値の取得 †

$("input[type=text]").eq(0).val();                                      // 1つ目のテキストボックスの入力値を取得する
$("select").eq(0).val();                                                      // 1つ目のselect の選択値を取得する
$("input[type=checkbox]").eq(0).prop("checked");           // 1つ目のチェックボックスをチェック状態を取得する
$("input[type=checkbox]:checked").eq(0).val();               // チェックされている1つ目のチェックボックスの値を取得する
$(".hoge:checked").eq(0).val();                                        // class=hogeのチェックボックスでチェックされている1つ目の値を取得する
$("input[type=radio]:checked").eq(0).val();                      // チェックされている1つ目のラジオボタンの値を取得する
$("[name=hoge]:checked").val();                                     // name=hogeのラジオボタンのチェックされている値を取得する

イベントの補足 †

ページ読み込み時のイベント(DOMツリー構築前)

$(function(){

  // ページ読み込み時に行う処理を記述

});

ページ読み込み時のイベント(DOMツリー構築後)

$(document).ready(function(){

  // ページ読み込み時に行う処理を記述

});

クリック時のイベント補足
※この書き方は jQuery 1.7 以前の bind と等価。

$(document).ready(function(){

  // id=hogeの要素がクリックされた時の処理
  $("#hoge").on("click", function(){
      // ここにクリック時に行う処理を記述
  });

});

ただし、上記の記述では動的に追加した要素に対するイベント補足が行えない。
将来的に動的に追加される要素も含めてイベント補足したい場合は、以下のように記述する。
※この書き方は jQuery 1.7 以前の live と等価。

$(document).on("click", "#hoge", function(){
  // ここにクリック時に行う処理を記述
});

jQuery 1.7 以前の delegate と等価な書き方は以下のように記述する。

$(document).ready(function(){

  // id=fuga 配下にある id=hogeの要素がクリックされた時の処理
  $("#fuga").on("click", "#hoge", function(){
      // ここにクリック時に行う処理を記述
  });

});

この記述であれば、ページ読み込み時に #fuga が有りさえすれば、
後から動的に #hoge を追加した場合でもイベント補足ができる。

覚え書き †

$('#iframe1').contents().find('#content').append("TEST");