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

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

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

jQueryの使い方

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

HTML

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

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

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

Javascript

  1. $("document").ready(function(){
  2.     // ここにDOM解析完了後に実行したいコードを記述
  3. });
  4.  

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

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

Javascript

  1. $(function(){
  2.     // ここにDOM解析完了後に実行したいコードを記述
  3. });
  4.  

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

Javascript

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

要素の取得方法

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

要素の取得方法

  1.  
  2. $("#header") = id="header"の要素を取得
  3.  
  4. $("h3") = document内の<h3>要素を全て取得
  5.  
  6. $("div#content .photo") = <div id="content">内のclass="photo"をもつ要素を取得する
  7.  
  8. $("ul li") = document内全ての<ul>要素内の <li> 要素を取得する
  9.  
  10. $("ul li:first") = document内全ての<ul>要素内の最初の <li> 要素を取得する
  11.  
  12.  

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

参照サイト

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

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

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

Javascript

  1. $(document).ready(function(){
  2.  
  3.     $(".btn-slide").click(function(){ // .btn-slideをクリックした時
  4.  
  5.       $("#panel").slideToggle("slow"); // #panel要素が表示の時は非表示に、非表示の時は表示する。(スピードはゆっくりと)
  6.  
  7.       $(this).toggleClass("active"); // this は.btn-slideのこと。.btn-slideにactiveクラスがあれば削除、なければ追加する
  8.  
  9.     });
  10. });
  11.  

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

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

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

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

投稿日 2009年2月12日 10:32
カテゴリ JavaScript
タグ jQuery | ライブラリ
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1145

コメント

コメントする
Name
Email Address
URL