際際滷

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

逮河顎艶姻霞聞喘圭隈

jQuery恷兜のル�`ル
? 児云
<script>
$(document).ready(function(){
//DOM��B瘁のタイミングで�I尖される
}
</script>
? ＾$￣と＾jQuery￣というものだけ聞えるようになる。
�玉い $ を聞うことが謹い�
? ☆Wordpressでは、jQueryを聞喘する。

? <script>
$(function(){
//DOM��B瘁のタイミングで�I尖される
}
</script>

セレクタ ★ メソッド ★ イベント
採に��して ★ どのような並を ★ どのタイミングで

セレクタは�える�

? CSSセレクタ札�Qの�峰が辛嬬
#id ★ $(＾#id兆￣)
.class ★ $(＾.class兆￣)
Element ★ $(＾element兆￣)
[name=a] ★ $(＾[name=a]￣)
jQuery�セレクタ�

セレクタ�CSSと揖��
�}方セレクタを峺協 $("div, p, a")
勣殆の�H徨�v�S $(￣div > p")
枠怕徨�O $(￣div p￣)
恷兜の勣殆 $(＾li:first￣)
甜方の勣殆 $("td:even") //odd
jQuery�セレクタ�

メソッドは�える�

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(); //勣殆を畠て�茅

イベントは�える�

jQuery[イベント]
箭� $(＾セレクタ￣).on(＾click￣, function(){
$(￣#id").append(＾<p>123</p>￣);
});
＾click￣,￣ dblclick￣,￣mouseout￣ ,￣mousedown￣ ,￣mouseup￣,￣mousemove￣
＾mouseenter￣,￣mouseleave￣ ,￣change￣,￣select￣,￣focus￣,￣submit￣,￣resize￣,
￣scroll￣,￣ready￣,￣keydown￣,￣keypress￣,￣keyup￣´
onメソッドは瘁から弖紗された勣殆に��してもイベント函誼が辛嬬�

箭�
$(＾セレクタ￣).on(＾click￣,￣峺協��譟�,function() {
$(￣#id").append(＾<p>123</p>￣);
});
セレクタの勣殆坪にある、蒙協の勣殆だけに峺協が辛嬬
☆�}方も辛嬬�カンマで曝俳る�
☆峺協しない��呂�NULL

箭�
$(＾セレクタ￣).on(＾イベント１イベント２￣, function(){
$(￣#id").append(＾<p>123</p>￣);
});
イベントは�}方峺協辛嬬
☆�}方も辛嬬�スペ�`スで曝俳る�

箭��}方のイベントに�I尖も蛍けられる返隈
$(＾セレクタ￣).on({
'mouseenter': function(){...},
'mouseleave': function(){...}
});

箭��}方のイベントに�I尖も蛍けられる返隈
$(＾セレクタ￣).on({
'mouseenter': function(){...},
'mouseleave': function(){...}
},￣峺協��譟�);

箭� $(＾セレクタ￣).off(＾イベント￣);
箭� $(＾セレクタ￣).off(＾イベント￣,￣勣殆￣);
イベントは�}方峺協辛嬬
☆�}方も辛嬬�スペ�`スで曝俳る�

箭� //￥touchstart [タッチした恷兜にイベントが�k伏]
$("body").on("touchstart",function(){
$(this).append("<p>TouchStart</p>");
});
//￥touchmove [タッチしながら卞�咾靴討襪箸④縫ぅ戰鵐箸�
�k伏]
$("body").on("touchmove",function(){
$(this).append("<p>touchmove...</p>");
});
//￥touchend [タッチを�xした�rにイベントが�k伏]
$("body").on("touchend",function(){
$(this).append("<p>TouchEnd</p>");
});

恷兜はこれ�えておけば�

http://localhost/jquery_gree/g3.html
�サムネイル
鮫�を旋喘
�サムネイル
タッチしたら
ここに寄きく燕幣
�サムネイル
リンクorボタン
鮫�の俳紋� ○ ★ �

Ajaxとは
? AjaxのAである仝Asynchronous�掲揖豚�々は、
掲揖豚でのクライアント?サ�`バ�gの宥佚を峺しま
す
? JavaScriptによりクライアント貧での�嘛��妊�
�`バの�毅を�X�p
? 蒙にサ�`バの字嬬を駅勣としない

Ajaxのメリット
? Webペ�`ジのリンクをクリックした�rの棋ち�r�gを
悶湖しなくてすむ。
? 駅勣な何蛍だけを駅勣なときに厚仟辛嬬ですので互
堀に�嘛�靴泙后�
? 箭�
５鮫中=5HTMLファイル
５鮫中=1HTMLファイル

Ajaxのデメリット
? SEO��貨には音�き
? スクリプトの岑�Rが駅勣
? 恬りが�}�jになりがち
? 厚仟堕�sが火りません、ブラウザの[��]ボタンで
は1つ念の彜�Bには��蠅泙擦鵝�
? 厚仟瘁でも壅燕幣すると兜豚彜�Bに��辰討靴泙い�
す。

Ajaxの��猟とプロパティ
$.ajax({
type: ＾GET￣, //POST or GET
url: ｀��'
});
type: GET or POST
鞭け函るときはGET、僕佚するときはPOST。

$.ajax({
type: ＾GET￣,
url: ＾***￣,
cache: false //キャッシュの嗤�oをtrueかfalseで峺協。
});
cache: true or false
JSONの��呂魯妊侫�襯箸�cache:true
JSONPの��呂�cache:false
JSONをキャッシュをしたくない��呂�cache:falseを峺協しな
ければならない。

$.ajax({
type: ＾GET￣,
url: ＾****￣,
cache: false,
datatype: ＾json￣
});
datatype: デ�`タ侘塀を峺協
text, html, xml, json, jsonp, script

$.ajax({
type: ＾GET￣,
url: ＾****￣,
cache: false,
datatype: ＾json￣,
data:{
＾id￣: 1,
＾name￣: ￣yamazaki￣
}
});
datatype: デ�`タ侘塀を峺協
text, html, xml, json, jsonp, script

$.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�v方を峺協

$.ajax({
type: ＾GET￣,
url: ＾****￣,
cache: false,
$("body").append('<p>'+data[i].id + ':' + data[i].mode+ '</p>');
}
}
});
宥佚が撹孔したときの�I尖を�峰。及匯哈方を峺協してJSONのデ�`タを函誼。

$.ajax({
type: ＾GET￣,
url: ＾****￣,
cache: false,
}
},
error: function() {
alert(￣エラ�`￣);
},
complete: function() {
alert(＾頼阻￣);
}
});
宥佚が払�，靴燭箸④�I尖を�峰

$.ajax({
type: ＾GET￣,
url: ＾****￣,
cache: false,
}
},
error: function() {
alert(￣エラ�`￣);
},
complete: function() {
alert(＾頼阻￣);
}
});
宥佚�I尖が頼阻したときの�I尖を�峰。�エラ�`でもこの頼阻�I尖は�g佩されることを深�]�

際際滷

No3

Recommended

More Related Content

What's hot (7)

Similar to No3 (20)

More from Daisuke Yamazaki (10)

No3