WEBプログラム覚書::デザイナーのためのjQueryチュートリアル

2009年02月12日 10:32

デザイナーのためのjQueryチュートリアル

パーマリンク | http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/440

だいぶ昔に紹介されてた記事ですが下記ページを適当に。コード見ながら大体こんな感じ言ってるだろくらいの感じなので間違ってる可能性もあり。

参照サイト

jQuery Tutorials for Designers

jQueryの使い方

まずjQueryをダウンロードしてサイトの適当なディレクトリに設置。でもって利用したいページのヘッダに


<script type="text/javascript" src="jquery.js"></script>

と記述することで読み込めます。

DOMの解析が完了(ページのロードが完了)したらスクリプトを実行するには下記のように書きます。


<script language="javascript">
$("document").ready(function(){
    // ここにDOM解析完了後に実行したいコードを記述
});
</script>

上記ではちょいと冗長なのでショートハンドも用意されてます。下記のように記述しても同じこと。

※これは蛇足ですがjQueryのサンプルではこっちの記述が多いので。


<script language="javascript">
$(function(){
    // ここにDOM解析完了後に実行したいコードを記述
});
</script>

ダブルクォーテーションもシングルクォーテーションも利用できます。


$("#jQuery"); // ダブルクォーテーション
$('#jQuery'); // シングルクォーテーション

要素の取得方法

まず学ぶべきは必要な要素を正確に取得する方法です。 jQueryではとても簡単に取得できます。



$("#header") = id="header"の要素を取得

$("h3") = document内の<h3>要素を全て取得

$("div#content .photo") = <div id="content">内のclass="photo"をもつ要素を取得する

$("ul li") = document内全ての<ul>要素内の <li> 要素を取得する

$("ul li:first") = document内全ての<ul>要素内の最初の <li> 要素を取得する

どんな選択方法があるかは、下記ページを参照。

参照サイト

Selectors/API/jQuery

以上を踏まえて画像のスクリプトがどんな感じか。

シンプルなスライドパネル

.btn-slideをクリックした時、#panel要素を表示したり非表示にしたりします。 slideToggle()はslideUp()、slideDown()を交互に繰り返す関数です。デモページ


$(document).ready(function(){

    $(".btn-slide").click(function(){ // .btn-slideをクリックした時

      $("#panel").slideToggle("slow"); // #panel要素が表示の時は非表示に、非表示の時は表示する。(スピードはゆっくりと)

      $(this).toggleClass("active"); // this は.btn-slideのこと。.btn-slideにactiveクラスがあれば削除、なければ追加する

    });

});

ここらへんのことがわかれば他のサンプルも特に難しいことやってないので理解できると思いますのでとりあえずここまでで。

プラグイン利用しているのが1個ありますが、それ以外はjQuery単体で実行できると思います(たぶん)。

わからない関数はjQuery日本語リファレンスのAPIリファレンスで調べることが可能です。

とくにエフェクト関連のAPIはたくさん使ってるのでEffects/API/jQueryを一度ながめておくとよいと思います。