「 jQuery ビギナーズ 」

〜 jQuery 基礎 〜

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

2

寄稿：

＠ IT 「 HTML5 アプリ作ろうぜ！」※超人気！！

日経ソフトウエア、 ITPro…日経 BP 、 SoftwareDesign…

自己紹介

代表的な著書：レスポンシブ Web デザイン　　　　「超」実践デザイン集中講義　　　　　※韓国、台湾

このセッションの目標

・　勉強意欲向上

・　 jQuery 文法理解

・ 習得方法理解 　　

以上 3 点のみ！

jQuer

y

jQuery とは2006 年 8 月に登場John Resig （ジョン・レッシグ）が開発＆公開。JavaScript 用ライブラリライセンスは、 MIT License（ライブラリの著作権表示を削除しなければ、商用・非商用 関係なく誰でも自由に利用することが可能）

jQuery のメリット

主要ブラウザに対応できる

CSS セレクタ互換の記述が可能

拡張ライブラリが豊富

使用が簡単 コード記述量を抑えられる

Ajax, アニメーション ,etc…

デザイナに優しい

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.htmlsample1.html

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

“$” と“ jQuery” というものだけ使えるようになる。（短い $ を使うことが多い）

※Wordpress では、 jQuery を使用する。

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

sample1.htmlsample2.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.htmlhide.htmlcss.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”,”keypress”,”keyup”…

on.html

最初はこれ覚えておけば！

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

Thank You.

https://www.facebook.com/venezia7

信じてがんばれる人に奇跡は起きる