西畑一馬超入門今度こそ始める
フロントエンドエンジニア西畑 一馬
西畑 一馬フロントエンドエンジニアhttp://blog.webcreativepark.net
西畑 一馬フロントエンドエンジニア
西畑 一馬フロントエンドエンジニア
西畑 一馬フロントエンドエンジニア5/30より電子書籍版が販売開始iBookstore/Amazon Kindle/Google Playブックス楽天kobo/BOOK☆WALKER/ニコニコ静画 ほか
jQueryとは?jQueryの基本セレクターの基本HTMLやCSSの操作イベントの設定アニメーションjQueryの利用方法目次
Write less, do more .
Google Trendshttp://www.google.com/trends/explore?hl=ja#q=jQuery%20,JavaScript
クロスブラウザ対応
∼jQuery 1.8.3 後方互換を重視 jQuery 1.9.x 非推奨機能を削除  jQuery 2.0 IEのサポートを9からに変更 jQuery 1.10 IEのサポートが6以上jQuery Roadmap
jQuery-migratehttp://javascript.webcreativepark.net/library/jquery-migrate
jQueryで何ができるのか?HTMLとCSSの操作
ロールオーバー
ユーザーがimg要素の上にマウスカーソルを乗せた際にimg要素のsrc属性を変更
ギャラリー
ユーザーがサムネイルのa要素をクリックするとメインのimg要素のsrc属性をa要素のhref属性に変更
モーダルウィンドウ
ユーザーがサムネイルのa要素をクリックするとモーダル部分のcssをdisplay:blockに変更してギャラリーのsrc属性をa要素のhref属性に変更
フローティングウィンドウ
ユーザーがマウスを押し下げてドラッグするとフローティングウィンドウ部分のtopプロパティとleftプロパティがマウスに付いてくるように変更
スワイプギャラリー
ユーザーが画面をタッチしスワイプするとギャラリー部分のleftプロパティを指に付いてくるように変更
ほとんどのUIはJavaScriptでHTMLとCSSを操作することで作成されている
jQueryを学習するにあたって・jQueryの基本的な書き方を学ぶ・様々なUIの作成方法を学ぶ・JavaScriptの知識もちょっとは必要
jQueryの基本jQuery
jQueryの利用方法<script src="jquery-2.0.0.min.js"></script><script>$(function(){//jQueryの命令を記述していく});</script></head>
CDNの活用Google Hosted Librarieshttps://developers.google.com/speed/libraries/Microsoft Ajax CDNhttp://www.asp.net/ajaxlibrar...
<script src="//ajax.googleapis.com/ajax/libs/      jquery/2.0.0/jquery.min.js"></script>CDNの活用
CDNの活用A BCDN
セレクターAPI
セレクターAPIある要素のHTMLとCSSの操作
CSSセレクター$("h1")$("#content")$(".section")$("#main .link")$("h1,h2,h3")
CSS2.1セレクター$("ul > li")$("dt + dd")$("li:first-child")
CSS3セレクター$("a:not(.external)")$("li:last-child")$("li:nth-child(2)")$("li:nth-of-type(2)") jQuery 1.9∼:hover、:link、:active...
HTMLやCSSの操作
HTMLの操作$("p").html("<a href=#>リンク</a>");<p>....</p><p><a href=#>リンク</a></p>
HTMLの操作$("p").append("<em>...</em>");<p>....</p><p>....<em>...</em></p>
HTMLの操作$("p").prepend("<em>...</em>");<p>....</p><p><em>...</em>....</p>
HTMLの操作$("p").before("<em>...</em>");<p>....</p><em>...</em><p>....</p>
HTMLの操作$("p").after("<em>...</em>");<p>....</p><p>....</p><em>...</em>
属性の変更$("a").attr("href","http://to-r.net");<a href="#">....</a><a href="http://to-r.net">....</a>
class属性の追加$("p").addClass("bar");<p class="foo">....</p><p class="foo bar">....</p>
class属性の削除$("p").removeClass("bar");<p class="foo bar">....</p><p class="foo">....</p>
CSSの変更$("p").css("color","red");<p>....</p><p style="color:red">....</p>
CSSの変更$("p").css("font-size","12px");$("p").css("fontSize","12px");$("p").css("font-size",12);
CSSの変更$("p").css({"color":"red","background-color":"blue","font-size":"12px"});
イベントの設定
イベントの設定ある要素のHTMLとCSSの操作いつ?
clickイベント$("p").click(function(){//pがクリックされたタイミング});
mouseoverイベント$("p").mouseover(function(){//pにマウスがのったタイミング});
mouseoutイベント$("p").mouseout(function(){//pからマウスがはなれたタイミング});
アニメーション
fadeIn()/fadeOut()$("div").fadeIn(600);$("div").fadeOut(600);デモ
slideDown()/slideUp()$("div").slideDown(400);$("div").slideUp(400);デモ
jQueryの利用方法
アコーディオンパネル
アコーディオンパネル
ベースのHTMLを作成<body>! <dl>! ! <dt>Step.1</dt>! ! <dd><p>Lorem ipsum! ! (中略)! ! venenatis.</p></dd>! ! <dt>Step.2</dt>! ! <dd>...
CSSでベースを整形body{! background:#252422;}dl{! width:800px;! margin:50px auto;}dt{! line-height:35px;! font-size:large;! text-i...
HTMLとCSSのみのベース
jQueryで機能を追加ラベル部分がクリックされると、対応するアコーディオンが開き、開いているアコーディオンは閉じる。
jQueryで機能を追加dt要素がクリックされた際に、対応するdd要素がスライドアニメーションで開き、開いているdd要素はスライドアニメーションで閉じる。
完成形のスクリプト$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this)....
まずは、お約束$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).cs...
初期表示を作成$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).cs...
クリックイベントを設定$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this...
if文$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).css("d...
条件式$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).css("d...
セレクタの有効範囲を指定$("+dd",this).css("display")クリックされた要素(this)の次に登場するdd要素
CSSプロパティの値を取得$("+dd",this).css("display")$(セレクター).css("プロパティ名")で値が取得できる
条件文$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).css("d...
スライドアニメーション$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this...
まとめこれからのWeb制作ではjQueryの知識は必須jQueryを利用すれば複雑なJavaScriptが簡単に記述できるほとんどのUIはHTMLとCSSを操作して作成可能まずは、機能を日本語で表現することから始めてください
Thank You!
今度こそ始めるjQuery超入門
Upcoming SlideShare
Loading in …5
×

今度こそ始めるjQuery超入門

4,137 views

Published on

0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,137
On SlideShare
0
From Embeds
0
Number of Embeds
1,443
Actions
Shares
0
Downloads
0
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide

今度こそ始めるjQuery超入門

  1. 1. 西畑一馬超入門今度こそ始める
  2. 2. フロントエンドエンジニア西畑 一馬
  3. 3. 西畑 一馬フロントエンドエンジニアhttp://blog.webcreativepark.net
  4. 4. 西畑 一馬フロントエンドエンジニア
  5. 5. 西畑 一馬フロントエンドエンジニア
  6. 6. 西畑 一馬フロントエンドエンジニア5/30より電子書籍版が販売開始iBookstore/Amazon Kindle/Google Playブックス楽天kobo/BOOK☆WALKER/ニコニコ静画 ほか
  7. 7. jQueryとは?jQueryの基本セレクターの基本HTMLやCSSの操作イベントの設定アニメーションjQueryの利用方法目次
  8. 8. Write less, do more .
  9. 9. Google Trendshttp://www.google.com/trends/explore?hl=ja#q=jQuery%20,JavaScript
  10. 10. クロスブラウザ対応
  11. 11. ∼jQuery 1.8.3 後方互換を重視 jQuery 1.9.x 非推奨機能を削除  jQuery 2.0 IEのサポートを9からに変更 jQuery 1.10 IEのサポートが6以上jQuery Roadmap
  12. 12. jQuery-migratehttp://javascript.webcreativepark.net/library/jquery-migrate
  13. 13. jQueryで何ができるのか?HTMLとCSSの操作
  14. 14. ロールオーバー
  15. 15. ユーザーがimg要素の上にマウスカーソルを乗せた際にimg要素のsrc属性を変更
  16. 16. ギャラリー
  17. 17. ユーザーがサムネイルのa要素をクリックするとメインのimg要素のsrc属性をa要素のhref属性に変更
  18. 18. モーダルウィンドウ
  19. 19. ユーザーがサムネイルのa要素をクリックするとモーダル部分のcssをdisplay:blockに変更してギャラリーのsrc属性をa要素のhref属性に変更
  20. 20. フローティングウィンドウ
  21. 21. ユーザーがマウスを押し下げてドラッグするとフローティングウィンドウ部分のtopプロパティとleftプロパティがマウスに付いてくるように変更
  22. 22. スワイプギャラリー
  23. 23. ユーザーが画面をタッチしスワイプするとギャラリー部分のleftプロパティを指に付いてくるように変更
  24. 24. ほとんどのUIはJavaScriptでHTMLとCSSを操作することで作成されている
  25. 25. jQueryを学習するにあたって・jQueryの基本的な書き方を学ぶ・様々なUIの作成方法を学ぶ・JavaScriptの知識もちょっとは必要
  26. 26. jQueryの基本jQuery
  27. 27. jQueryの利用方法<script src="jquery-2.0.0.min.js"></script><script>$(function(){//jQueryの命令を記述していく});</script></head>
  28. 28. CDNの活用Google Hosted Librarieshttps://developers.google.com/speed/libraries/Microsoft Ajax CDNhttp://www.asp.net/ajaxlibrary/cdn.ashx
  29. 29. <script src="//ajax.googleapis.com/ajax/libs/      jquery/2.0.0/jquery.min.js"></script>CDNの活用
  30. 30. CDNの活用A BCDN
  31. 31. セレクターAPI
  32. 32. セレクターAPIある要素のHTMLとCSSの操作
  33. 33. CSSセレクター$("h1")$("#content")$(".section")$("#main .link")$("h1,h2,h3")
  34. 34. CSS2.1セレクター$("ul > li")$("dt + dd")$("li:first-child")
  35. 35. CSS3セレクター$("a:not(.external)")$("li:last-child")$("li:nth-child(2)")$("li:nth-of-type(2)") jQuery 1.9∼:hover、:link、:active、:visited以外のCSSセレクターをサポート
  36. 36. HTMLやCSSの操作
  37. 37. HTMLの操作$("p").html("<a href=#>リンク</a>");<p>....</p><p><a href=#>リンク</a></p>
  38. 38. HTMLの操作$("p").append("<em>...</em>");<p>....</p><p>....<em>...</em></p>
  39. 39. HTMLの操作$("p").prepend("<em>...</em>");<p>....</p><p><em>...</em>....</p>
  40. 40. HTMLの操作$("p").before("<em>...</em>");<p>....</p><em>...</em><p>....</p>
  41. 41. HTMLの操作$("p").after("<em>...</em>");<p>....</p><p>....</p><em>...</em>
  42. 42. 属性の変更$("a").attr("href","http://to-r.net");<a href="#">....</a><a href="http://to-r.net">....</a>
  43. 43. class属性の追加$("p").addClass("bar");<p class="foo">....</p><p class="foo bar">....</p>
  44. 44. class属性の削除$("p").removeClass("bar");<p class="foo bar">....</p><p class="foo">....</p>
  45. 45. CSSの変更$("p").css("color","red");<p>....</p><p style="color:red">....</p>
  46. 46. CSSの変更$("p").css("font-size","12px");$("p").css("fontSize","12px");$("p").css("font-size",12);
  47. 47. CSSの変更$("p").css({"color":"red","background-color":"blue","font-size":"12px"});
  48. 48. イベントの設定
  49. 49. イベントの設定ある要素のHTMLとCSSの操作いつ?
  50. 50. clickイベント$("p").click(function(){//pがクリックされたタイミング});
  51. 51. mouseoverイベント$("p").mouseover(function(){//pにマウスがのったタイミング});
  52. 52. mouseoutイベント$("p").mouseout(function(){//pからマウスがはなれたタイミング});
  53. 53. アニメーション
  54. 54. fadeIn()/fadeOut()$("div").fadeIn(600);$("div").fadeOut(600);デモ
  55. 55. slideDown()/slideUp()$("div").slideDown(400);$("div").slideUp(400);デモ
  56. 56. jQueryの利用方法
  57. 57. アコーディオンパネル
  58. 58. アコーディオンパネル
  59. 59. ベースのHTMLを作成<body>! <dl>! ! <dt>Step.1</dt>! ! <dd><p>Lorem ipsum! ! (中略)! ! venenatis.</p></dd>! ! <dt>Step.2</dt>! ! <dd><p>Integer rhoncus! ! (中略)! ! ultricies accumsan. </p></dd>! ! <dt>Step.3</dt>! ! <dd><p>Integer pretium! ! (中略)! ! imperdiet. </p></dd>! </dl></body>
  60. 60. CSSでベースを整形body{! background:#252422;}dl{! width:800px;! margin:50px auto;}dt{! line-height:35px;! font-size:large;! text-indent:3em;! font-weight:bold;! color:white;! height:35px;! background:url("images/background.jpg")}dd{! margin:0;! height:300px;! background:#D4D0C8;}dd p{! margin:0;! text-indent:1em;! padding:20px;}!
  61. 61. HTMLとCSSのみのベース
  62. 62. jQueryで機能を追加ラベル部分がクリックされると、対応するアコーディオンが開き、開いているアコーディオンは閉じる。
  63. 63. jQueryで機能を追加dt要素がクリックされた際に、対応するdd要素がスライドアニメーションで開き、開いているdd要素はスライドアニメーションで閉じる。
  64. 64. 完成形のスクリプト$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).css("display")=="none"){! ! ! $("dd").slideUp(400);! ! ! $("+dd",this).slideDown(400);! ! }! });});たった9行!!
  65. 65. まずは、お約束$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).css("display")=="none"){! ! ! $("dd").slideUp(400);! ! ! $("+dd",this).slideDown(400);! ! }! });});残り7行!
  66. 66. 初期表示を作成$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).css("display")=="none"){! ! ! $("dd").slideUp(400);! ! ! $("+dd",this).slideDown(400);! ! }! });});1番目以外のdd要素のdisplayプロパティをnoneに変更残り6行!
  67. 67. クリックイベントを設定$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).css("display")=="none"){! ! ! $("dd").slideUp(400);! ! ! $("+dd",this).slideDown(400);! ! }! });});dt要素がクリックされた際の処理を設定残り4行!
  68. 68. if文$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).css("display")=="none"){! ! ! $("dd").slideUp(400);! ! ! $("+dd",this).slideDown(400);! ! }! });});if(...)の条件が正しい場合のみ{...}の処理を実行
  69. 69. 条件式$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).css("display")=="none"){! ! ! $("dd").slideUp(400);! ! ! $("+dd",this).slideDown(400);! ! }! });});==の左右の値が正しいかチェック
  70. 70. セレクタの有効範囲を指定$("+dd",this).css("display")クリックされた要素(this)の次に登場するdd要素
  71. 71. CSSプロパティの値を取得$("+dd",this).css("display")$(セレクター).css("プロパティ名")で値が取得できる
  72. 72. 条件文$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).css("display")=="none"){! ! ! $("dd").slideUp(400);! ! ! $("+dd",this).slideDown(400);! ! }! });}); クリックされたdt要素の次に登場するdd要素のdisplayプロパティが「none」の場合は{...}内の処理を実行する残り2行!
  73. 73. スライドアニメーション$(function(){! $("dd:not(:first-of-type)").css("display","none");! $("dt").click(function(){! ! if($("+dd",this).css("display")=="none"){! ! ! $("dd").slideUp(400);! ! ! $("+dd",this).slideDown(400);! ! }! });});スライドアニメーションでアコーディオンパネルの開閉を行う終了!
  74. 74. まとめこれからのWeb制作ではjQueryの知識は必須jQueryを利用すれば複雑なJavaScriptが簡単に記述できるほとんどのUIはHTMLとCSSを操作して作成可能まずは、機能を日本語で表現することから始めてください
  75. 75. Thank You!

×