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

1. これから始める人のための
入門
大竹孔明

2. 大竹 孔明 こうめ
コーディングを中心にWeb
制作をしています
Twitter : @Bamboo_C
Facebook : komei.otake
photo by susipaku at PAKUTASO

3. GCSS
http://gcss.info

4. 共著
http://amzn.to/179krhH

5. ASCII.jp連載
http://ascii.jp/elem/000/000/818/818527/

6. jQueryとは

7. JavaScript

8. JavaScript
27

9. mouse over

10. mouse over

11. pop up

12. pop up

13. jQueryの特徴

14. ・クロスブラウザ
・write less, do more
・豊富なプラグイン

15. ・クロスブラウザ
・write less, do more
・豊富なプラグイン

16. PCブラウザ
スマートフォン

17. JavaScript
document.getElementById("op
acityTest").style.opacity = 0.5;

18. JavaScript
（IE対応）
document.getElementById("opacit
yTest").filter = "alpha(opacity=50)";

19. jQuery
$("#opacityTest").css("opacity",0.5);

20. ・クロスブラウザ
・write less, do more
・豊富なプラグイン

22. ・クロスブラウザ
・write less, do more
・豊富なプラグイン

23. jQuery プラグイン
http://plugins.jquery.com/

24. jQuery.heightLine.js
http://blog.webcreativepark.net/2013/10/21-112000.html

25. ASCII.jp連載
http://ascii.jp/elem/000/000/818/818527/

26. jQueryの
導入と使用方法

27. jQuery
http://jquery.com

28. クリック！

31. 1系
IE6∼8をサポート
2系
IE6∼8は非サポート
高速、軽量

33. HTML
// 中略
<script src="jquery-1.10.2.min.js"></script>
</body>

34. // 中略
<!--[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>

35. <script src="//ajax.googleapis.com/ajax/
libs/jquery/1.10.2/jquery.min.js"></script>

36. jQueryの文法

37. // 中略
<script src="jquery-1.10.2.min.js"></script>
<script>
jQuery(function ($) {
// ここに処理を書く
});
</script>
</body>

38. なにを
どうするか
$("#box").css("border", "1px solid red");

39. jQueryメソッドとは

40. jQueryオブジェクト
が持っている関数

41. jQueryオブジェクトとは

42. jQuery命令を
行えるオブジェクト

43. #box(文字列)
＋
$()メソッド
¦¦
$( #box )
jQueryオブジェクト！

44. $(セレクタ).メソッド(パラメータ);

45. 処理の命令
jQueryオブジェクト
処理の引数
$(セレクタ).メソッド(パラメータ);

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

47. メソッド一覧
http://api.jquery.com/

48. メソッドチェーン

49. $(セレクタ).メソッド().メソッド
().メソッド()・・・

50. セレクタについて

51. $("#box");

52. トラバース

53. $("#box").find("a");

54. $(".box").not("a");

55. HTMLの操作

56. mouse over

57. HTML
// 中略
<div><a href="#" id=“sampleBtn”>サンプルボタン
</a></div>
<div><img alt="" src="http://dummyimage.com/
600x400/0eafff/ffffff.png" /></div>
// 中略

58. CSS
#sampleImg {
visibility: hidden;
}
#sampleImg.hidden {
visibility: visible;
}

59. jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});

60. jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});

61. jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});

62. jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});

63. jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});

64. jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});

65. jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});

66. アニメーション

68. HTML
// 中略
<div><a href="#" id=“sampleBtn”>サンプルボタ
ン</a></div>
<div><img alt="" src="http://dummyimage.com/
600x400/0eafff/ffffff.png" /></div>
// 中略

69. jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleToggle();
return false;
});

70. jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleToggle();
return false;
});

71. jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleToggle(500);
return false;
});

72. ハンズオン
jQueryでUIを作ってみよう!

73. 制作前の予備知識

74. 変数

75. 変数
var accordionBtn = $(“.accordionBtn”);

76. 変数
宣言
var accordionBtn = $(“.accordionBtn”);

77. 変数
変数名
var accordionBtn = $(“.accordionBtn”);

78. 変数
値
var accordionBtn = $(“.accordionBtn”);

79. if文

80. if文
if( 条件式 ) {
// trueだったらこの中が実行される
} else {
// falseだったらこの中が実行される
}

81. 比較演算子

82. 比較演算子
> （右より左が大きい）
< （左より右が大きい）
=== （厳密に等しい）
!== （厳密には等しくない）

83. 資料ダウンロード
URL:

84. ・アコーディオン
・タブパネル

85. ・アコーディオン
・タブパネル

86. ・アコーディオン
・タブパネル