how_to_javascript_memo - TatenoSystem Wiki

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"＞<p>あ<b>い</b>う</p>えお＜/div＞

HTMLを変更

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

HTMLを取得
```
var kashi = $("#hoge").html();
```

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

＜div id="hoge"＞あいうえお＜/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="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="JavaScript">
<!--
/* グローバル変数・関数定義 */

// == DOM Loaded Event ==
$(function(){

   /* jQueryイベント設定 */

}); // -- End of DOM Loaded Event

-->
</script>
</head>
<body>

</body>
</html>

　

Last-modified: 2011-01-11 (火) 13:51:10 (408d)