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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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