Upload
ezoapp
View
1.058
Download
0
Embed Size (px)
DESCRIPTION
介紹 jQuery 基本語法和結構,搭配 EZoApp 做出元件控制、互動表單、動畫與串接後段的實做,深入淺出的了解 jQuery
Citation preview
jQuery + EZoAppwww.ezoui.com
要來介紹一些更有趣的玩意了!
jQuery + EZoApp
變身!?
先來談談 jQuery
<script src="jquery.min.js"></script>
jQuery 預載的程式
2
jQuery
$3
因為 jQuery 簡化 了網頁元素的操控方式
jQuery 為什麼好用?
4
起手式 抓取 id :$('#aaa')
抓取 class :$('.bbb')
抓取 attribute :$('[data-role="ccc"]')
抓取 DOM :$('span')
抓 Element
5
http://goo.gl/x8hWiX
範例 1 : 使用 jQuery 將內容放入指定的
element
$('span').html(內容 ) $('#aaa').html(內容 ) $('.bbb').html(內容 ) $('[data-role="ccc"]').html(內容 )
6
第貳式
find & selectfind :$('#aaa').find('span')$('.bbb').find('span')$('[data-role="ccc"]').find('span')
select :$('#aaa span')$('.bbb span')$('[data-role="ccc"] span')
族繁不及備載http://api.jquery.com/category/selectors/http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
7
http://goo.gl/S1qgMP
範例 2 : 使用 jQuery 將內容放入指定的
element
$('span span').html(內容 ) $('#aaa span').html(內容 ) $('.bbb span').html(內容 ) $('[data-role="ccc"] span').html(內容 )
8
http://goo.gl/OIASOZ
範例 3 :select + find
$('span span').find('div').html(內容 ) $('#aaa span').find('div').html(內容 ) $('.bbb span').find('div').html(內容 ) $('[data-role="ccc"] span').find('div').html(內容 )
9
jQuery 最強 的一式
10
API
11
效果
$(selector).hide();
$(selector).show();
$(selector).fadeIn();
$(selector).fadeOut();
$(selector).slideDown();
$(selector).slideUp();
$(selector).animate();
jQuery effectshttp://api.jquery.com/category/effects/http://www.w3school.com.cn/jquery/jquery_ref_effects.asp
12
事件
jQuery eventshttp://api.jquery.com/category/events/http://www.w3school.com.cn/jquery/jquery_ref_events.asp
$(selector).on();
$(selector).one();
$(selector).off();
$(selector).hover();
$(selector).resize();
$(selector).toggle();
$(selector).scroll();
13
內容
$(selector).append();
$(selector).appendTo();
$(selector).prepend();
$(selector).prependTo();
$(selector).html();
$(selector).text();
$(selector).empty();
jquery manipulationhttp://api.jquery.com/category/manipulation/http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp
14
屬性
$(selector).addClass();
$(selector).removeClass();
$(selector).hasClass();
$(selector).toggleClass();
$(selector).css();
$(selector).attr();
$(selector).removeAttr();
jquery manipulationhttp://api.jquery.com/category/manipulation/http://www.w3school.com.cn/jquery/jquery_ref_attributes.asp
15
表單
$(selector).blur();
$(selector).change();
$(selector).focus();
$(selector).submit();
$(selector).val();
jquery formshttp://api.jquery.com/category/forms/http://www.w3school.com.cn/jquery/jquery_ref_events.asp
16
相信你應該已經嚇到頭暈了
直接來看範例吧!
範例 4 : 利用 jQuery 改變背景顏色
$(selector).css({‘background’:’red’});
http://goo.gl/AjXpNL
17
範例 6 :點選按鈕,帶出按鈕文字,同時改變文字顏色$(selector).css({‘color’:’red’});
http://goo.gl/tJuutU
19
來一個小練習!
繼續看其他的範例!
練習一下!
jQuery 的另一大特色
動畫
練習一下!
看了那麼多範例,是不是該看點相關應用?
應用案例 6 jQuery 也可以讀取後端資料
http://goo.gl/4w2iAl
測試時瀏覽器須跨域: --args --disable-web-security
36
除此之外
有了 EZoApp 才更顯得 jQuery 的極致
38
瞧瞧 EZoApp 的威力
高手五步之內,可以取人性命EZoApp 五行程式之內,可以做出應用
範例 14 :EZoApp RSS 應用
http://goo.gl/7m42PP
( 蘋果日報 RSS http://www.appledaily.com.tw/rss )
44
以上就是 jQuery + EZoApp 的基本介紹
更多精彩的應用,等待你我去發掘
謝謝聆聽敬請指教