これから始める人のための
入門

大竹孔明
大竹 孔明 こうめ
コーディングを中心にWeb
制作をしています

Twitter : @Bamboo_C
Facebook : komei.otake

photo by susipaku at PAKUTASO
GCSS
http://gcss.info
共著
http://amzn.to/179krhH
ASCII.jp連載
http://ascii.jp/elem/000/000/818/818527/
jQueryとは
JavaScript
JavaScript
27
mouse over
mouse over
pop up
pop up
jQueryの特徴
・クロスブラウザ
・write less, do more
・豊富なプラグイン
・クロスブラウザ
・write less, do more
・豊富なプラグイン
PCブラウザ

スマートフォン
JavaScript

document.getElementById("op
acityTest").style.opacity = 0.5;
JavaScript
(IE対応)

document.getElementById("opacit
yTest").filter = "alpha(opacity=50)";
jQuery

$("#opacityTest").css("opacity",0.5);
・クロスブラウザ
・write less, do more
・豊富なプラグイン
・クロスブラウザ
・write less, do more
・豊富なプラグイン
jQuery プラグイン
http://plugins.jquery.com/
jQuery.heightLine.js
http://blog.webcreativepark.net/2013/10/21-112000.html
ASCII.jp連載
http://ascii.jp/elem/000/000/818/818527/
jQueryの
導入と使用方法
jQuery
http://jquery.com
クリック!
1系

IE6∼8をサポート

2系

IE6∼8は非サポート
高速、軽量
HTML
// 中略
<script src="jquery-1.10.2.min.js"></script>
</body>
// 中略
<!--[if lt IE 9]>
<script src="jquery-1.10.2.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jqu...
<script src="//ajax.googleapis.com/ajax/
libs/jquery/1.10.2/jquery.min.js"></script>
jQueryの文法
// 中略
<script src="jquery-1.10.2.min.js"></script>
<script>
jQuery(function ($) {
// ここに処理を書く
});
</script>
</body>
なにを

どうするか

$("#box").css("border", "1px solid red");
jQueryメソッドとは
jQueryオブジェクト
が持っている関数
jQueryオブジェクトとは
jQuery命令を
行えるオブジェクト
#box(文字列)
+
$()メソッド
¦¦
$( #box )
jQueryオブジェクト!
$(セレクタ).メソッド(パラメータ);
処理の命令
jQueryオブジェクト

処理の引数

$(セレクタ).メソッド(パラメータ);
忘れずに !

$(セレクタ).メソッド(パラメータ);
メソッド一覧
http://api.jquery.com/
メソッドチェーン
$(セレクタ).メソッド().メソッド
().メソッド()・・・
セレクタについて
$("#box");
トラバース
$("#box").find("a");
$(".box").not("a");
HTMLの操作
mouse over
HTML
// 中略
<div><a href="#" id=“sampleBtn”>サンプルボタン
</a></div>
<div><img alt="" src="http://dummyimage.com/
600x400/0eafff/...
CSS
#sampleImg {
visibility: hidden;
}
#sampleImg.hidden {
visibility: visible;
}
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
アニメーション
HTML
// 中略
<div><a href="#" id=“sampleBtn”>サンプルボタ
ン</a></div>
<div><img alt="" src="http://dummyimage.com/
600x400/0eafff/...
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleToggle();
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleToggle();
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleToggle(500);
return false;
});
ハンズオン

jQueryでUIを作ってみよう!
制作前の予備知識
変数
変数

var accordionBtn = $(“.accordionBtn”);
変数
宣言
var accordionBtn = $(“.accordionBtn”);
変数
変数名
var accordionBtn = $(“.accordionBtn”);
変数
値
var accordionBtn = $(“.accordionBtn”);
if文
if文
if( 条件式 ) {
// trueだったらこの中が実行される
} else {
// falseだったらこの中が実行される
}
比較演算子
比較演算子
> (右より左が大きい)
< (左より右が大きい)
=== (厳密に等しい)
!== (厳密には等しくない)
資料ダウンロード

URL:
・アコーディオン
・タブパネル
・アコーディオン
・タブパネル
・アコーディオン
・タブパネル
これから始める人のためのjQuery入門 先生:大竹 孔明
これから始める人のためのjQuery入門 先生:大竹 孔明
これから始める人のためのjQuery入門 先生:大竹 孔明
これから始める人のためのjQuery入門 先生:大竹 孔明
これから始める人のためのjQuery入門 先生:大竹 孔明
Upcoming SlideShare
Loading in …5
×

これから始める人のためのjQuery入門 先生:大竹 孔明

2,468 views

Published on

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/263/room
ーーーーーーーーーーーーーーーーーーーーーーー

Published in: Business
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,468
On SlideShare
0
From Embeds
0
Number of Embeds
1,021
Actions
Shares
0
Downloads
0
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

これから始める人のためのjQuery入門 先生:大竹 孔明

  1. 1. これから始める人のための 入門 大竹孔明
  2. 2. 大竹 孔明 こうめ コーディングを中心にWeb 制作をしています Twitter : @Bamboo_C Facebook : komei.otake photo by susipaku at PAKUTASO
  3. 3. GCSS http://gcss.info
  4. 4. 共著 http://amzn.to/179krhH
  5. 5. ASCII.jp連載 http://ascii.jp/elem/000/000/818/818527/
  6. 6. jQueryとは
  7. 7. JavaScript
  8. 8. JavaScript 27
  9. 9. mouse over
  10. 10. mouse over
  11. 11. pop up
  12. 12. pop up
  13. 13. jQueryの特徴
  14. 14. ・クロスブラウザ ・write less, do more ・豊富なプラグイン
  15. 15. ・クロスブラウザ ・write less, do more ・豊富なプラグイン
  16. 16. PCブラウザ スマートフォン
  17. 17. JavaScript document.getElementById("op acityTest").style.opacity = 0.5;
  18. 18. JavaScript (IE対応) document.getElementById("opacit yTest").filter = "alpha(opacity=50)";
  19. 19. jQuery $("#opacityTest").css("opacity",0.5);
  20. 20. ・クロスブラウザ ・write less, do more ・豊富なプラグイン
  21. 21. ・クロスブラウザ ・write less, do more ・豊富なプラグイン
  22. 22. jQuery プラグイン http://plugins.jquery.com/
  23. 23. jQuery.heightLine.js http://blog.webcreativepark.net/2013/10/21-112000.html
  24. 24. ASCII.jp連載 http://ascii.jp/elem/000/000/818/818527/
  25. 25. jQueryの 導入と使用方法
  26. 26. jQuery http://jquery.com
  27. 27. クリック!
  28. 28. 1系 IE6∼8をサポート 2系 IE6∼8は非サポート 高速、軽量
  29. 29. HTML // 中略 <script src="jquery-1.10.2.min.js"></script> </body>
  30. 30. // 中略 <!--[if lt IE 9]> <script src="jquery-1.10.2.min.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.3.min.js"></script> <!--[endif]--> </body> </html>
  31. 31. <script src="//ajax.googleapis.com/ajax/ libs/jquery/1.10.2/jquery.min.js"></script>
  32. 32. jQueryの文法
  33. 33. // 中略 <script src="jquery-1.10.2.min.js"></script> <script> jQuery(function ($) { // ここに処理を書く }); </script> </body>
  34. 34. なにを どうするか $("#box").css("border", "1px solid red");
  35. 35. jQueryメソッドとは
  36. 36. jQueryオブジェクト が持っている関数
  37. 37. jQueryオブジェクトとは
  38. 38. jQuery命令を 行えるオブジェクト
  39. 39. #box(文字列) + $()メソッド ¦¦ $( #box ) jQueryオブジェクト!
  40. 40. $(セレクタ).メソッド(パラメータ);
  41. 41. 処理の命令 jQueryオブジェクト 処理の引数 $(セレクタ).メソッド(パラメータ);
  42. 42. 忘れずに ! $(セレクタ).メソッド(パラメータ);
  43. 43. メソッド一覧 http://api.jquery.com/
  44. 44. メソッドチェーン
  45. 45. $(セレクタ).メソッド().メソッド ().メソッド()・・・
  46. 46. セレクタについて
  47. 47. $("#box");
  48. 48. トラバース
  49. 49. $("#box").find("a");
  50. 50. $(".box").not("a");
  51. 51. HTMLの操作
  52. 52. mouse over
  53. 53. HTML // 中略 <div><a href="#" id=“sampleBtn”>サンプルボタン </a></div> <div><img alt="" src="http://dummyimage.com/ 600x400/0eafff/ffffff.png" /></div> // 中略
  54. 54. CSS #sampleImg { visibility: hidden; } #sampleImg.hidden { visibility: visible; }
  55. 55. jQuery $("#sampleBtn").click(function(){ $(#sampleImg).toggleClass(“hidden"); return false; });
  56. 56. jQuery $("#sampleBtn").click(function(){ $(#sampleImg).toggleClass(“hidden"); return false; });
  57. 57. jQuery $("#sampleBtn").click(function(){ $(#sampleImg).toggleClass(“hidden"); return false; });
  58. 58. jQuery $("#sampleBtn").click(function(){ $(#sampleImg).toggleClass(“hidden"); return false; });
  59. 59. jQuery $("#sampleBtn").click(function(){ $(#sampleImg).toggleClass(“hidden"); return false; });
  60. 60. jQuery $("#sampleBtn").click(function(){ $(#sampleImg).toggleClass(“hidden"); return false; });
  61. 61. jQuery $("#sampleBtn").click(function(){ $(#sampleImg).toggleClass(“hidden"); return false; });
  62. 62. アニメーション
  63. 63. HTML // 中略 <div><a href="#" id=“sampleBtn”>サンプルボタ ン</a></div> <div><img alt="" src="http://dummyimage.com/ 600x400/0eafff/ffffff.png" /></div> // 中略
  64. 64. jQuery $("#sampleBtn").click(function(){ $(#sampleImg).toggleToggle(); return false; });
  65. 65. jQuery $("#sampleBtn").click(function(){ $(#sampleImg).toggleToggle(); return false; });
  66. 66. jQuery $("#sampleBtn").click(function(){ $(#sampleImg).toggleToggle(500); return false; });
  67. 67. ハンズオン jQueryでUIを作ってみよう!
  68. 68. 制作前の予備知識
  69. 69. 変数
  70. 70. 変数 var accordionBtn = $(“.accordionBtn”);
  71. 71. 変数 宣言 var accordionBtn = $(“.accordionBtn”);
  72. 72. 変数 変数名 var accordionBtn = $(“.accordionBtn”);
  73. 73. 変数 値 var accordionBtn = $(“.accordionBtn”);
  74. 74. if文
  75. 75. if文 if( 条件式 ) { // trueだったらこの中が実行される } else { // falseだったらこの中が実行される }
  76. 76. 比較演算子
  77. 77. 比較演算子 > (右より左が大きい) < (左より右が大きい) === (厳密に等しい) !== (厳密には等しくない)
  78. 78. 資料ダウンロード URL:
  79. 79. ・アコーディオン ・タブパネル
  80. 80. ・アコーディオン ・タブパネル
  81. 81. ・アコーディオン ・タブパネル

×