jQuery 命令・イベント一覧

(1)DOMセレクタ(要素セレクト)

$("要素")

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

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

  • $(document)
  • $(this)

idに一致

$("#sample")

classに一致

$(".sample")

HTMLタグに一致

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

複数の要素指定

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

特定の要素内要素

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

 

(2-1)指定した要素への命令・指定した要素の情報取得

属性変更・取得(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();

 

(2-2)指定した要素の表示・非表示(演出)

要素を表示(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);

(3)イベント設定

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

$(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>