Upload
daisuke-yamazaki
View
1.127
Download
2
Embed Size (px)
DESCRIPTION
第5回HTML5ビギナーズ「 jQueryビギナーズ」
Citation preview
「 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 ライブラリを読み込む1. jQuery 本サイト→ダウンロード js/jquery-1.11.0.min.js
2. 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
信じてがんばれる人に奇跡は起きる