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();"とかで呼んでやればオッケーです。

Google Font DirectoryとAPI HowTo

Google Font APIが楽しそうなのでやってみました。
http://code.google.com/intl/ja/apis/webfonts/

やり方はとても簡単です。

方法としては以下の2つのやり方が簡単です。
1.ページ内でlinkタグを使う。(HTMLファイル内)
まず、APIを使えるようにインポートしてやります。

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Reenie+Beanie" />

次に、同一ファイル内で適用する要素を指定してやります。

<script>
body {
background-color:#272727;
font-family: "Reenie Beanie", serif;font-size:20px;
text-shadow: 4px 4px 4px #aaaaaa;
}
</script>

font APIを使用したいページのheadタグの中で使ってあります。
HTMLソースはFont APIのページで自動生成してくれるので、何もすることはないです。

2.外部スタイルシートで@importを使う。(スタイルシート内)
この方法を使うと、ウェブサイト内の全ページでフォントを統一したい場合などに便利です。
例えば、全ページで使用するCSS(style.cssのような)の先頭に以下のようなコードを入れてあげます。
まず、APIを使えるようにインポートしてやります。

@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie);

次に、同一ファイル内で適用する要素を指定してやります。

body {
background-color:#272727;
font-family: "Reenie Beanie", serif;
font-size:20px;
text-shadow: 4px 4px 4px #aaaaaa;
}

1の方法だとページごとにフォント指定ができますし、2の方法だとウェブサイト全体でフォントが統一できますね。