jQueryのことが少しわかった気がする

「あ、そうか!」みたいな感覚。
jQueryというより、Javascriptを(少しだけ)理解できたと言った方が良いかな?

常に型を意識して引数や戻り値を扱う言語出身故に、気付くのが遅かったのかもしれない。

振りかえると、私はjQueryオブジェクトとそれ以外のオブジェクトを全く別モノとして捉えていたことが結果として、Javascriptという言語の柔軟性を失わせていたように思う。

jQueryの最も重要である「$()」がナニモノか? を探りたい。


まずは配列を渡してみる。

function say(){
    console.log("hello");
}

$([say, say]).each(function(i,item){
    item();
});
//output:
//hello
//hello


つまり、このように同じことをしているだけ。
var ary = [1, 2, 3];

$(ary).each(function(i,item){
    console.log( item );
});
//output:
//1
//2
//3

$.each(ary, function(i,item){
    console.log( item );
});
//output:
//1
//2
//3


逆にjQueryオブジェクトを渡してみる。
var p = $("<p>").text("foo");
$.each(p, function(i,item){
    console.log( $(item).text() );
});
//output:
//foo


jQueryではeachメソッドにオブジェクトを渡すと配列を扱うような動作をする。
var o = {a:"foo", b: "bar"};

$.each(o, function(i,item){
    console.log( item );
});
//output:
//foo
//bar


いろいろ試してみる。
var o = {a:"foo", b: "bar"};
    
$([o, o]).each(function(i,item){
    console.log( item.a );
});
//output:
//foo
//foo

$(o).each(function(i,item){
    console.log( item.a );
    console.log( item.b );
});
//output:
//foo
//bar

$(o).add(o).each(function(i,item){
    console.log( item.a );
    console.log( item.b );
});
//output:
//foo
//bar
//foo
//bar


少し無茶なことをしてみる。
ret = $([1, 2, 3, 4]).filter(function(){
    return this % 2 === 0;
});
//ret -> [2, 4]

ret = $([0, 1, 99, 3]).index(99);
//ret -> 2
filterメソッドの戻り値はjQueryオブジェクトだが、その中身は普通に扱える。



最後に、animateメソッドでopacity値を変化させる。
$("<div>")
    .css({opacity: 0})
    .animate({opacity: 1}, {
        duration: 500,
        step    : function(){
            console.log($(this).css("opacity"));
        }
    });

これを応用して、value値を変化させる。
$({value: 0}).animate({value: 100}, {
    duration: 500,
    step    : function(){
        console.log(this.value);
    }
});
何やらおかしなことをしているように見えるかも知れないが、jQuery.fx.cur辺りを見ると理解できると思う。

私もココで初めてこのような処理を見たときには何でこうなるのか正直理解できなかった。

しかし、閃きと言うか、気付いたと言うべきか、$()dom要素ではないナニモノかを渡して何らかの処理を行うことも可能であることに最近ようやく気付くことができた。

0 Comments:

Recent Posts