「10日でおぼえるjQuery入門教室」と jQuery .find() と context selector
「10日でおぼえるjQuery入門教室」を会社にあったので読んでみた。
jQuery使い始めてけっこう経つけど、どんどん変わっている。初めて使ったときは、たぶん1.2くらいだったかな。 その時々で変更点などは確認しているけど、もう一度通して勉強しようかな、と思って読んでみた。
ものすごく流し読みしたけど、読み終えるのに3日くらい掛かった。jQuery使ったことない人が、読んで書いて試したら、1日8時間で10日間くらいかかりそう。
でもなかなかよい本だった。2013/10に出ていて、サンプルコードもモダンだし、文章も読みやすかった。ちょっとしたことだけど、サンプルで使われている比較演算子が、厳密等価演算子(===)とかだったりすると安心する。
セレクタについてあまり詳しくないので、本書のサンプルはわかりやすくてよかった。使う機会の少ないものも多いけど、もうちょっとセレクタ覚えないと…。
あと、こういう書き方知らなかった。ずっと昔からあるのに…。
jQuery( selector [, context ] )
こんな感じで書けるみたい。
var $books = $(".books"); var rubyBooks = $(".ruby", $books);
いつもこんな感じでfind使ってた。findより簡単に書けていいじゃん。
var $books = $(".books"); var rubyBooks = $books.find(".ruby");
同じことできるなら、パフォーマンスが気になるよねって調べてみた。たくさん出てきたけどjsPerfがわかりやすくてよかった。
自分の環境で試したら、jQueryオブジェクトをfindするのがいちばん速かった。
findのドキュメント読んだら、Selector contextはfindで実装されてるんだって。まあ、そうだよね。
Selector context is implemented with the .find() method; therefore, $( "li.item-ii" ).find( "li" ) is equivalent to $( "li", "li.item-ii" ).
ラップしてる分、遅くなっちゃうんだろうな。ものすごく遅くなるわけではないけど、これからもfindを使っていこうかな。最新のAPI Document、もうちょっと読まないと。