miimさん主催のjQuery勉強会で使ったスライドです。

1. jQueryの基礎を学ぼう
（・ω・）!
12年9月23日日曜日

2. 自己紹介
名前：河本結理（kawamoto yuri）
職業：制作アシスタント
所属：アクアリング
Twitter：@shiriweb
Facebook：yuri.kawamoto.94
ポートフォリオ：http://cascade.sub.jp/wp/
12年9月23日日曜日

3. 今日やる事
jQueryを使って簡単
なギャラリーを作る
12年9月23日日曜日

4. その前に
12年9月23日日曜日

5. jQueryとは
Javascriptライブラリ
CSSのように記述
クロスブラウザに対応し
ている
12年9月23日日曜日

6. jQueryで出来る事
CSSを操作できる
HTMLも操作できる
コンテンツに様々な動きを与える
12年9月23日日曜日

7. jQueryを学ぶ
jQueryダウンロード
HTMLへ組み込み
セレクタ
メソッド
イベント
変数
12年9月23日日曜日

8. 1.jQueryダウンロード
このボタンをクリック
http:/jquery.com/
12年9月23日日曜日

9. 2.HTMLに組み込む
scriptタグの中に読み込ませる
12年9月23日日曜日

10. $(document).ready()とは
DOMが読み込み終わったら(実行可能)実行する
(Document Object Model）htmlの各要素、たとえば<p>とか<img>とか
そういった類の要素にアクセスする仕組みのこと
12年9月23日日曜日

11. $(document).ready()とは
JavaScriptは読み込まれるとすぐ実行する
onloadイベントがあるが、動画、画像、音声な
どの外部リソースも全て読み込み終わってない
と実行されない
12年9月23日日曜日

12. $(document).ready()とは
$(function(){ ... });と同じ意味
12年9月23日日曜日

13. セレクタ
$(“p”).jQueryの命令
$("p")…pタグを選択ダブルクォーテーションでも
$(‘p’)…シングルクォーテーションでも
$(“p.red”)…ドットでつないでclassで指定
$(“p#red”)…シャープでつないでID指定
12年9月23日日曜日

14. セレクタ
CSSで使われるセレクタ
グループセレクタ $(“要素1,要素2”) まとめて選択
CSS2で使われるセレクタ
子セレクタ $(“親要素 > 子要素”) 直下の要素選択
隣接セレクタ $(“要素1 + 要素2”) 特定要素の次の要素を選択
CSS3で使われるセレクタ
否定疑似クラス $(“要素1:not(要素2)”) 要素2を除いた特定の要素
間接セレクタ $(“要素1 ~ 要素2”) 要素1~要素2まで
jQuery独自フィルター
eqフィルタ $(“要素:eq(番号)”) 指定した番号(0から)
その他↓
http://semooh.jp/jquery/api/selectors/
12年9月23日日曜日

15. jQueyラッパー
$()が返すのはDOM要素の配列を含む特別な
JavaScriptオブジェクト
このオブジェクトにはメソッドが定義されている
➡
この構造をラッパーと呼ぶ
12年9月23日日曜日

16. 実際見てみました
要素を格納した変数に
配列でアクセスできました！
12年9月23日日曜日

17. ちなみに…
IDだと一つしか取得できないので、
0番目の配列しかアクセス出来ません。
マークアップする際に同名のIDは一つだけという制限が身に染みま
す。。
12年9月23日日曜日

18. メソッド
メソッドとは要素に対しての操作方法、手法
12年9月23日日曜日

19. メソッド
$(“要素名”).メソッド(パラメータ);
↓
$(“p”).css(“color”,”#fee”);
12年9月23日日曜日

20. メソッド
属性値の変更と取得
attr(... , ...) 指定した属性の値を変更
class属性の追加と削除
addClass(...) class名を追加
removeClass(...) class名を削除
要素の置き換え
replaceWith(...) 要素を他の要素に置き換える
CSSの制御
css(... , ...) 指定したCSSプロパティを設定する
css({...}) 連続してCSSプロパティを指定する
その他↓
http://s3pw.com/qrefy/
12年9月23日日曜日

21. メソッド
jQueryはメソッドチェーンで
複数メソッドを指定する事が可能
↓
$(“要素名”).メソッド(パラメータ).メソッド(パラメータ).メソッド(パラメータ);
メソッドは自分の仕事を終えた後同じ要素を返す
12年9月23日日曜日

22. 変数
小さなストック場所
var hoge ; … hogeという変数を宣言
var hoge , huga; … 複数宣言
var hoge = “miim”; … hoge変数に文字列を代入
12年9月23日日曜日

23. 変数
要素を変数に格納出来る
var hoge = $(“div#hoge”);
以下のように指定ができる
hoge.css(“color”,”#fee”);
他にも便利な使い方いっぱいです！
12年9月23日日曜日

24. イベント
自分が意図したタイミングで実行させたい時に使う
$("セレクタ"). イベント(function(){
イベント発生時の処理
});
12年9月23日日曜日

25. イベント
<p id="main">
サンプルテキスト
</p>
<p id=”test”></p>
$(function(){
$("p#main").click(function(){
テキストをクリックしたら
});
});
12年9月23日日曜日

26. イベント
<p id="main">
サンプルテキスト
</p>
<p id=”test”></p>
$(function(){
$("p#main").click(function(){
var gettext = $(this).text(); テキストを取得
});
});
12年9月23日日曜日

27. $(this)ってなに
イベントが発生した元の要素を指す
今回だとここ
$(function(){
$("p#main").click(function(){
var gettext = $(this).text();
});
});
12年9月23日日曜日

28. イベント
<p id="main">
サンプルテキスト
</p>
<p id=”test”></p>
$(function(){
$("p#main").click(function(){ 取得した値をセット
var gettext = $(this).text();
$(“p#test”).text(gettext);
});
});
12年9月23日日曜日

29. イベント
<p id="main">
サンプルテキスト セットされた文字
</p>
<p id=”test”>サンプルテキスト</p>
$(function(){
$("p#main").click(function(){
var gettext = $(this).text();
$(“p#test”).text(gettext);
});
});
12年9月23日日曜日

30. ではギャラリー作ってみましょう
12年9月23日日曜日

31. 完成図
12年9月23日日曜日

32. まずはHTML
1.画像差し替えの対象要素一つ
2.差し替え用のサムネイルいくつか
<div id="main">
<img src="images/01.jpg" alt="">
</div>
<ul class="cf">
<li><img src="images/01.jpg" height="100" alt=""></li>
<li><img src="images/02.jpg" height="100" alt=""></li>
</ul>
12年9月23日日曜日

33. まずはHTML
1.画像差し替えの対象要素一つ
2.差し替え用のサムネイルいくつか
<div id="main">
<img src="images/01.jpg" alt="">
</div>
<ul class="cf">
<li><img src="images/01.jpg" height="100" alt=""></li>
<li><img src="images/02.jpg" height="100" alt=""></li>
</ul>
12年9月23日日曜日

34. 次はCSS
body{
position:relative
}
基準となる領域
ul{
position:absolute
} 絶対位置
ul li{
float:left
}
横並びにする
12年9月23日日曜日

35. jQueryを実装する
<div id="main">
<img src="images/01.jpg" alt="">
</div>
<ul class="cf">
<li><img src="images/01.jpg" height="100" alt=""></li>
<li><img src="images/02.jpg" height="100" alt=""></li>
</ul>
$(function(){
$("ul li img").click(function(){
画像をクリックしたら
});
});
12年9月23日日曜日

36. イベント
<div id="main">
<img src="images/01.jpg" alt="">
</div>
<ul class="cf">
<li><img src="images/01.jpg" height="100" alt=""></li>
<li><img src="images/02.jpg" height="100" alt=""></li>
</ul>
$(function(){
$("ul li img").click(function(){
var getsrc = $(this).attr('src'); ファイルパスを取得
});
});
12年9月23日日曜日

37. イベント
<div id="main">
<img src="images/01.jpg" alt="">
</div>
<ul class="cf">
<li><img src="images/01.jpg" height="100" alt=""></li>
<li><img src="images/02.jpg" height="100" alt=""></li>
</ul>
$(function(){
$("ul li img").click(function(){ 取得した値をセット
var getsrc = $(this).attr('src');
$(“div#main”).find(‘img’).attr(‘src’,getsrc);
});
});
12年9月23日日曜日

38. アニメーション
<div id="main">
<img src="images/01.jpg" alt="">
</div>
<ul class="cf">
<li><img src="images/01.jpg" height="100" alt=""></li>
<li><img src="images/02.jpg" height="100" alt=""></li>
</ul>
フェードアウトの
$(function(){
$("ul li img").click(function(){ アニメーションを設定
var getsrc = $(this).attr('src');
$(“div#main”).find(‘img’).stop().fadeOut(300, function(){
$(“div#main”).find(‘img’).attr('src', getsrc);
}).fadeIn(300);
});
});
12年9月23日日曜日

39. アニメーション
<div id="main">
<img src="images/01.jpg" alt="">
</div>
<ul class="cf">
<li><img src="images/01.jpg" height="100" alt=""></li>
<li><img src="images/02.jpg" height="100" alt=""></li>
</ul>
$(“div#main”).find(‘img’)が
$(function(){
$("ul li img").click(function(){ 多いので変数に入れましょう！
var getsrc = $(this).attr('src');
var main = $(“div#main”).find(‘img’);
main.stop().fadeOut(300, function(){
main.attr('src', getsrc);
}).fadeIn(300);
});
});
12年9月23日日曜日

40. fadeOutメソッド
main.stop().fadeOut(300, function(){
main.attr('src', getsrc);
}).fadeIn(300);
fadeOut([speed], [callback])
12年9月23日日曜日

41. スピード
main.stop().fadeOut(300, function(){
main.attr('src', getsrc);
}).fadeIn(300);
fadeOut([speed], [callback])
12年9月23日日曜日

42. コールバック関数
main.stop().fadeOut(300, function(){
main.attr('src', getsrc);
}).fadeIn(300);
fadeOut([speed], [callback])
12年9月23日日曜日

43. コールバック関数
main.stop().fadeOut(300, function(){
main.attr('src', getsrc);
}).fadeIn(300);
12年9月23日日曜日

44. stopメソッド
main.stop().fadeOut(300, function(){
main.attr('src', getsrc);
}).fadeIn(300);
12年9月23日日曜日

45. まとめ
jQueryはJavaScriptを簡単に書くためのライブラリ
CSSと同じ書き方で要素を選択出来る
要素に命令するときはメソッドを付けてやる
イベント発生時に命令を指定する事が出来る
12年9月23日日曜日

46. では、作ってみましょう
残った時間作ってみましょう。
周りと相談しながらでも大丈夫です。
出来た人は発表して工夫した点など教えてください！
何回発表しても大丈夫です。
12年9月23日日曜日