あにずむ

Learn from yesterday, live for today, hope for tomorrow.

 

2010年01月

うは!知らないうちに jQuery 1.4 vol.13 このエントリーをはてなブックマークに追加

( ゜▽゜)/こんばんは!

知らないうちにjQueryが1.4になってました!

jQuery Version 1.4

新しいメソッドがいくつか増えたみたいなのでちょっと実験。

☆clearQueue()

とりあえず本家のサンプルちょっとお借りしてと。。。
j$(document).ready(function(){
	j$('#start').click(function(){
		j$('#que').show('slow');
		j$('#que').animate({left:'+=200'},3000);
		j$('#que').queue(function() {
			j$(this).css({background:'blue'});
			j$(this).dequeue();
		});
		j$('#que').animate({left:'-=200'},1000);
		j$('#que').queue(function() {
			j$(this).css({background:'green'});
			j$(this).dequeue();
		});
		j$('#que').slideUp();
	});
	j$('#stop').click(function(){
		j$('#que').stop();
	});
	j$('#clearqueue').click(function(){
		j$('#que').clearQueue();
	});
	j$('#clear').click(function(){
		j$('#que').css({
			left: '', 
			top: '', 
			display: 'none', 
			background: 'green'
		});
	})
});



Start押すと以下の流れで動作します。

1:現れる
2:四角が右へ移動
3:色を青へ
4:四角が左へ移動
5:色を緑へ
6:消える

stop()を使うと、今の動作をキャンセルして次の動作へいくので
右に動いているとき(1)に押すと、青になって左へ移動して消えますw(2〜6)

clearQueue()はQueueに入っている実行前の動作を全てキャンセルするようです。だから、右に動いている時(1)に押すと、実行前の動作(2〜6)がキャンセルされて、右に移動して終わりです。

※多分clearで元に戻ると思うんで適当に遊んでみてください^ー^

☆jQuery.contains()

実験、実験、、、、、
j$('#contains1').click(function(){
	alert( j$.contains(document.getElementById("outerdiv") , document.getElementById("innerp")) );
});
j$('#contains2').click(function(){
	alert(j$.contains(document.getElementById("innerp"), document.getElementById("outerdiv")));
});


第一引数のDOM Nodeに第二引数のDOM Nodeが含まれているか否か。

四角(外)の中に☆(中)が入っているか→true
☆(中)の中に四角(外)が入っているか→false

#関係ないけど中見たらこんな風に呼び分けてるんだ!
#また一つ大人になりましたとさ
var contains = document.compareDocumentPosition ? function(a, b){
	return a.compareDocumentPosition(b) & 16;
} : function(a, b){
	return a !== b && (a.contains ? a.contains(b) : true);
};

ちなみに、引数を間違ってj$('〜')にしちゃうと
compareDocumentPositionが無いからだめですw

あ〜あ
とりあえず時間なくなっちゃったから残りはまた明日だなぁ
二個しか見れなかったww

明日は早く帰ってこれればいいけど・・・

delay()はこちら

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティスJavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
著者:Douglas Crockford
販売元:オライリージャパン
発売日:2008-12-22
おすすめ度:5.0
クチコミを見る

JavaScript 第5版JavaScript 第5版
著者:David Flanagan
販売元:オライリー・ジャパン
発売日:2007-08-14
おすすめ度:4.0
クチコミを見る

FireFox 3.6 リリース!3 このエントリーをはてなブックマークに追加

( ゜▽゜)/こんばんは!

FireFox3.6アップデートきましたよ〜

今回の変更は
・JavaScript実行速度を20%以上高速化
・「プラグインチェックツール」の実装
・「Persona(ペルソナ)」を標準装備、ワンクリックでテーマを変更出来る!
・起動時間短縮
・Windows 7への正式対応

だそうです・・・

Windows7でFireFox3.5ボコボコ落ちてたんですが
これでようやくマシになるのかな?

他にも
よりインタラクティブな Web ページの作成を可能にする、ドラッグ&ドロップ API、File API など、新しい DOM と HTML5 仕様に対応しました。
なんてのもリリースノートに書いてあったのでちょっとだけ実験w

ドラッグ&ドロップ関連のイベント使えるかな?

地球をこいつに食べさせてみてください。

0個目


なんか動いてる感じ!
でもIE8でもChromeでも動いてるなぁ。。。
これ新規で追加されたやつじゃないんだろうか・・・

以下ソース
var eatcount = 1;
j$(document).ready(function(){
	j$('#kao')
	.bind('mouseout', function(){
		j$(this).attr('src', 
		'http://arnie-ism.livedoor.biz/original_images/kao-1.png');
	})
	.bind('drop', function(ev){
		if(eatcount > 10){
			alert('もういらない');
			return false;
		}else{
			j$('#eat-count').html(eatcount++ + '個目');
		}
		j$(this).attr('src', 
		'http://arnie-ism.livedoor.biz/original_images/kao-2.png');
		ev.stopPropagation();
	});
	.bind('dragover', function(ev){
		ev.preventDefault();
	});	
	
});

今度もうちょっと調べてみようかな・・・

追記:ちょいと修正。
顔がドラッグ可能だったのでドラッグ出来ない用に変更
(draggable="false")

詳解HTML&XHTML&CSS辞典詳解HTML&XHTML&CSS辞典
著者:大藤 幹
販売元:秀和システム
発売日:2009-10
おすすめ度:5.0
クチコミを見る

こんてんつ
アクセスカウンター
  • 今日:
  • 昨日:
  • 累計:

相互リンク☆
iphoneアプリ,ipodアプリの動画レビューサイト
TopHatenar
ぷちカンパ
WebMoney ぷちカンパ
人気ブログランキング
人気ブログランキング
にほんブログ村
ブログランキング【ブロブロ】
Amazonライブリンク
Silverlignt
ブログタイムズ
  • ライブドアブログ