Cat Paw Software

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== jQuery ======
[[http://jquery.com/|jQuery]]は、メソッドチェインでDOM、Ajax操作を簡単に行えるようにするJavaScriptライブラリ。

  * [[jquery:plugin|jQuery Plugin]]
  * [[jquery:cdn|jQueryの配布]]



===== jQueryオブジェクトの取得 =====
すべてはここから
  $(DOMエレメント)
  $("CSSセレクタ")
例
  $(document.body);
  $("div, #hoge, p.fuga");

[[http://docs.jquery.com/Selectors|セレクタ]]


===== イベントの設定 =====
class="hoge"のAタグにclickイベントを設定。
<code javascript>
$(function(){ 
  $("a.hoge").click(
    function(event) {
      window.alert("クリック");
      event.preventDefault();
    }
  );
});
</code>
ページロードが完了したら関数を実行
  $(関数)
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");
  })
としてイベント実行時の操作を行う。





===== DOMエレメントの取得 =====
class="hoge" な 全てのDOMエレメントノードの**リスト**を取得、
  $(".hoge").get()
最初の要素だけ取得するならば
  $("a.hoge").get(0) 
以下はgetElementById("hogehogeId")と同じ処理
  $("#hogehogeId").get(0) 

===== フォームとか =====
フォームの選択
<code javascript>
$("input:text")
$(":text")
</code>
両者ともtextフィールドを選択するセレクタだが、明示的にinputと書く上の方が速いのでオススメらしい。

==== valueの設定と現在の値の取得 ====
<code javascript>
// get
$("#a_input_or_select").val();

// set
$("#a_input_or_select").val("hogehoge");
</code>

==== クリックすると自身のフォームのチェックボックスをすべてオンにするボタン ====
<code javascript>
$("#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); });
</code>

==== クリックするボタンによってフォーム送信先を変える ====
<code javascript>
$("#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(); } );
</code>

こっちの方がスマートかも
<code javascript>
$("#a_button_to_delete").click( function(){ $(this.form).attr("action", "delete").get(0).submit(); } );
</code>

==== value値がhogehogeであるラジオボタンを選択状態にする。 ====
<code javascript>
$("input[name=radioButtonName]").filter(function(){ return ($(this).val() == "hogehoge") }).attr("checked", true);
</code>

==== value値がhogehogeであるプルダウンのoptionを選択状態にする ====
<code javascript>
$("select").val("hogehoge");
</code>

==== textフィールドのenter/returnによるsubmit抑止 ====
<code javascript>
$("input:text").keydown(function(event){ if(event.keyCode ==  13) event.preventDefault(); });
</code>
==== 入力値のクリア ====
もっと上手い方法ありそう
<code javascript>
$("input:text").val("");
$("textarea").val("");
$("select").attr("selectedIndex", 0);
$("input:checked").attr("checked", false);
$("input:radio").attr("checked", false);
</code>