Your SlideShare is downloading. ×
今度こそ始めるjQuery超入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

今度こそ始めるjQuery超入門

3,204
views

Published on


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

No Downloads
Views
Total Views
3,204
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
0
Comments
0
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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