404 motivation not found | t_ishidaのブログ

2月/09

26

JQuery

JQuery入門

のうがき

prototype.jsを使って重さに泣いて以来、「JavaScriptはスクラッチから書く」に限るの時代が続いていましたが、次回案件の調査に引っかけてJQueryに入門してみました。そのメモをここに残しておきます。

概要

JQueryとは身も蓋も無い言い方をすれば、JavaScriptのフレームワークです。特徴としては以下。

  • グローバル,prototypeの汚染を極力避けている
  • クロスブラウザ
  • 軽い

いずれも有り難いのですが、特に有り難いのが、グローバルやprototypeの汚染を避けてくれるところです。例えば、prototype.js派の人もスクラッチ派の人も、こんな書き方しますよね?

[1,2,3,4,5,6].each( function(x){
	document.write( x );
});

これは実装の仕方によるとは思いますが、

Array.prototype.each = function( f ){
  for(var i = 0, l = this.length; i < l; i++ ) f( this[i] );
}

とか、

function $A( obj ){
  obj.each = function(){
    for(var i = 0, l = this.length; i < l; i++ ) f( this[i] );
  }
}

とかやってるんだと思います。JQueryはこういう事を避けてグローバルな名前空間は"$"と"JQuery"しか汚染していませんし、prorotypeも汚しません。なので、他のライブラリ群と、ほとんど干渉せずに使用する事が出来ます($が干渉する可能性は高いですが、これも回避する方法が有りませす)

JQueryの基本的な仕組みとしては以下です。
x

  1. $('.class')でDOMを検索する
  2. JQueryオブジェクト.eachでDOMを走査する
  3. JQueryオブジェクトのメソッドで、DOMを操作する

以上です。

//
// idと言うidの振られているelementにonclickを追加する
//
$('#id').click( function(){
	$(this).text( 'clicked' );
	ev.stopPropagation();
});

//
// classと言うクラスの振られているelement全部に対してonclickを追加する
//
$('.class').each( function(){
	// thisは現在回しているelement, $にthisを渡しているのは
	// elementをJQueryオブジェクトに格納して、
	// dom操作を楽にしたいから
	$(this).click( function( ev ){
		$(this).text('clicked');
		ev.stopPropagation();
	});
});
///
/// 実は上のコードは以下と等価です
///
$('.class').click( function( ev ){
  $(this).text('clicked');
  ev.stopPropagation();
});

$について

"$"は、JQuery関数(コンストラクタ)のショートカットです。基本中の基本です。これから始めて、DOMを走査して操作して、動きの有るページを作っていきます。

$は以下の引数をオーバーロードしています。

$( '[selector]'[, element])
[selector]はCSSセレクタ(後述)の文字列です。"#id"とか".class"とかです。CSSセクレタの検索結果をJQeuryオブジェクトに格納して返します。elementを渡せば、その下位のDOMから探します。
$(element)
elementそのものをJQueryオブジェクトに格納して返します。
$( function(){} )
window.onloadの短縮系

本当は$(html)も有るんですが使った事無いので、割愛させて下さい。

CSSセレクタ

CSSの指定に使用する書式を利用して、DOMのelementを選択する仕組みです。$('selector')のように、$の引数として渡す文字列として使用します。DSL(domain specific language)みたいなものだと思ってください。

#id
getElementByIdです。対象のIDと一致するelementを選択する
.class
getElementsByClassNameです。対象のクラス名と一致するelementを選択する(複数)
tagName
getElementsByTagNameです。対象のタグ名と一致するelementを選択する(複数)
parent child
CSSの書き方で、div.className p {} とか書くアレです。例で言えばclassNameと言うクラスが振られているdivの下層のpタグを選択します。
#id, #id2, .class1, div, p
これより上で説明した書式をカンマ区切りで複数指定します。マッチした全部の要素を選択します。

本当は、もっと複雑な問い合わせも出来ますが書いているとキリがないので、後述の参考資料のリファレンスをご覧ください。

get

JQueryオブジェクトからelementを取りだす時に使用します。JQueryオブジェクトの操作だけでは対応しきれない時などに使用します。

$('#id').get(0).innerHTML= 'ヽ(゜▽、゜)ノ ';

Effects

基本的なエフェクトは割と簡単に定義出来ます。
ここでは基本説明と例示だけに留めて詳細はリファレンスに譲ります。

大体の場合、以下の引数を受け付けます。そして大体の場合省略できます。
function(speed, callback);

speed
スピードはミリ秒単位で指定します。そのアニメーションが、"どれ位の時間をかけて終了するか?"を指定します。
callback
そのEffectが終わった時に実行する関数を渡します。イベントハンドリングのようなものだと思ってください。
///
/// ボタンを押したら、表示・非表示の切り替わるdiv
///
$('#btn').click( function(){
	$('div#id').toggle( 200 );
});

イベント

イベントの登録に使用します。大概はhelperで事足りると思うので、下記に挙げるhelper系メソッドを使用しましょう。基本的にはイベントハンドラとなる関数を渡すだけで登録できます。ただし、バブリングするので、ev.stopPropagation()を忘れないようにしましょう。

$('#id').click(
  function(ev){
     // evはJQueryイベントオブジェクト
     // このイベントハンドリングに関する情報や、
     // イベント制御に必要なメソッドが格納されています
  });
  • blur(fn)
  • change(fn)
  • click(fn)
  • dblclick(fn)
  • error(fn)
  • focus(fn)
  • keydown(fn)
  • keypress(fn)
  • keyup(fn)
  • mousedown(fn)
  • mouseout(fn)
  • mouseover(fn)
  • mouseup(fn)
  • resize(fn)
  • scroll(fn)
  • select(fn)
  • submit(fn)
  • unload(fn)

CSS

styleの値を変更してブロックに色を付けたり、高さや幅を変えたり、移動したりします。JavaScriptと言えば、この値を変更する事で動きのあるページを表現する事が多いので、基本と言えば基本ですね。

height,width
高さを返したり、幅を返したり、引数に渡すと値を設定したりします
offset
親要素からの相対的なleftとtopを返します。

		var lt = $('#id').offset();
		alert( 'left:' + lt.left + ',top:' lt.top );
		
css( key, value );
値名と値を対にして設定します。
$('#id').css('color', 'red' );
css({ 'key' : value, 'key2' : 'value2' });
JSONでスタイルを指定します。
$('#id').css({ 'border' : 'solid thin black', 'color' : 'white'});
css(key);
指定したkeyのstyleの値を取得します。

		if( $('#id').css('display') != 'none' ){
			$('#id').css('display', 'none' );
		} else {
			$('#id').css('display', '');
		}
		

メソッドチェーン

大体の場合においてelementに対する副作用を期待するメソッドが多い中、そう言った処理の戻り値はthisが返ってきます。そこで、同じJQueryオブジェクトのメソッドをつないで一気にDOM操作をする事が出来ます。何を言っているのか分からないと思うので、実際にソースを見てみます。

$('#id')
	.mouseover( function( ev ){
		$(this).text( 'mouseover' );
		ev.stopPropagation();
	})
	.mouseout( function(){
		$( this ).text( 'mouseout' );
		ev.stopPropagation();
	})

これを見やすいとするかはセンスの問題だと思いますが、個人的にはすっきりするので好きです。

参考サイト

Share and Enjoy:
  • Digg
  • del.icio.us
  • Google Bookmarks
  • Tumblr
  • email
  • Facebook
  • FriendFeed

RSS Feed

1件のコメント for JQuery

2009-02-26のjavascript - JavaScriptのまとめブログ | 2009 年 2 月 28 日 at 1:29 AM

[...] javascript で日付をミリ秒に変換したい場合、 var date = n… JQuery のうがき. [...]

Leave a comment!

<< 【モニプラ】おにぎりの海苔は パリパリ派?しっとり派?

ECスタジオさんのモニプラに参加 >>

Find it!

Theme Design by devolux.org

Tag Cloud