jQuery 命令・イベント一覧

（１）DOMセレクタ（要素セレクト）

$("要素")

要素は文字列で指定します！

ただし、以下の２つは例外です。

$(document)
$(this)

idに一致

$("#sample")

classに一致

$(".sample")

HTMLタグに一致

$("span")　←　すべての<span>を選択

複数の要素指定

$("#link1,#link2")　←　何個でも指定可能

特定の要素内要素

$("ul a")　←　ul要素の子孫のa要素

（２－１）指定した要素への命令・指定した要素の情報取得

属性変更・取得（attrメソッド）

＜img id="hoge" src="img/pencil.jpg" alt="鉛筆" /＞

src属性を変更

$("#hoge").attr("src","img/school.jpg");

src属性を取得

var filename = $("#hoge").attr("src");

Value属性変更・取得（valメソッド）

＜input id="hoge" name="names" value="ローラーヒーロームテキング" /＞

属性valueを変更

$("#hoge").val("クロダコブラザーズ");

属性valueを取得

var data = $("#hoge").val();

CSSスタイル変更・取得（cssメソッド）

＜div id="hoge"＞無限大な夢のあとの　何もない世の中じゃ＜/div＞

CSSを変更

$("#hoge").css("color","#00FF88");

CSS情報を取得

var col = $("#hoge").css("color");

HTML変更・取得（htmlメソッド）

＜div id="hoge"＞<b><p>あ<b>い</b>う</p>えお</b>＜/div＞

HTMLを変更

$("#hoge").html("<p>内容<b>・</b>内容<br />");

HTMLを取得

var kashi = $("#hoge").html();

テキスト変更・取得（textメソッド）

＜div id="hoge"＞<b>あいうえお</b>＜/div＞

テキストを変更

$("#hoge").text("内容です");

テキストを取得

var kashi = $("#hoge").text();

（２－２）指定した要素の表示・非表示（演出）

要素を表示（showメソッド）

$("#hoge").show();
$("#hoge").show("slow");
$("#hoge").show("normal");
$("#hoge").show("fast");
$("#hoge").show(1500);  // 1.5秒かけて表示

要素を非表示（hideメソッド）

$("#hoge").hide();
$("#hoge").hide("slow");
$("#hoge").hide("normal");
$("#hoge").hide("fast");
$("#hoge").hide(1500);  // 1.5秒かけて非表示

要素をスライドさせて表示（slideDownメソッド）

$("#hoge").slideDown();
$("#hoge").slideDown("slow");
$("#hoge").slideDown("normal");
$("#hoge").slideDown("fast");
$("#hoge").slideDown(1500);

要素をスライドさせて非表示（slideUpメソッド）

$("#hoge").slideUp();
$("#hoge").slideUp("slow");
$("#hoge").slideUp("normal");
$("#hoge").slideUp("fast");
$("#hoge").slideUp(1500);

要素をフェードイン（fadeInメソッド）

$("#hoge").fadeIn();
$("#hoge").fadeIn("slow");
$("#hoge").fadeIn("normal");
$("#hoge").fadeIn("fast");
$("#hoge").fadeIn(1500);

要素をフェードアウト（fadeOutメソッド）

$("#hoge").fadeOut();
$("#hoge").fadeOut("slow");
$("#hoge").fadeOut("normal");
$("#hoge").fadeOut("fast");
$("#hoge").fadeOut(1500);

透明度変化（fadeToメソッド）

33%の透明度へ変化

$("#hoge").fadeTo("slow",0.33);
$("#hoge").fadeTo("normal",0.33);
$("#hoge").fadeTo("fast",0.33);
$("#hoge").fadeTo(1500,0.33);

（３）イベント設定

すべての要素がブラウザに読み込まれたら実行

$(document).ready(function(ev){
	/* 実行内容 */
});

イベントの設定は、 $(document).ready(関数)イベント内で行います。（イベント定義内イベント定義）

$(関数) という省略した書き方ができます。

$(function(){
	/* ★jQueryのイベント設定はここで行う */
});

クリック

$("要素").click(function(ev){
	/* 実行内容 */
});

ダブルクリック

$("要素").dblclick(function(ev){
	/* 実行内容 */
});

マウス移動

$("要素").mousemove(function(ev){
	/* 実行内容 */
});

マウスオーバー

$("要素").mouseover(function(ev){
	/* 実行内容 */
});

マウスダウン

$("要素").mousedown(function(ev){
	/* 実行内容 */
});

マウスアップ

$("要素").mouseup(function(ev){
	/* 実行内容 */
});

クリックされるごとに交互に処理

$("要素").toggle(function(){
	/* 実行内容1 */
}, function(){
	/* 実行内容2 */
});

select で選択肢が変更された時やフォームに入力された内容が変更

$("要素").change(function(ev){
	/* 実行内容 */
});

フォームのテキスト(文字列)が選択

$("要素").select(function(ev){
	/* 実行内容 */
});

送信ボタンがクリック

$("要素").submit(function(ev){
	/* 実行内容 */
});

定期実行タイマー（要：jQuery Timers プラグイン）

$(要素).everyTime(5000, function(cnt) {
	/* 実行内容 */
});

jQueryのHTML雛形

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
<!--
/* グローバル変数・関数定義 */

$(function(){

   /* jQueryイベント設定 */

}); 
-->
</script>
</head>
<body>
<!-- CONTENTS -->
</body>
</html>