jQuery 忘れがちなことメモ「jQuery逆引きマニュアル」編

jQuery

「jQuery逆引きマニュアル」のモニター当選したので、読みながらメモしよう

第１章 jQuery の基本構文

1-7 イベントを設定したい

foucs と focusin メソッドの違い

focusinメソッドはイベント場部リングでも動作する
$('body').focusin(.. とかできるってことかな？（delegate的なことができる？あとで確認）

mouseover と mouseenter メソッドの違い

マウスカーソルがのった時に実行。mouseoverはイベントバブリング時にも発生

mouseleaveメソッド

マウスカーソルがはずれた際発生

keypress メソッド

文字入力にのみ対応。shiftキー等は、keydownで取得するとのことだが、keypress時に押下状態かを判別するには以下でOK

$('input').keypress(function(e){
	e.shiftKey	// true or false
	e.ctrlKey
	e.altKey
})
errorメソッド

$(window).error(function(){... でエラー発生時のイベントを設定できる

unloadメソッド

$(window).unload(function(){... ページを閉じた時のイベントを設定できる

1-9 ブラウザのイベント処理を止めたい

preventDefault　href="#"なa要素に使える
例えば

$('body').click(function(){alert('click body')});

とあった場合、

$('a').click(function(e){return false});

だと、click body は表示されないが

$('a').click(function(e){e.preventDefault();});

だと、表示される
もちろんスクロール位置に変化はなし

ダブルクリックをoverride
$('a').dbclick(function(e){
//...
}).
click(function(e){
    e.preventDefault();
});

1-10 繰り返し処理をしたい

callback関数で繰り返し処理

セレクタで取得した要素数分、実行される

$('ul li').prepend(function(idx){
    return idx;
});

$('div').css({
    width : function(){return $(this).width() * 2;}
});

attr,val,html,text,append,prepend,before,after,replaceWith,wrap,wrapInner,offset,addClass,removeClass,toggleClass,css で対応

1-12 セレクタで指定した要素を絞り込みたい

closestメソッド

直近の先祖要素を取得（これってどのVerからあったの？）。たぶんparents('ul:eq(0)')と同じ

parentsメソッド

セレクタ指定した際の説明はたぶん間違い。$('li').parents('body')では body しかとれない
先祖要素群にたいしfindしたようなような挙動になるはず

<div><p><span><a>xxx</a></span></p></div>

で、$('a').parents('p')ならp要素が１つとれるだけ

sliceメソッド

arrayのsliceと同じ
$('div').slice(2) で３個目以降のdiv全てを取得
$('div').slice(2,4) で３〜５個目以降のdivを取得

filterとnotメソッド

filterは指定セレクタで保持オブジェクトの絞り込み、notは指定セレクタ要素を排除する
$('a').not('.foo');

hasメソッド

セレクタ要素を保持する要素を取得（こんなのあったんだ！）
$('p').has('a')//a要素を保持するp要素を取得

andSelfメソッド

１つ前の要素も保持
$('#hoge').siblings().andSelf();//hogeも含まれる


第３章 - jQuery のさまざまなテクニック

3-2 画像プリロード

$('').attr('src','xxx.jpg');

3-3 ブラウザごとに処理を変えたい

$.browser.safariはjQuery1.4以降は非推奨。$.browser.webkitを使う
version分岐方法、$.supportの詳細仕様は本文を参照

3-9 再帰的に置き換え処理を行いたい

contents()メソッドでテキストノードをjQueryオブジェクト化できる！

<div><p style="color:red">aaa<span style="color:black">xxx</span>bbb</p></div>

aaaxxxbbb

テキストをDOM階層順に置換してみる

$('div').find('*').andSelf().each(function(){
	var tag = this.tagName
	alert(tag + ' element contents is ...');
	$(this).contents().each(function(idx){
		alert(this.nodeType == 1 ? this.tagName : this.nodeValue);
		if (this.nodeType == 3) {
			this.nodeValue = tag + 'のテキスト';
		}
	})
});

こうなる

  • DIV element contents is ... P
  • P element contents is ... aaa SPAN bbb
  • SPAN element contents is ... xxx

PのテキストSPANのテキストPのテキスト

テキストの置換はreplaceWithよりnodeValueを書き換えた方が直観的でわかりやすいかと..
inlineやinline-block要素間の無駄な余白を削除するのに使えそう
こんなマークアップに対し

<div class="navi">
	<a>menu</a>
	<a>menu</a>
	<a>menu</a>
	<a>menu</a>
</div>

こうすると

$('div.navi').contents().each(function(){
	if (this.nodeType == 3) this.nodeValue = '';
});

こうなる

<div class="navi"><a>menu</a><a>menu</a><a>menu</a><a>menu</a></div>
3-12 配列を効率よく操作したい
$.each(['a','b','c'],function(idx,obj){
	alert(idx + ':' + obj);	//0:a,1:b,2:c
});

これでもＯＫ

$(['a','b','c']).each(function(idx,obj){
	alert(idx + ':' + obj);	//0:a,1:b,2:c
});
$('<div>a</div><div>b</div><div>c</div>').each(function(idx,obj){
	alert(idx + ':' + obj.innerText);
});
$('<div><span/>a</div><div><span/>b</div><div><span/>c</div>').each(function(idx,obj){
	alert(idx + ':' + $(obj).contents().get(1).nodeValue);
});