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要素ではないナニモノかを渡して何らかの処理を行うことも可能であることに最近ようやく気付くことができた。