Home＞ Design＞ Archives＞ javascript＞ jQuery＞ jQueryのサンプル基本（関数）

jQueryのサンプル基本（関数）

編集
2007年7月 8日

INDEX

目次を作成中です...

$()関数

ID指定

#を先頭に付けることでID指定。処理速度も高速。

alert(  $("#target_id").html()  );

該当するタグが複数ある場合，複数のオブジェクトが選択。
.html() メソッドは、最初のオブジェクトのHTMLコードを表示。
複数のオブジェクトに同時に効果を加えるメソッドもある。

classによる指定

タグの種類による指定と兼用も可能。

alert(  $(".run").html()  );

alert(  $("pre.run").html()  );

htmlタグの指定

$("pre").addClass("background_red");

$("pre").removeClass("background_red");

チェインの指定

多くのメソッドはjQueryオブジェクトを返す。複数の操作を続けて指定することが可能。このブロックが#target_chain

$("#target_chain").css("background-color", "#fff0ff")
	.fadeOut("slow");

$("#target_chain").css("background-color", "#efffff")
	.fadeIn("slow");

$(function(){})

jQueryでは，HTMLが読み込み終わった後に実行するコードをonload ではなく、$(function(){}) を利用して実行。onload の場合は，ページの全ての画像が読み込まれるまで実行されないが、$(function(){}) はHTMLドキュメントの準備が出来た段階で実行される。また、複数回指定することも可能

$(function(){
    // HTMLロード後に実行したい初期化コード
});

この記述は，$(document) に対する .ready() メソッドと同じ。以前のバージョンでは，$(function(){}) は無く，ready() メソッドを使用していた。

$(document).ready(function(){
    // HTMLロード後に実行したい初期化コード
});

click()

onclick イベントを設定。function() の中で，clickメソッドを使ってイベントを設定するることで、HTMLコードの中からJavaScriptコードを分離できる。同様に、sumbit，focus 等のメソッドもある。

// JavaScriptコード部分
<script type="text/javascript">
$(function(){
    $("#popup_alert").click(function(){
        alert(  "popup"  );
        return false;
    });
});
</script>
</head>
<body>
// HTML部分
<a href="" id="popup_alert">alertポップアップ</a>

alertポップアップ

カテゴリ

タグ

jQuery

Entries of this Category

jQuery/JSONP/ABROAD01 Others/addrajax Others/ajaxzip jQuery/BlockUI Case Study Code jQuery/Corner mootools/Fancyform Others/faviconapi jQuery/Flash Highslide JS jQuery/Innerfade jQuery jQuery/JSONP jQuery/Media mootools jQuery/NewsSlider Others jQuery/Pager Others/Reflection jQuery/Superfish jQuery/TableSorter Others/table_sortable jQuery/Tabs jQuery/ThickBox YUI/TreeView YUI

透明レイヤー表示｜ javascript｜ jQuery Tips