jQueryを覚えようかも！と思う10個のブックマークとコメント:essaysinidleness

jQueryを覚えようかも！と思う10個のブックマークとコメント

1月 27th, 2010

カテゴリー：Javascript勉強

久々にこんなタイトル付けてみたw　今日は今をときめくJavascriptライブラリjQueryを「覚えてみてもいいかも！」と思わせるブックマークを、jQuery初心者である自分がほんのり解説を添えて紹介します。

ちなみに、つい最近までjQueryという名前やちょっとしたプラグインを使ってみた事がある程度で具体的な事まではさっぱり知りませんでした(´μヽ)

まず、「jQuery覚えた方が良い人って？」「jQueryって要するに何よ」という人へ。

1.はじめてのjQuery

jQueryは(X)HTML＋CSSを扱う人全員が触れておいた方がいいかもという今とっても人気のあるJavascriptライブラリです。

「えーJavascriptとかってページを勝手に移動させたりちっこいウィンドウ出したりするアレでしょ？いらないいらない」と思っている方もいるでしょう。例えばそういったJavascriptはユーザビリティを低下させる可能性があるので使用しない(そういう方針をとっている企業もまあ確かにある)＝Javascriptという言葉に関するjQueryを詳しく調べなかったというパターン。

jQueryはそういう動的にコンテンツを生成したり、普通のHTMLではあり得ない動作をするリンクとかも作れたりします。しかし、jQueryはそれだけじゃく簡単にCSS周りとかを弄ったりできるのです。

というわけでまずは1個目のブックマーク。

リンク：はじめてのjQuery

このリンク先を見ていただけるとわかるのですが、CSSを簡単に変化させたり、例えば行ごとにbackground-colorが違うリストやテーブルが作れちゃったりします。

どうでしょう？ちょっと面白そうかもと思えませんか？

2.どんな効果をつけられんの？

ではなんとなく出来る事が分かったけど、HTMLとかCSS後で変えられるだけ？どんな効果が付けられるの？という方。CSSなどに関しては先ほどのリンクと後に書くリファレンスなどで。とりあえず紹介。

リンク：Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編 : 4GALAXYのメモ

日本語でちょっと書き添えしてあるのが丁寧で、最初に「ほぉー」と思って見たのが上のページ。これよりも詳しく知りたい方は9個目のブックマークなんかを参考に。

要はjQuery使えば、最近よくみる画像をページ内でぶわっと拡大するアレとか、マウスを上に載せたらちょっとだけ動くオサレなヘッダーメニューとか、ページ移動しなくてもページ内を部分的に更新できたりするアレとかがめっちゃ簡単に自分のページに実装できるって事です。

3.jQueryって名前とかサイトがお洒落だからさ、ちょっとダウンロードしてみようぜ

「jQueryってネーミングかっこよくないですか？クエリなんてSQL関連とかDB関連触ってないと普段口にできない言葉だし、何故かQが含まれている英単語ってかっこよく感じるよね？それにサイトも現代的でマジお洒落」

はい。本当に申し訳ない感じですが、とりあえずjQueryをダウンロードし、サーバーにアップし、ヘッダーでリンクさせないと世界が動き出さないので、ちょっくらjQueryをダウンロードしてみましょう。

リンク：jQuery: The Write Less, Do More, JavaScript Library

リンク先が巷で噂のjQuery。これダウンロードしたらその日からWEB2.0。ダウンロード押すと異邦人が喋りかけてきますが、それをデスクトップに保存しましょう。名前はjquery.jsで。

4.んじゃあ何か遊んでみようか

とりあえずjQueryを落としたのでそれで遊んでみましょう。参考にするのがコチラ。

リンク：もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）：第1回　jQueryにふれる｜gihyo.jp … 技術評論社

今回は自分でもちょっと書いてみたいと思います。リンク先読んだからそんなもんいらねぇという方は飛ばしてください。

まずはjQueryと同じディレクトリ(同じフォルダ。デスクトップだったらデスクトップ)に、

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div>
<p>divの背景は黄色です。</p>
<ul>
<li>ここの文字は赤色</li>
<li>ここの文字はふっといの</li>
<li>ここの文字はでっかいの</li>
<li>この文字はリンク</li>
<li>へへへ、俺を見つけるとはな</li>
<ul>
</div>
</body>

という内容のHTMLファイルを作りましょう。名称はなんでもよいです。

で、当然ですが書いてある通りになるわけがありません。HTMLを少し書いた事ある人なら分かりますね。これにCSS無しで書いてある事を実現してみましょう。

まずは一番最初の「divの背景は黄色」という部分から。<script type=”text/javascript” src=”jquery.js”></script>の下に

<script type="text/javascript">
$(function(){
    $('div').css("background-color","yellow");
});
</script>

と書き加えてプレビューしてみましょう。div要素の背景が黄色くなったと思います。ちなみにこれをFirebugで見てみると、

このようにdivにスタイルが挿入されています。

ではザザっとリストに書かれている物を実現してしまいましょう。先ほどと部分に今度は

<script type="text/javascript">
$(function(){
    $('div').css("background-color","yellow");
    $('li:first-child').css("color","red");
    $('li:eq(1)').css("font-weight","bold");
    $('li:eq(2)').css("font-size","200%");
    $('li:eq(3)').replaceWith("<li><a href='#'>" + $('li:eq(3)').text() + "</a></li>");
    $('li:eq(4)').remove();
});
</script>