jQueryは、メソッドチェインでDOM、Ajax操作を簡単に行えるようにするJavaScriptライブラリ。

• jQuery Plugin
• jQueryの配布

すべてはここから

$(DOMエレメント)
$("CSSセレクタ")

例

$(document.body);
$("div, #hoge, p.fuga");

セレクタ

class=“hoge”のAタグにclickイベントを設定。

$(function(){ 
  $("a.hoge").click(
    function(event) {
      window.alert("クリック");
      event.preventDefault();
    }
  );
});

ページロードが完了したら関数を実行

$(関数)

class=“hoge” な a のDOMエレメントノードを保持しているjQueryオブジェクトを取得

$("a.hoge")

上記のjQueryオブジェクトが保持しているエレメントノードに対してonclickイベントを設定

$("a.hoge").click(関数)

この場合$(“a.hoge”)で取れる要素が複数でも単数でも同じ。

eventはjQueryイベント。クロスブラウザ対応でIEでもDOM Eventのプロパティ、メソッドを使えるようにする。

event.preventDefault();
event.stopPropagation();
event.target

イベントが発生した要素の取得

$("div").hover(function(ev) {
   ev.target;
   // または
   this;
});

thisやtargetは、ただのDOM要素なので…

$("div").hover(function(ev) {
   $(ev.target).css("color", "#FF0000");
   $(this).css("color", "#FF0000");
})

としてイベント実行時の操作を行う。

class=“hoge” な 全てのDOMエレメントノードのリストを取得、

$(".hoge").get()

最初の要素だけ取得するならば

$("a.hoge").get(0) 

以下はgetElementById(“hogehogeId”)と同じ処理

$("#hogehogeId").get(0) 

フォームの選択

$("input:text")
$(":text")

両者ともtextフィールドを選択するセレクタだが、明示的にinputと書く上の方が速いのでオススメらしい。

// get
$("#a_input_or_select").val();
 
// set
$("#a_input_or_select").val("hogehoge");

$("#a_button_to_check_all").click( funtion(){ $(this).parents("form").find(":chekcbox").attr("checked", true); });
$("#a_button_to_uncheck_all").click( funtion(){ $(this).parents("form").find(":checkbox").attr("checked", false); });

$("#a_button_to_delete").click( function(){ $(this).parents("form").attr("action", "delete").get(0).submit(); } );
$("#a_button_to_update").click( function(){ $(this).parents("form").attr("action", "update").get(0).submit(); } );

こっちの方がスマートかも

$("#a_button_to_delete").click( function(){ $(this.form).attr("action", "delete").get(0).submit(); } );

$("input[name=radioButtonName]").filter(function(){ return ($(this).val() == "hogehoge") }).attr("checked", true);

$("select").val("hogehoge");

$("input:text").keydown(function(event){ if(event.keyCode ==  13) event.preventDefault(); });

もっと上手い方法ありそう

$("input:text").val("");
$("textarea").val("");
$("select").attr("selectedIndex", 0);
$("input:checked").attr("checked", false);
$("input:radio").attr("checked", false);