jQuery.proxy()で複雑なイベント処理

jQuery1.4では複雑なオブジェクト指向なイベント設定がproxyメソッドを利用して可能になった。

jQuery.proxy( function, context )

次のようにcontextにオブジェクトを渡すことによりfunction内のthisの値が変更する

<input type="button" id="btn1" value="Normal1" />
<input type="button" id="btn2" value="Normal2" />
 
$("#btn1").click(function(){
	alert(this.value)// Normal1
}); 
$("#btn2").click($.proxy( function(){
	alert(this.value)// Proxy​
}, {
  value:"Proxy"
}) ); 

元のthisも利用したいなというケースが多そうですが、それの取得方法はなさそうです。ちょっと使いにくいかな。

jQuery.proxy( context, name )

もうひとつの使い方は

nameにコンストラクタを設定して実行

var obj = {
    name: "John",
    test: function() {
        console.log(this.name);
        $("#btn2").unbind("click", obj.test); 
    }
};
$("#btn2").click($.proxy(obj, "test")); 

コンストラクタのunbindなども出来る。これは便利。

ただ、これもやっぱり元のthisも利用したいな

jQueryの本当のfocusinとfocusoutの使い方

jQuery1.4で追加された新たなイベントfocusin()、focusout()では『ただ、フォーカスが発生した要素が取得できないので使い方がわからない。』と絞めくくっていたわけども冷静に考えると「e.target」で取得できるわけでフォーカスに対応したイベントデリゲート用の関数と考えれば合点がいく。

$(function(){
	$('#foo').focusin(function(e) {
		$(e.target).css("background","red")
	}).focusout(function(e) {
		$(e.target).css("background","white")
	});
});

参考：イベントデリゲートで効率よくイベントを設定

jQueryオブジェクトを配列に変換するtoArray()

jQuery1.4で追加されたtoArray()はjQueryオブジェクトを配列に変換する関数

$(function(){
	console.log(IsArray( $('#foo li').toArray() ));//true
	console.log(IsArray( $('#foo li') ));//false
	function IsArray(array) {
		return(array.constructor===Array);
	}
});

配列かどうか調べる関数を利用して調べるとこんな感じになる。

配列でDOMオブジェクトを返すって事はget()とおんなじ？

jQueryのfirst()、last()

jQuery1.4では新たなフィルタリングにfirst()、last()が追加されました。

これは、セレクタの指定で:first-child、:last-childとつけるのと同等と説明されることもありますが間違い。

<ul>
    <li>a1</li>
    <li>a2</li>
    <li>a3</li>
    <li>a4</li>
    <li>a5</li>
    <li>a6</li>
</ul>
<ul>
    <li>b1</li>
    <li>b2</li>
    <li>b3</li>
    <li>b4</li>
    <li>b5</li>
    <li>b6</li>
</ul>

このようなHTMLで

$("li").first().css("color","red")

の対称になるのはa1のみ

$("li:first-child").css("color","red")

だと、a1とb1が対象になる。

セレクターだと:fistと同じ意味のフィルターです。

$("li:first").css("color","red")

child(子要素)であるのが重要

<dl>
    <dt>a1</dt>
    <dd>a2</dd>
</dt>

このようなHTMLで

$("dd:first").css("color","red")

とした場合、dd要素が赤色になるが

$("dd:first-child").css("color","red")

とした場合、なにも赤色にならない。これは最初の子要素がdt要素の為。

last()もおんなじような感じです。

イベントデリゲートで効率よくイベントを設定

通常イベントを設定すると次のようになる。

$(function(){
	$("li").click(function(e){
		$(this).css("color","red")
	})
});

これだとliの数が多くなるとすべてにイベントが設定されている状態になりブラウザのメモリに多大な負担がかかる。

$(function(){
	$("ul").click(function(e){
		$(e.target).css("color","red")
	})
});

次のように記述すると設定するイベントはひとつでよい

jQuery1.4で追加された新たなイベントfocusin()、focusout()

focusin()、focusout()はjQuery1.4で追加された新たなイベントです。

$('#foo').focusin(function() {
	$("input",this).css("background","blue")
}).focusout(function() {
	$("input",this).css("background","white")
});

指定した要素の子要素のフォーカスイベントを検出できる。

ただ、フォーカスが発生した要素が取得できないので使い方がわからない。

参考：.focusin() – jQuery API
参考：.focusout() – jQuery API

jQueryでイベントやデータを残したまま要素を削除できるdetach

jQuery1.4で追加されたdetach()はイベントやdataを残したまま削除できるメソッド

これだとイベントが残るが

$(function(){
	var detach = $("#detach").click(function(){
		alert($(this).data("foo"))
	}).data("foo","var").deach()
	$('body').append(detach);
});

これだと残らない

$(function(){
	var detach = $("#detach").click(function(){
		alert($(this).data("foo"))
	}).data("foo","var").remove()
	$('body').append(detach);
});

jQueryで親要素を削除するunwrap()

jQuery1.4で追加されたunwrap()は親要素を削除することが出来るメソッドです。

$('#unwrap').unwrap();

とすると

<h1><p id="unwrap">unwrap</p></h1>

が

<p id="unwrap">unwrap</p>

になります。wrap()の反対ですね。

参考：.unwrap() – jQuery API

jQueryでセレクターがある場合に実行するhas()

jQuery1.4で新たに追加されたhas()はセレクターで指定した要素が存在する場合に命令を実行するメソッドです。

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

$('li').has('ul').css('background-color', 'red');

この場合、item2の背景のみが赤色に変わる。

これは、

$('li:has(ul)').css('background-color', 'red');

というセレクターと同じ意味です。

参考：.has() – jQuery API

jQueryでアニメーションを遅らせて実行するdelay()

jQuery1.4で新たに追加されたdelayはアニメーションを遅らせて実行することが出来ます。

$('#foo').slideUp(300).delay(1000).fadeIn(400);

この場合slideUpの1000ミリ秒後にfadeInが実行されます。

参考：.delay() – jQuery API

jQueryのparentsUntilで親要素を指定

jQuery1.4で追加されたparentsUntilを利用すると指定した要素の親要素まで含めて命令を実行できる。

$(function(){
	$('#item5').parentsUntil('#item1').prepend('[parentsUntil1]');
	$('#item4').parentsUntil('#item2').prepend('[parentsUntil2]');
})

<div id="item1">item1
	<div id="item2">item2
		<div id="item3">item3
			<div id="item4">item4
					<div id="item5">item5</div>
			</div>
		</div>
	</div>
</div>

これを実行すると次のようになる。

item1
[parentsUntil1]item2
[parentsUntil2][parentsUntil1]item3
[parentsUntil1]item4
item5

jQueryで指定した要素間の要素を指定する

jQuery1.4に新たに追加されたnextUntilとprevUntilでは指定した要素間の命令を実行することが出来ます。

$(function(){
	$('#item2').nextUntil('#item5').append('[nextUntil]');
	$('#item5').prevUntil('#item3').append('[prevUntil]');
})

<ul>  
	<li id="item1">item1</li>  
	<li id="item2">item2</li>  
	<li id="item3">item3</li>  
	<li id="item4">item4</li>  
	<li id="item5">item5</li>
</ul>

これを実行すると

# item1
# item2
# item3[nextUntil]
# item4[nextUntil][prevUntil]
# item5

のように表示される。