第３回授業スライド

4. • http://www.basic-slider.com/
• http://css-tricks.com/organic-tabs/
• http://www.skitter-slider.net/
jQuery(DEMO)

5. jQuery使用方法

6. jQuery最初のルール
• 基本
<script>
$(document).ready(function(){
//DOM構築後のタイミングで処理される
}
</script>
• “$”と“jQuery”というものだけ使えるようになる。
（短い $ を使うことが多い）
• ※Wordpressでは、jQueryを使用する。

7. jQuery最初のルール
• <script>
$(function(){
//DOM構築後のタイミングで処理される
}
</script>

8. jQuery最初のルール
セレクタ → メソッド → イベント
何に対して → どのような事を → どのタイミングで

9. セレクタ は覚える！
セレクタ → メソッド → イベント
何に対して → どのような事を → どのタイミングで

10. • CSSセレクタ互換の記述が可能
#id → $(“#id名”)
.class → $(“.class名”)
Element → $(“element名”)
[name=a] → $(“[name=a]”)
jQuery［セレクタ］

11. セレクタ（CSSと同様）
複数セレクタを指定 $("div, p, a")
要素の親子関係 $(”div > p")
先祖子孫 $(”div p”)
最初の要素 $(“li:first”)
偶数の要素 $("td:even") //odd
jQuery［セレクタ］

12. セレクタ → メソッド → イベント
何に対して → どのような事を → どのタイミングで
メソッド は覚える！

13. jQuery[メソッド]
例） $(“セレクタ”).メソッド();
var elem = ‘<a href=“#”>次ページ</a>’;
$(”#id“).html(elem);
$(”#id“).text(elem);
$(”#id").css(“color”,”#ff0”);
$(”#id").show(4000); //hide
$(”#id").prepend(elem); //要素の先頭にHTML要素を追加
$(”#id").append(elem); //要素の最後にHTML要素を追加
$(”#id").empty(); //子要素を全て削除
$(”#id").remove(); //要素を全て削除

14. セレクタ → メソッド → イベント
何に対して → どのような事を → どのタイミングで
イベント は覚える！

15. jQuery[イベント]
例） $(“セレクタ”).on(“click”, function(){
$(”#id").css(“color”,”#ff0”);
$(”#id").append(“<p>123</p>”);
});
“click”,” dblclick”,”mouseout” ,”mousedown” ,”mouseup”,”mousemove”
“mouseenter”,”mouseleave” ,”change”,”select”,”focus”,”submit”,”resize”,
”scroll”,”ready”,”keydown”,”keypress”,”keyup”…
onメソッドは後から追加された要素に対してもイベント取得が可能！

16. jQuery[イベント]
例）
$(“セレクタ”).on(“click”,”指定範囲”,function() {
$(”#id").css(“color”,”#ff0”);
$(”#id").append(“<p>123</p>”);
});
セレクタの要素内にある、特定の要素だけに指定が可能
※複数も可能（カンマで区切る）
※指定しない場合はNULL

17. jQuery[イベント]
例）
$(“セレクタ”).on(“イベント１ イベント２”, function(){
$(”#id").css(“color”,”#ff0”);
$(”#id").append(“<p>123</p>”);
});
イベントは複数指定可能
※複数も可能（スペースで区切る）

18. jQuery[イベント]
例）複数のイベントに処理も分けられる手法
$(“セレクタ”).on({
'mouseenter': function(){...},
'mouseleave': function(){...}
});

19. jQuery[イベント]
例）複数のイベントに処理も分けられる手法
$(“セレクタ”).on({
'mouseenter': function(){...},
'mouseleave': function(){...}
},”指定範囲”);

20. jQuery[イベント]
例） $(“セレクタ”).off(“イベント”);
例） $(“セレクタ”).off(“イベント”,”要素”);
イベントは複数指定可能
※複数も可能（スペースで区切る）

21. jQuery[イベント]
例） //★touchstart [タッチした最初にイベントが発生]
$("body").on("touchstart",function(){
$(this).append("<p>TouchStart</p>");
});
//★touchmove [タッチしながら移動してるときにイベントが
発生]
$("body").on("touchmove",function(){
$(this).append("<p>touchmove...</p>");
});
//★touchend [タッチを離した時にイベントが発生]
$("body").on("touchend",function(){
$(this).append("<p>TouchEnd</p>");
});

22. 最初はこれ覚えておけば！
セレクタ → メソッド → イベント
何に対して → どのような事を → どのタイミングで

23. Thank You.

24. 課題

25. http://localhost/jquery_gree/g3.html
①サムネイル
画像を利用
②サムネイル
タッチしたら
ここに大きく表示
③サムネイル
リンクorボタン
画像の切替（ ← → ）

27. Ajaxとは
• AjaxのAである「Asynchronous（非同期）」は、
非同期でのクライアント・サーバ間の通信を指しま
す
• JavaScriptによりクライアント上での動作が主でサ
ーバの負担を軽減
• 特にサーバの機能を必要としない

28. Ajaxのメリット
• Webページのリンクをクリックした時の待ち時間を
体感しなくてすむ。
• 必要な部分だけを必要なときに更新可能ですので高
速に動作します。
• 例）
５画面=5HTMLファイル
５画面=1HTMLファイル

29. Ajaxのデメリット
• SEO対策には不向き
• スクリプトの知識が必要
• 作りが複雑になりがち
• 更新履歴が残りません、ブラウザの[戻る]ボタンで
は1つ前の状態には戻りません。
• 更新後でも再表示すると初期状態に戻ってしまいま
す。

30. Ajaxの構文とプロパティ
$.ajax({
type: “GET”, //POST or GET
url: ‘＊＊＊＊＊＊＊＊＊'
});
type: GET or POST
受け取るときはGET、送信するときはPOST。

31. Ajaxの構文とプロパティ
$.ajax({
type: “GET”,
url: “*************”,
cache: false //キャッシュの有無をtrueかfalseで指定。
});
cache: true or false
JSONの場合はデフォルトでcache:true
JSONPの場合はcache:false
JSONをキャッシュをしたくない場合はcache:falseを指定しな
ければならない。

32. Ajaxの構文とプロパティ
$.ajax({
type: “GET”,
url: “*********”,
cache: false,
datatype: “json”
});
datatype: データ形式を指定
text, html, xml, json, jsonp, script

33. Ajaxの構文とプロパティ
$.ajax({
type: “GET”,
url: “*********”,
cache: false,
datatype: “json”,
data:{
“id”: 1,
“name”: ”yamazaki”
}
});
datatype: データ形式を指定
text, html, xml, json, jsonp, script

34. Ajaxの構文とプロパティ
$.ajax({
type: “GET”,
url: “*********”,
cache: false,
datatype: “jsonp”,
jsonpCallback: “jsonp_data”,
success: function(data){
var len = data.length;
for(var i=0; i<len; i++){
$("body").append('<p>'+data[i].id + ':' + data[i].mode+
'</p>');
}
}
});
datatype:“jsonp”の場合 → jsonpCallback: callback関数を指定

35. Ajaxの構文とプロパティ
$.ajax({
type: “GET”,
url: “*********”,
cache: false,
datatype: “jsonp”,
jsonpCallback: “jsonp_data”,
success: function(data){
var len = data.length;
for(var i=0; i<len; i++){
$("body").append('<p>'+data[i].id + ':' + data[i].mode+ '</p>');
}
}
});
通信が成功したときの処理を記述。第一引数を指定してJSONのデータを取得。

36. Ajaxの構文とプロパティ
$.ajax({
type: “GET”,
url: “*********”,
cache: false,
datatype: “jsonp”,
jsonpCallback: “jsonp_data”,
success: function(data){
var len = data.length;
for(var i=0; i<len; i++){
$("body").append('<p>'+data[i].id + ':' + data[i].mode+ '</p>');
}
},
error: function() {
alert(”エラー”);
},
complete: function() {
alert(“完了”);
}
});
通信が失敗したときの処理を記述

37. Ajaxの構文とプロパティ
$.ajax({
type: “GET”,
url: “*********”,
cache: false,
datatype: “jsonp”,
jsonpCallback: “jsonp_data”,
success: function(data){
var len = data.length;
for(var i=0; i<len; i++){
$("body").append('<p>'+data[i].id + ':' + data[i].mode+ '</p>');
}
},
error: function() {
alert(”エラー”);
},
complete: function() {
alert(“完了”);
}
});
通信処理が完了したときの処理を記述。（エラーでもこの完了処理は実行されることを考慮）

39. Thank You.