uupaa-selector.js version 1.1 をリリースしました。
uupaa-cssselector.js を改名し、機能を大幅に強化したものを uupaa-selector.js としてリリースし直しました。
2008-10-11追記: uupaa-selector.js version 1.2 をリリースしました。 - latest log
uupaa.js(ver 0.7)の実装をベースに、
- getElementById()
- getElementsByTagName()
- getElementsByClassName()
- getElementsBySelector()
のクロスブラウザな実装一式と、
- Arrayのイテレータ(forEach, filter, some, every, map)
- ブラウザ判別コード
等をギュギュッと詰め込んだ 福袋仕様 です。
サポートブラウザは、Gecko系, WebKit系, Opera9系 と IE6+です。
社内専用ライブラリの開発担当者や、これからJavaScriptを使ったWebサイトを構築する方などには、特にお勧めです。
uupaa-selector.js の 特徴
-
- 精度 http://pigs.sourceforge.jp/blog/200810070000/slickspeed/frameworks/test.html
- 各ライブラリの精度については過去の記事をご覧下さい。
- 速度 http://pigs.sourceforge.jp/blog/200810070000/slickspeed/
- Ext.jsとの速度比較については過去の記事をご覧下さい
- テストがエラーになったり途中で止まる場合は、何度かリロードしてみてください。
- 精度 http://pigs.sourceforge.jp/blog/200810070000/slickspeed/frameworks/test.html
- :link, :visited, :hover, :focus が使えます。
- :before, :after, :first-letter, :first-line は、WebKitの querySelectorAll() 互換です(擬似要素ではなく実在するDOM要素を返す。つまり div>div::after なら div>div を返す)。
- CSSセレクタよりも高速かつ少ないリソースで動作する専用セレクタ(ID, Tag, Class)も用意しています。
- コードを圧縮した状態で約15kB, zipの状態で 約4.8kBと、とてもコンパクトです。
- さらにサイズを絞ったLite版もあるので、iPhone のようなモバイル環境でも、安心してご利用になれます。
CSSセレクタの精度
CSS3.infoのテストケースをベースにした独自のテストにおいて、CSSセレクタは以下のスコアをたたき出します。
| IE6 | 579/582 | 99.5% |
| IE7 | 579/582 | 99.5% |
| IE8β2 | 577/582 | 99.1% |
| Firefox2 | 582/582 | 100% |
| Firefox3 | 582/582 | 100% |
| Chrome | 582/582 | 100% |
| Safari3.1 | 582/582 | 100% |
| Opera9.27 | 575/582 | 98.8% |
| Opera9.6β | 582/582 | 100% |
CSSセレクタの制限事項
通常使用ではほとんど問題になりませんが、一部ブラウザのバグ等で回避できない問題がいくつか存在します。
- :not は簡易実装。CSSセレクタの仕様の一部( ":not(*)", ":not(.class)", ":not(#id)" )のみサポート。
- Opera9.2xで、E[attribute=value] と E[attribute$=value] に一部問題がある(Opera要因)
<div align='leftorright'></div>
<div align='rightleft'></div>
<div align=' left '></div>
これらdiv要素に、uu.css("div[align=left]") がマッチしてしまう。
<div align='leftright'></div>
<div align='left right'></div>
<div align='left-right'></div>
<div align=' left '></div>
これらdiv要素に uu.css("div[align$=left]") がマッチしてしまう。
<div align></div> や <div align=''></div> に uu.css("div[align]") がマッチしない。
<div> </div> に uu.css("div:empty") がマッチしてしまう。
Lite版
モバイル用途を意識して、機能の限定とダウンサイジングを行ったLite版を同梱しています。
使用例 - リストの背景色をゼブラカラー[シマシマ]にする
まず、セレクタを以下から選択します。
// 使用可能なセレクタ一覧 window.IDSelector = uu.id; // getElementById()相当 window.TagSelector = uu.tag; // getElementsByTagName()相当 window.ClassSelector = uu.klass; // getElementsByClassName()相当 window.CSSSelector = uu.css; // getElementsBySelector()相当
リストを交互に着色するようなケースでは CSSセレクタ(uu.css) の :nth-child() が適任です。
このようなHTML + JavaScriptを用意します。
<html> <head><title>test</title> <script src="uupaa-selector.mini.js"></script> </head> <body> <div> <ul> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> <li>list5</li> <li>list6</li> </ul> </div> <script> window.onload = function() { uu.css("div ul>li:nth-child(even)").forEach(function(v) { // リスト要素を1つ飛びで選択し v.style.backgroundColor = "silver"; // 背景色をシルバーに }); } </script> </body> </html>
実行すると、このようになります。
とっても簡単ですね!
上から5つだけを着色したい場合は、:nth-child(even) を :nth-child(-n+5) にしてください。
uu.css("div ul>li:nth-child(-n+5)")
参考リンク
- CSSセレクタの仕様 - http://www.w3.org/TR/2005/WD-css3-selectors-20051215/
- ID, Tag, CSSセレクタの使い方(マニュアル) - http://uupaa-js.googlecode.com/svn/trunk/SELECTOR.htm
- iPhone では、zipで圧縮していない状態のファイルで、25kBを超えるものはキャッシュされない。
