第５回HTML5ビギナーズ「 jQueryビギナーズ」

1. サンプルダウンロード
http://www.venezia-works.com/sample/jquery1.zip

2. 1
寄稿：
＠IT「HTML5アプリ作ろうぜ！」
※超人気！！
日経ソフトウエア、ITPro…
日経BP、SoftwareDesign…
自己紹介
代表的な著書：
レスポンシブWebデザイン
「超」実践デザイン集中講義
※韓国、台湾

3. このセッションの目標
・ 勉強意欲向上
・ jQuery文法理解
・ 習得方法理解
以上3点のみ！

7. http://www.basic-slider.com/
http://css-tricks.com/organic-tabs/
http://www.skitter-slider.net/
jQuery(DEMO)

8. jQuery使用方法
jQueryライブラリを読み込む
１．jQuery本サイト→ダウンロード
js/jquery-1.11.0.min.js
２．jQuery本サイト→URLコピー
http://code.jquery.com/jquery-1.11.0.min.js
sample0.html
sample1.html

9. jQuery最初のルール
基本
<script>
$(document).ready(function(){
//DOM構築後のタイミングで処理される
}
</script>
“$”と“jQuery”というものだけ使えるようになる。
（短い $ を使うことが多い）
 ※Wordpressでは、jQueryを使用する。

10. jQuery最初のルール
<script>
$(document).ready(function(){
//DOM構築後のタイミングで処理される
}
</script>
sample1.html
sample2.html

11. jQuery最初のルール
セレクタ → メソッド → イベント
何に対して → どのような事を → どのタイミングで

12. セレクタ は覚える！
セレクタ → メソッド → イベント
何に対して → どのような事を → どのタイミングで

13. CSSセレクタ互換の記述が可能
#id → $(“#id名”)
.class → $(“.class名”)
Element → $(“element名”)
[name=a] → $(“[name=a]”)
jQuery［セレクタ］

14. セレクタ（CSSと同様）
複数セレクタを指定 $("div, p, a")
要素の親子関係 $(”div > p")
先祖子孫 $(”div p”)
などなど…
jQuery［セレクタ］

15. セレクタ → メソッド → イベント
何に対して → どのような事を → どのタイミングで
メソッド は覚える！

16. jQuery[メソッド]
例） $(“セレクタ”).メソッド();
$(”#id“).html(‘<a href=“#”>次ページ</a>’);
$(”#id").css(“color”,”#ff0”);
$(”#id").hide();
$(”#id").show(4000); show.html
hide.html
css.html

17. セレクタ → メソッド → イベント
何に対して → どのような事を → どのタイミングで
イベント は覚える！

18. jQuery[イベント]
例） $(“セレクタ”).on(“click”,function(){
$(”#id").css(“color”,”#ff0”);
$(”#id").hide();
});
“click”,” dblclick”,”mouseout” ,”mousedown” ,”mouseup”,”mousemove”
“mouseenter”,”mouseleave”
,”change”,”select”,”focus”,”submit”,”resize”,”scroll”,”ready”,”keydown”,”ke
ypress”,”keyup”…
on.html

19. 最初はこれ覚えておけば！
セレクタ → メソッド → イベント
何に対して → どのような事を → どのタイミングで

20. Thank You.
https://www.facebook.com/venezia7