デザイナーのためのjQueryチュートリアル
だいぶ昔に紹介されてた記事ですが下記ページを適当に。 コード見ながら大体こんな感じ言ってるだろくらいの感じなので 間違ってる可能性もあり。
jQueryの使い方
まずjQueryをダウンロードしてサイトの適当なディレクトリに設置。 でもって利用したいページのヘッダに
HTML
- <script type="text/javascript" src="jquery.js"></script>
と記述することで読み込めます。
DOMの解析が完了(ページのロードが完了)したら スクリプトを実行するには下記のように書きます。
Javascript
- $("document").ready(function(){
- // ここにDOM解析完了後に実行したいコードを記述
- });
上記ではちょいと冗長なのでショートハンドも用意されてます。 下記のように記述しても同じこと。
※これは蛇足ですがjQueryのサンプルではこっちの記述が多いので。
Javascript
- $(function(){
- // ここにDOM解析完了後に実行したいコードを記述
- });
ダブルクォーテーションもシングルクォーテーションも利用できます。
Javascript
- $("#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> 要素を取得する
どんな選択方法があるかは、下記ページを参照。
参照サイト
以上を踏まえて画像のスクリプトがどんな感じか。
シンプルなスライドパネル
.btn-slideをクリックした時、#panel要素を表示したり非表示にしたりします。 slideToggle()はslideUp()、slideDown()を交互に繰り返す関数です。 デモページ
Javascript
- $(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を 一度ながめておくとよいと思います。
- jQuery Mobile
- 作者:Jon Reid | 価格:￥ 1,995
| 投稿日 | 2009年2月12日 10:32 |
|---|---|
| カテゴリ | JavaScript |
| タグ | jQuery | チュートリアル | ライブラリ |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1145 |
トラックバック(1)
2011年12月 9日 01:55
[jQuery] jQuery入門前の話。WEBプログラム覚書
jQuery APIリファレンスをみて、jQuery.each()とjQuery(selector).each()のような同じ名前のメソッドで何が違うんだ...続きを読む