jQueryで高速に要素を選択する場合の書き方

TwitterでJSのパフォーマンスを計るサイトを知ったのでテストしてみました。
前回のループの速度チェックではなく、チラッとだけ話題にしたjQueryで要素を選択する際の指定方法についての調査です。

http://jsperf.com/londoner25aaa

簡単な構造のHTMLだったので要素・id・classどれで指定しても大きな差は生まれませんでした。もっとdivやulが何個もある構造だったら多分idで指定するのが一番速くなるとは思うのですが…またそれは今度。。

ブラウザごとの処理速度にばらつきがありますが、基本的に”$(‘li’, ‘#ul’);のように第1引数に取得したい要素を、第2引数にその要素の範囲を指定してやるのが一番速いようです。
特にIE9は遅いのと速いので顕著な差があるので、この形式で書くことを意識付けといた方がいいかもしれません。

上記のテストサイトはテストをすればするほど精度があがるっぽいので、興味があればみなさんもテストを走らせてみてください~。

ループに関する覚書

ループと言えばスクリプトになくてはならない処理体系ですよね。
JSが苦手と思ってたときは配列やらループやらを全然理解できてなかったことが一因でしたが、
それを自分の中で消化できたら途端に面白くなってきました。
それで、ループ(配列を処理する場合)と一言で言っても色々な書き方があるのだなあとわかったの覚書として残しておきます。
あ、ちなみにforループとjQueryのeachしか使ったことがありません!!(キリッ
続きを読む ループに関する覚書

疑似クラス

例えばリストの最初(最後)だけ罫線を消したい場合に使うのが:first-child(:last-child)

とても便利ですよね~最後だけクラスを指定しなくていいので項目が増えた場合でも更新が楽
これらがIEに対応してたらもっとえぇのに・・・と何度思ったことか・笑

その場合は

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->

をヘッダに指定してIEでも使えるようにすればOK!
これで幸せなマークアップライフを過ごせますね

さて、CSS3では上記以外にも様々な擬似クラスが定義されています
結構使えるんですよね~

 

:nth-type(n)

これは、ある要素の隣接している子要素を最初から数えてn番目にあたる要素にスタイルを適用するもの
最後から数えたい場合は:nth-last-child(n)

nの値を変えることで様々な箇所に対応できます
奇数の場合はoddもしくは2n+1、偶数はevenもしくは2n
数字を直接指定するとその番目のみ・・・
というように

あぁ、素晴らしい

 

上記に似て非なるものが

:nth-of-type(n)

これはある要素の同じ子要素を最初から数えて、n番目に当たる要素にスタイルを適用
最後からの場合は:nth-last-of-type(n)

nの指定の仕方は前のと同じ

これらの違いは、子要素すべてか同じ子要素のみか

<p>~</p>
<p>~</p>
<h2>~</h2> ←p:nth-child(3)
<p>~</p> ←p:nth-of-child(3)
<p>~</p>
<p>~</p>

ということですな

 

ちなみに

<script type="text/javascript">
$('e:last-child').css('border', 'none');
</script>

とjQueryで指定したらIE関係なく疑似クラス使えたり。。。
もちろん:nth-child(n)や:nth-of-child(n)もありますよん

jQuery恐るべし

参考:CSS Happy Life ZERO