More Related Content Similar to Kawaz的jQuery入門 (20) More from Kohki Miki (20) Kawaz的jQuery入門1. Kawaz的jQuery入門
第1回 Kawaz Web勉強会
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 1
2. このセッションについて
目標
普段プログラムを書かない人が
jQueryのコアな動作を理解する
jQueryで簡単なものを作ってどや顔できるようになる
Web上にあるプラグインを使えるようになる
参考資料
詳しく作るのが面倒だったので、以下のスライドを読んでください
このスライドを見て、気になった部分、説明が足りない部分を補足して
いく感じです
ノンプログラマーのためのjQuery入門
http://www.slideshare.net/hayatomizuno/jquery-7665168
バージョンについて
最新版は1.7.1(12/1/6現在)ですが、イベント周りの仕様が若干変わっ
ているため、1.6.4基準でお話しします
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 2
3. jQueryってなに?
JavaScript向けライブラリ
少ないコード量でパワフルな実装が可能
今のWeb界隈では必須技術(giginet調べ)
無料
オープンソース
改変・再配布・商用利用可能(MIT)
バージョンアップが早い
拡張が豊富(jQueryプラグイン)
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 3
4. 下準備
headにjQueryを読み込ませよう
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.hello.js"></script>
<title>Hello, jQuery</title>
</head>
<body>
</body>
</html>
自分で公式サイトからファイルをダウンロードしてきて、読み込ませても
良いですが、以下のサイトからGoogleがホスティングしているものに直
リンクするのがオススメです。楽だし
http://scriptsrc.net/
※jQueryの宣言は、自分のコードを読み込ませるより前に行ってくださ
い
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 4
6. jQuery超入門
$('.kawaz').css('background', 'red');
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 6
7. jQuery超入門
$('.kawaz').css('background', 'red');
jQueryオブジェクト(主体) メソッド(命令)
jQueryオブジェクト(主体).メソッド(命令)で構成されている!
上の例の場合、classがkawazの要素の背景色を赤くする
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 7
8. jQuery超入門
$('.kawaz').css('background', 'red');
jQueryオブジェクト(主体) メソッド(命令)
jQueryオブジェクト(主体).メソッド(命令)で構成されている!
上の例の場合、classがkawazの要素の背景色を赤くする
基本的に、jQueryコーディングは
操作したい要素の選択、探索
その要素に対してどのような操作をするか
2つに帰結する!
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 8
9. DOMってなに?
DOM = Document Object Model
HTML上にある要素をプログラムで扱いやすく定めたもの
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 9
12. DOMってなに?
超基本:HTMLは木構造になっている
HTML
HEAD
TITLE くだものいちらん
BODY
UL
LI りんご DOMノード
LI バナナ
LI みかん
各ノードは入れ子の構造になっている
LIの各ノードから見てULは親ノード、BODYより上は先祖ノードと
言ったりする
子ノード、子孫ノード、兄弟ノードといった言い方もする
いとこノードとかはとこノードという言い方は聞いたことがな
い……
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 12
14. $関数の使い方1
既存のDOM要素を選択する
CSSセレクタのようなものを引数に渡す
CSSセレクタに独自の拡張がされていたり、CSSセレクタに似せて実装されている別物なので「ようなもの」と表記
ドキュメント上から、これらにマッチするDOM要素全てを含んだ
jQueryオブジェクトを生成する
// 全てのp要素
$('p');
// kawazをclassに持つ要素
$('.kawaz');
// contentをidに持つ要素の直下にあるリスト要素
$('#content > li');
// リンク先がhttp://www.kawaz.orgから始まるa要素
$('a[href^="http://www.kawaz.org"]');
// 各親要素に対して3n+1(1, 4, 7…)番目にあるリスト要素
$('li:nth-child(3n+1)');
// 選択状態にあるテキストフィールド
$('input[type="text"]:selected');
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 14
15. $関数の使い方2
新しいDOM要素を生成する
タグやHTMLをそのまま文字列で引数として渡す
新しいDOM要素が生成され、それを含んだjQueryオブジェクトが生成
される
// 空のp要素を生成する
$('<p>');
// 文章を含んだp要素を生成する
$('<p>おなかすいた</p>');
// 入れ子にもできる
$('<p><b>ねむたい!!!!</b></p>');
他にも、DOM要素をオブジェクトとして直接渡したり、配列など別のオブジェクトを渡してjQueryオブジェクトを生
成することができるが、割愛する。
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 15
16. jQueryオブジェクトと変数
jQueryオブジェクトは普通の変数に格納できる
どんな名前の変数に格納することでもできるが、$から始まる変数名の
変数に格納することを強くオススメする
var $hoge = $('.hoge'); // いい
var hoge = $('.hoge'); // 問題なく動くけど避けるべき
これはルールではなくマナー、お作法
jQueryを書く人の間では「$から始まる変数にはjQueryオブジェクトが
格納されている」という暗黙の了解がある
当たり前だが、逆にほかのオブジェクトを$から始まる変数に入れないでください
jQueryに限らず、他の人を思いやって書けるプログラマは良いプログラ
マです
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 16
17. $(function(){});
jQueryを書き始める前に毎回これで囲んで書くことを強く推奨!
$(function(){
});
理由1:遅延実行させるため
これに囲むと、確実にHTMLの描画が終わってから実行される
囲まないと、HTMLの描画前に実行されるかもしれない
DOMノードが生成される前にセレクタを使うと取得できない
初心者が一番ハマるところだとおもう
理由2:名前空間を分離させるため
他のスクリプト、ブラウザ拡張、コンソールなどにより、中の状態を
書き換えられることを防ぐことができる
もちろん、プラグインを作るなど、囲んではいけない場合も存在するが、それは理解してきてからで良いと思う
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 17
18. jQueryの基本はこれだけ!
いままで説明したところで、「操作したい要素の選択・探索」は大体マス
ターしました。
あとは「命令」を覚えていくだけ!
基本的な命令だけ押さえておけばOK
残りは以下のページに「命令のカタログ」的なものがあるので、
ボーッと眺めて「こんなのあるんだー」と思っておけば完璧
jQuery 日本語リファレンス <http://semooh.jp/jquery/>
上のページ、初学者にはすごくオススメなのだけど、更新が2年も止まっているため、ある程度のレベルのこと
をするには微妙である。たとえば、後ほど説明する1.4.xから導入されたdelegateなども載っていない。
バージョンごとに細かい仕様変更があることもあるが、そこでハマることはほとんどないと思われるので、常用
には問題ないと思う。
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 18
19. jQueryの命令
命令(メソッド)は以下のように大別できる
Attributes(属性、内容の操作)
Traversing(要素の探索)
Manipulation(要素の操作)
CSS(CSSの操作)
Events(イベントの操作)
Effects(エフェクトを加える)
Ajax(通信、ネットワーク周り)
Utilities(その他もろもろ)
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 19
20. jQueryの命令
命令(メソッド)は以下のように大別できる
Attributes(属性、内容の操作)
Traversing(要素の探索)
Manipulation(要素の操作)
CSS(CSSの操作)
Events(イベントの操作)
Effects(エフェクトを加える)
Ajax(通信、ネットワーク周り)
Utilities(その他もろもろ)
今回は主に、デザイナさんが使うことの多い、太字についてメインに解
説する。特にイベント周りを重点的に。
筆者が、いろいろjQueryをいじり倒した上で、よく使うメソッドについ
てのみ取り上げるので、その他については先ほどのページを読んでおい
てほしい
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 20
21. Attributes
DOM要素の内容や属性を取得したり書き換えたり
ちなみに属性(Attr)とは以下の太字の部分である
<a href="http://www.kawaz.org/" title="Kawaz">Kawaz</a>
// jQueryオブジェクト最初の要素の属性値を取り出す
$('a').attr('href'); // http://www.kawaz.org
$('a').attr('alt', 'Kawazポータル'); // 設定する
// 一度に複数指定もできる
$('a').attr({alt : 'Kawazポータル', target :
'_blank'});
// classをつけたり外したり
$('a').addClass('link');
$('a').removeClass('link');
// 中身を取得、書き換える
$('a').text(); // Kawaz
$('a').text('Kawazポータル'); // 書き換える
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 21
22. Traversing
jQueryオブジェクトに含まれているDOM集合を選択したり、別のDOM
を探索したり
非常に種類があるが、基本的にこれぐらいしか使わない気がする
書こうと思えばいくらでも複雑にできるが、これぐらいにとどめてお
いた方が良いかも(後述)
$('div').filter('.hoge'); // divの要素集合の中からクラス名が
hogeのもののみ取り出す
$('div').children(); // divの子要素全てを取り出す
$('div').find('.piyo'); // divの子孫からクラス名がpiyoのもの
を取り出す
$('li').siblings(); // liの兄弟要素全てを返す
$('div').closest(); // divの直近の親要素を取り出す
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 22
24. Manipulation
DOMを追加したり削除したり
生成したDOMはappendなどで、すでに表示されているDOMに追加し
ないと表示されない
個人的にappend/prepend, before/after, wrap, empty, remove,
cloneぐらいしか使わない気がする
var $li = $('<li>').text("要素です!"); // 新しく要素を生成して
$('div').append($li); // 全てのdiv要素の一番下に挿入
$li.wrap('ul') // さらに要素で囲む<ul><li></li></ul>
var $newDiv = $('div.hoge').clone(); // hogeというクラスのdiv要素をコピー
$('div').before($newDiv); // 元々あったdivの前に挿入
$li.remove(); // でもやっぱり消す
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 24
25. Manipulation
DOMを追加したり削除したり
生成したDOMはappendなどで、すでに表示されているDOMに追加し
ないと表示されない
個人的にappend/prepend, before/after, wrap, empty, remove,
cloneぐらいしか使わない気がする
var $li = $('<li>').text("要素です!"); // 新しく要素を生成して
$('div').append($li); // 全てのdiv要素の一番下に挿入
$li.wrap('ul') // さらに要素で囲む<ul><li></li></ul>
var $newDiv = $('div').clone(); // div要素をコピー
$('div').before($newDiv); // 元々あったdivの前に挿入
$li.remove(); // でもやっぱり消す
<div>
</div>
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 25
26. Manipulation
DOMを追加したり削除したり
生成したDOMはappendなどで、すでに表示されているDOMに追加し
ないと表示されない
個人的にappend/prepend, before/after, wrap, empty, remove,
cloneぐらいしか使わない気がする
var $li = $('<li>').text("要素です!"); // 新しく要素を生成して
$('div').append($li); // 全てのdiv要素の一番下に挿入
$li.wrap('ul') // さらに要素で囲む<ul><li></li></ul>
var $newDiv = $('div').clone(); // div要素をコピー
$('div').before($newDiv); // 元々あったdivの前に挿入
$li.remove(); // でもやっぱり消す
<div>
<li>要素です!</li>
</div>
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 26
27. Manipulation
DOMを追加したり削除したり
生成したDOMはappendなどで、すでに表示されているDOMに追加し
ないと表示されない
個人的にappend/prepend, before/after, wrap, empty, remove,
cloneぐらいしか使わない気がする
var $li = $('<li>').text("要素です!"); // 新しく要素を生成して
$('div').append($li); // 全てのdiv要素の一番下に挿入
$li.wrap('ul') // さらに要素で囲む<ul><li></li></ul>
var $newDiv = $('div').clone(); // div要素をコピー
$('div').before($newDiv); // 元々あったdivの前に挿入
$li.remove(); // でもやっぱり消す
<div>
<ul>
<li>要素です!</li>
</ul>
</div>
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 27
28. Manipulation
DOMを追加したり削除したり
生成したDOMはappendなどで、すでに表示されているDOMに追加し
ないと表示されない
個人的にappend/prepend, before/after, wrap, empty, remove,
cloneぐらいしか使わない気がする
var $li = $('<li>').text("要素です!"); // 新しく要素を生成して
$('div').append($li); // 全てのdiv要素の一番下に挿入
$li.wrap('ul') // さらに要素で囲む<ul><li></li></ul>
var $newDiv = $('div').clone(); // div要素をコピー
$('div').before($newDiv); // 元々あったdivの前に挿入
$li.remove(); // でもやっぱり消す
<div>
<ul>
<li>要素です!</li>
</ul>
</div>
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 28
29. Manipulation
DOMを追加したり削除したり
生成したDOMはappendなどで、すでに表示されているDOMに追加し
ないと表示されない
個人的にappend/prepend, before/after, wrap, empty, remove,
cloneぐらいしか使わない気がする
var $li = $('<li>').text("要素です!"); // 新しく要素を生成して
$('div').append($li); // 全てのdiv要素の一番下に挿入
$li.wrap('ul') // さらに要素で囲む<ul><li></li></ul>
var $newDiv = $('div').clone(); // div要素をコピー
$('div').before($newDiv); // 元々あったdivの前に挿入
$li.remove(); // でもやっぱり消す
<div>
<ul>
<li>要素です!</li>
</ul>
</div>
<div>
<ul>
<li>要素です!</li>
</ul>
</div>
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 29
30. Manipulation
DOMを追加したり削除したり
生成したDOMはappendなどで、すでに表示されているDOMに追加し
ないと表示されない
個人的にappend/prepend, before/after, wrap, empty, remove,
cloneぐらいしか使わない気がする
var $li = $('<li>').text("要素です!"); // 新しく要素を生成して
$('div').append($li); // 全てのdiv要素の一番下に挿入
$li.wrap('ul') // さらに要素で囲む<ul><li></li></ul>
var $newDiv = $('div').clone(); // div要素をコピー
$('div').before($newDiv); // 元々あったdivの前に挿入
$li.remove(); // でもやっぱり消す
<div>
<ul>
<li>要素です!</li>
</ul>
</div>
<div>
<ul>
</ul>
</div>
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 30
31. CSS
文字通り、要素のCSS、見た目の操作
特に、横幅縦幅やスクロール位置を動的に取得できるのが便利!
一番直感的に理解しやすいので詳しい解説は不要かと
$('div').css('background'); // 背景色を取得
$('div').css('background', 'blue'); // 背景色を青に
$('div').width(); // 横幅を取り出す
$('div').width(100); // 横幅を100に変更
$('div').position(); // top, leftの値を親要素基準で取得
$('div').css('margin-left', '+=10'); // margin-leftを現在の値+10する
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 31
32. Effects
DOM要素を動かしたり、フェードアウトしたりが簡単にできる
個人的にjQueryを初めて覚えて、一番感激した機能。最初に学ぶと簡
単にかっこいい物が作れてモチベーションが上がると思う
EaseAnimation(だんだん遅くなったりとか早くなったりとか)も使え
る
コードサンプルよりデモを見たほうが楽しい
http://semooh.jp/jquery/api/effects/
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 32
33. Events
DOM要素にイベントを追加する
jQueryのキモだと思う
JavaScriptは基本的にイベントドリブン(イベント駆動)で開発して
いくため
イベントドリブン:○○が起こったとき、△△する、という処理を
ひたすら書いていく
あるボタンがクリックされたとき
あるテキストフィールドに文字が入力されたとき
エンターキーが押されたとき
アニメーションが終わったとき
通信が終わったとき
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 33
34. Events
基本は$.bind()
$('a').bind('mouseover', function(e){
alert("マウスが乗りました");
});
このコードが走った時、hoverされたときに実行する動作を予約する。
このコードが走った時点で処理が発生するわけではないので注意!
引数に渡す関数オブジェクトをcallbackと呼んだりする
bindでイベントを束縛すると、実行時点でセレクタにマッチする要素
でしかイベントが発生しないので注意!
たとえば、bindを行った後に新たなa要素を生成して、appendした
としても、そこではイベントは実行されない
ちなみに、最初から定義されている動作を殺すにはcallback内で
return falseしてやる。(aタグをクリックしてもリンクしないように
するなど)
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 34
35. Events
よく使うイベント
click, hover, change, focus, keydown, submitなど
ちなみに以下のようなショートカットも利用できる
前のページに書いた物と全く同じ動作をする
$('a').mouseover(function(e){
alert("マウスが乗りました");
});
bindの他
一度だけ実行して、以降はイベントを実行しないone
後から追加された要素に対してもイベントを紐づけるdelegate
などがある
liveというのも存在するが、delegateに似ているので、基本的にほぼ使わない
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 35
36. Ajax
Ajax = Asynchronous JavaScript + XML
一昔前(2006年頃)にメチャクチャ流行った
要はJSで外部と通信して、ページ遷移なしにページを書き換える仕組
み全般のこと
こんな名前だけどXMLはオワコンな気がする。最近はJSONを使うこ
とが多い。
近年は当たり前になってきたので改まってこういう言い方をすること
は少なくなったが、名残として残っている
jQueryではpostやgetなどhttp通信周りが扱える。デザイナが使うこ
とはあまりなく、コード例は省略するが、例題3で利用している。
個人的にはloadが便利すぎて生きるのが辛い
Kawazポータルのかわずったーもっと読む機能とか
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 36
38. 例題1
クリックすると適当なDOM要素をページに追加するボタンを作ろう
クリックする度、要素が増えるね
使うと簡単に作れるメソッド例
click
append
余裕があればfadeInやtoggleなどでEffectsをつけてみるとテンション
上がってくる
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 38
41. コーディングの際に
コンソールの使い方を覚える
普通のブラウザ(Chrome, Safari, Opera)で利用可能
FirefoxはFirebugを導入すれば利用可能
普通じゃないブラウザでは利用できない
文法エラーや記述ミスで実行が止まってしまった場合は怒ってくれるた
め、困ったら見てみるのが良いと思う。
また、console.logによるプリントデバッグも有効
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 41
43. jQueryプラグインとは
jQueryプラグインとは
jQueryはjQueryオブジェクトの命令を独自に拡張できる
jQueryプラグイン=拡張された命令を提供するもの
設定などが豊富に用意されていて、どの場合にも対応できるように汎化
されているプラグインが良いプラグイン
作り方は要望があれば解説しますが、汎用的に作るには結構な技術力が
必要です。
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 43
44. jQuery UIとは
おそらく最も有名なjQueryプラグイン
Web上でドラッグやリサイズ、複数選択など、普通に実装するにはク
ソ面倒なインターフェースを超簡単に実装できるようにするプラグイン
カスタマイズ性が高く、汎用的に使える
デモを見てみるのが良いと思う
http://jqueryui.com/
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 44
45. 基本的なプラグインの使い方
大体のプラグインはほぼ同じ使い方でこうやって使える
逆にこの方法で使えないプラグインはクソプラグインの可能性が高いの
で、使用を再考した方が良い $(function() {
$( "#draggable" ).draggable({
axis : 'x',
opacity : 0.5,
zIndex : 999
});
});
基本的に使いたい要素に対して追加した動作を呼び出し、必要に応じ
て、連想配列で設定を渡してあげる
当たり前だが設定はものによって項目が違うのでドキュメント参照
どんな順番で書いても動くが、アルファベット順に設定を書くと綺
麗だと思う
当たり前だが、プラグインをheadで読み込ませないといけない。
jQueryの後、自分で書くコードの前に読み込ませること
Copyright (C) 2011 www.kawaz.org All Rights Reserved. 45
Editor's Notes \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n