jQueryで使われているSizzle.jsを単体で使ってみた

jQueryで使われているCSSセレクタのSizzle.jsを単体で使ってみました。

必要な知識

・CSSセレクタの基礎
・javascriptの基礎

Sizzle.jsだけを使うメリット

・jQueryを使わないので、$関数使うよりもちょっとだけ早い
・jQueryのメソッドを覚えるのが辛い開発者が喜ぶ

今回作る関数

「switch」ボタンで、偶数行の背景色を交互に変えてくれる関数

Demo:

http://shinya-api.appspot.com/demo/js/sizzle/

作る

1.Sizzle.jsをダウンロード
Google codeから。
2.HTMLファイルを用意し、Sizzle.jsを読みこむ

3.Sizzle.jsを使って、DOM要素を取得する
Sizzle.jsのSizzle関数は、引数に渡したCSSセレクタを解析して、DOM要素を返してくれます。
今回はCSS 3のセレクタ「:nth-child」で指定したDOM要素をSizzle関数の引数に渡します。
※「:nth-child」は、ここに詳しく載ってます。

var elem = Sizzle('.oddAndEven li:nth-child(odd)');

4.3で取得したDOM要素の背景色をjsを使って変える

var changeOddBg = function() {

var elem = Sizzle('.oddAndEven li:nth-child(odd)');
var flg = true;

// 奇数回クリックされたときに呼ばれる関数
function odd(){
for (var i = 0; i < elem.length; i++) {
elem[i].style.background = '#acacac';
}
return false;
}

// 偶数回クリックされたときに呼ばれる関数
function even() {
for (var i = 0; i < elem.length; i++) {
elem[i].style.background = '#ffffff';
}
return true;
}

return {
toggle:function() {
flg = flg ? odd() : even();
}
};
}();

あとは、 onclick="changeOddBg.toggle();"とかで呼んでやればオッケーです。