Re:Start jQuery #001

概要

なんだかもうよくわからなくなってしまった。
いちいちググってコーディングするのに疲れた。

というわけで、jQueryをしっかり習得しなおすよ。
対象バージョンは1.12.1だ。ES5までの書式で書く。

あえて『そんなことみんな知ってるだろ!www』という突っ込みがありそうなレベルで書いておくので、つっこんだら負けということを認識されたし(俺は最初から負けてるので何も怖くない)。

それからhtmlはこんな感じにしてみた。

jQueryオブジェクトをキャッシュする

見たいなやつ。
キャッシュしないで毎回ループ内でまわしたりしてると、ループのたびにDOM探しに行くので非効率。
最初に変数に代入しておき、その変数を使えば高速化される。
で、これをjQueryオブジェクトのキャッシュと呼んでいる。

結果はこうなる。
Google ChromeのDeveloper ToolのConsoleで確認。

section.containerが3つ出てくるので、『本日のランチ』が3つ拾えてるのがわかる。
そして型はObjectだ。

cssを当て込んでみる

最初の『本日のランチ』が1つだけ色が変わったはず。
:first:first-childにすると、全.container内の最初の要素の色が変わる。

で、これは想定内の挙動。jQueryオブジェクトを変数に入れることでキャッシュされました、というだけ。

関数を作ってみる

$oを投げてobjで受ける。そのままjQueryのcss()メソッドでスタイルを書き換ると正しく反映する。

つまりこのローカル変数objjQueryオブジェクトって事になる。
確認してみる。

実行してみると、

となる。さっきとまったく一緒である。

参照渡し?値渡し?

この関数を通過した後、.containerのcssは変更されたままになっているので、変更前にキャッシュした$oから、cssを拾って確認してみる。

もし変更後の色になっていれば、参照渡しということになる。

コンソールにこんな風に表示された。

10進数の51は16進数では33、10進数の102は16進数では66、10進数の153は16進数では99になる。つまりそれをcssの省略形にしてRBGで並べると、#369ということになる。

つまり、$oにjQueryオブジェクトを代入した後、別の場所で別の変数をつかって内容を変更しても、別の場所の別の変数へは参照渡しなので、実態が同じということになる。

結論

関数に渡したjQueryオブジェクトは参照渡し

jQueryオブジェクトってわかるように、obj$objと書くほうがわかりやすい。

感想

Webで特定のオブジェクトに双方向にアクセス可能ってのは大変便利でございます。