■基本構文
[1-0] 構文（参考程度で）
jQuery(セレクター).イベント(function () { // 処理内容 } * セレクター : 操作する要素を指定する(後述「■セレクターについて」参照) * イベント : 操作タイミング(click、dblclick、mousedown、mouseup、mouseover、mouseout、mousemove、toggleなど)
[1-1] 構文(省略形)
* 一般的にはこちらを使う$(セレクター).イベント(function () { // 処理内容 } # 'jQuery' => '$' に変わっただけ
[2-1] 構文(readyイベントの省略構文)
jQuery(document).ready(function () { /* 略 */ }); => $(function(){ /* 略 */ }); ※readyイベント：DOMが全てロードされてDOMにアクセスできる準備が出来た時点のイベント
注意
http://semooh.jp/jquery/api/events/ready/fn/より抜粋 * この関数を使う場合、bodyのonloadイベントには何も書かないようにしてください
■セレクターについて
http://jquery-master.net/selectors/が参考になる
[1]IDセレクター (ID指定)
$("#【任意の文字列】")
* 「id="【任意の文字列】"の属性」が対象
例
$("#aaa").append("id='aaa'");
[2]クラスセレクター (クラス指定)
$(".【任意の文字列】")
* 「class="【任意の文字列】"の属性」が対象
例
$(".aaa").append("class='aaa'");
[3] 要素セレクター(タグ指定)
$("【任意のタグ名】")
* 「ドキュメント内の全てのタグ要素」が対象
例
$("p").html("ドキュメント内の全てのp要素");
[4] 属性セレクター
$("[属性名=属性値]")
* 「指定した「属性名」の値が、「属性値」の要素」が対象
例
$("input[type="checkbox"]:checked").css("background-color", "red");
[5] グループセレクター(複数指定/or選択）
$("【任意のタグ名1】, 【任意のタグ名2】, ...")
* 「ドキュメント内の全てのタグ名1, タグ名2」が対象
例
$("h3, h4").html("h3, h4タグが対象");
[6] ユニバーサルセレクター(全要素指定)
$("*")
例
$("＊").html("全要素が対象");
[7] 複合指定
■タグ+ID
$("【任意のタグ名】#【任意の文字列】")
* 「id="【任意の文字列]"の属性を持つタグ名」が対象
■タグ+クラス
$("【任意のタグ名】.【任意の文字列】")
* 「class="【任意の文字列]"の属性を持つタグ名」が対象
例
$("h2#aaa").html("id='aaa'のh2要素");
$("h1.aaa").html("class='aaa'のh1要素");
■主なメソッド
html/text
* 該当箇所の中身のHTML/テキストを差し替える
例
$("#sample1").html("<span class='red'>Hello World!</span>");
$("#sample2").text("書き換える");
append
* 該当箇所の中身のテキストに追加する
例
$("#sample").append("この文字列を書き足す");
val
* 値の取得と設定
例
$("input[name='samplename']").val("HelloWorld");
var value = $("input[class='sampleclass']:radio").val();
attr / removeAttr / prop
* attr => 要素の属性を取得／設定する * removeAttr => 要素の属性を削除する * prop => 要素のプロパティを取得／設定する
例
// 非活性
$('#btnRed').attr("disabled", "disabled");
// 活性
$('#btnBlack').removeAttr("disabled");
// 非活性
$("#btnRed").prop("disabled", true);
// 活性
$("#btnBlack").prop("disabled", false);
css / addClass / removeClass / toggleClass
* css => 該当箇所のCSSを差し替える * addClass / removeClass => class属性を追加/削除 * toggleClass => class属性が設定されていれば削除、無ければ追加
例
$("span#sample").css('color', 'Red');
$("span").addClass('samplecss');
$("p").removeClass('samplecss');
$('div').toggleClass('.samplecss');
サンプル
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <script src="">http://code.jquery.com/jquery-1.10.1.min.js"> <style TYPE="text/css"> .red { color: red; } .black { color: black; } </style> </head> <body> <input id="btnRed" type="button" value="Red" /> <input id="btnBlack" type="button" value="Black" /> <label id="message">Here</label> <script type="text/javascript"> $(document).ready(function() { $("#btnRed").click(function(){ $("#message").removeClass('black'); $("#message").addClass('red'); }); $("#btnBlack").click(function(){ $("#message").removeClass('red'); $("#message").addClass('black'); }); }); </script> </body> </html>
参考文献
http://blog.webcreativepark.net/2010/02/02-111519.htmlhttp://ascii.jp/elem/000/000/498/498710/
http://www.it-tips.info/jquery/basis/
http://www.ezgate-mt.sakura.ne.jp/jquery/159.html
