jQuery適当メモ

[ｊＱｕｅｒｙ日本語リファレンス]
http://semooh.jp/jquery/cont/doc/release_1.3/

(1)ダウンロード
ダウンロードは以下から
[jQuery]
http://jquery.com/

開発用の非圧縮用と、公開用（？）圧縮されたライブラリが用意されいる。
試したときのバージョンは1.3.1

2)コアライブラリの読み込みと読み込み完了の関数実行

HTMLに以下を記載(srcの部分は環境に合わせて）
<pre>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script>
 jQuery.noConflict();
 jQuery(document).ready(function(){
  //実行したい内容を記載<br />}
</script>
</pre>
jQuery.noConflict()は他のライブラリを意識する場合に記述する。
記述すると、$のショートカット(?)は無効になるので、jQuery()の記述だけが利用できることになる。
prototype.jsと同時に使わなければ意識する必要なないようです。
以下のように戻り値を受け取ると、宣言した変数が$の代わりに使える。

　　　var j = jQuery.noConflict();

$は短くていいけど、個人的な趣味で以下はjQuery.xxxで書いておきます。

jQuery(document).ready(function(){})
はブラウザがＤＯＭを構成し終わった後に起動する関数オブジェクトを指定する。
いくつも重ねて書いてもいいようです。

(3)要素の指定方法

$(".クラス名");
$("タグ名");
$("#ID名");

(4)個人的に良く使いそうなメソッド

要素.addClass();//クラス追加
要素.removeClass();//クラス除外
要素.toggleClass(class)//要素に対し、指定CSSクラスがあれば削除し、無ければ追加する。

要素.html();//HTMLの取得/設定
要素.val();//value属性の取得/設定


(5)個人的に良くお世話になりそうなイベント

//クリックイベント
要素.click();

//要素にマウスが乗った時の動作イベント。
//overがマウスが乗った時、outが外れた時に呼び出す関数オブジェクトを指定する。
要素.hover(over, out);

(6)DOMの構成が終わった後のイベントに処理を追加

　$(document).ready(関数オブジェクト);

　or

$(関数オブジェクト);


例)読み込み直後にアラートを表示する例
$(document).ready(
function() {
  alert("jQuery START!!");
}
);

(7)選択済みラジオボタンのバリューを取得
未調査

(8)選択済みリストのバリューを取得
        //IDで指定
        var fid=jQuery('#ターゲット').val();
        //イベント処理を記述しているときなど
        var fid=jQuery(this).val();

        // 複数の要素が選択済みの可能性がある場合は、配列が帰ってくる
        var sel=jQuery("select option:selected");
        var fid=sel.val();


(9)リスト変更イベントに関数を登録
  jQuery("#ターゲット").change(関数オブジェクト);

(10)特定CSSクラスのエリアにマウスオーバーイベントに関数を登録

(11)データの書換え：直接
$(ターゲット).text();//テキストとして、（タグはそのまま表示される)
$(ターゲット).html();//HTMLとして(タグはきちんと解釈される）


(12)データの書換え：dom操作で
$(タゲット).before(要素);//同列で次に追加
$(ターゲット).after(要素);//同列で前に追加
$(ターゲット).prepend(要素);//子要素の最後に追加
$(ターゲット).append(要素);//子要素の最後に追加
$(ターゲット).empty(要素);//子要素をすべて削除
$(ターゲット).remove(要素);//ターゲット自体を削除

  要素：jQuery("<div>") とするとタグ名で指定できる
  　　　単純にテキストで記述してもOK

  //テキスト記述
  $("#hoge").append('<a href="http://www.google.com/">google</a>');
  //エレメント表記
  $("#hoge").append(
                $('<a>').attr("href", "http://www.google.com").html("google")
             );

(13)属性の操作
jQuery(":submit").attr("disabled", "disabled");//無効化
jQuery(":submit").removeAttr("disabled");//無効化解除