jQueryなどについて今日調べたこと
jQueryなどについて今日調べたこと
http://docs.jquery.com/Downloading_jQueryからCurrent Release(1.5.2)のMinifiedをダウンロード。
jQueryは通常単一のJavaScriptファイルとして存在し、その中に全ての共通DOM、イベント、エフェクト、Ajax関数が含まれている。次のようなマークアップを使って、任意のWebページにこれを含めることができる。(http://ja.wikipedia.org/wiki/JQuery)
http://docs.jquery.com/How_jQuery_Worksにしたがって、jQueryを実際に試していく。
$(document).ready(function(){
ページを読み込んだ直後(DOMの構築が完了した直後)に実行する処理を書く。
$(function(){ と短縮して書くことも可能である。
$("a").click(
a要素にクリックハンドラをセットする
$("a").addClass(
a要素にCSSのクラスを追加する
event.preventDefault();
クリックなどのイベント発生時に行われる動作(ページ移動など)が行われないようにする。
$(this).hide("slow");
イベントを受けた要素をゆっくりと非表示にする。
http://docs.jquery.com/Frequently_Asked_Questionsからの抜粋
フォーム要素のdisable/enableを切り替えるには、disabled属性を動的に追加削除する。
チェックボックスを動的にオンオフする際には、checked属性を動的に追加削除する。
選択されたオプションの値を取得するには、$('#myselect').val()を使用する。ここで、myselectはselect要素のID。オプションのテキストを取得するには、$('#myselect option:selected').text()を使用する。
マウスホバー時にサブメニューをアニメーションとともに表示させる例(http://docs.jquery.com/Cookbook/Navigation)
タブのように、選択されたブロックだけを表示する例。ハッシュを使い、ブックマーク対応可にしているが、ブラウザの戻る・進むボタンだと画面は切り替わらない。再表示させると切り替わる。(http://code.enure.net/Hide-All-Except-One/)
JavaScriptのwindowには、プロパティを独自に追加することができる。また、windowのプロパティにはwindow.を付けなくても、アクセスすることができる。jQueryのメインオブジェクトは、内部的には以下のように宣言されている。(http://www.authenticsociety.com/blog/jQueryPluginTutorial_Beginner)
var jQuery = window.jQuery = window.$ = function(selector, context)
{
// ...
// other internal initialization code goes here
};
jQueryには要素選択のメソッドが豊富に用意されているので、自分でdocument.getElementById を書く必要はない。
(function($){ ... })(jQuery);というコードは、定義した匿名関数を即座に実行している。$が別のフレームワークでjQuery以外を参照しているかもしれないので、そのような呼び出し方をしている。
remoteクラスのa要素に、ロードのイベントハンドラを追加するサンプル。ロード結果に含まれるリンクに対してもイベントハンドラが追加されるようにしている。(http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery)
function addClickHandlers() {
$("a.remote", this).click(function() {
$("#target").load(this.href, addClickHandlers);
});
}
$(document).ready(addClickHandlers);
jQuery UIプラグインを使うと、簡単にアコーディオンメニューが実装できる。(http://michaeljacobdavis.com/tutorials/statesavingaccordion.html)