O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

jQuery easy use

461 visualizações

Publicada em

for fine arts department students

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

jQuery easy use

  1. 1. jQuery Bear Lee 1 1
  2. 2. jQuery? 其實Flash花俏的樣子,其中最重要的Action Script正是很類似javascript的,他們都屬於 ECMA Script 2 2
  3. 3. jQuery? 然而javascript不像Flash是一個被打包好的東 西,所以解釋它的東西不是它自己。 開放標準總是會遇到這種事情。 3 3
  4. 4. jQuery? jQuery是Javascript的Library中的一種。 它讓我們能更輕易的透過它幫忙解決掉跨瀏覽 器的Javascript差異。 4 4
  5. 5. only jQuery? 除了jQuery外事實上,javascript Library不只 有jQuery而已,還有諸如 Yahoo UI(YUI),Prototype, Mootool, Ext.js 等等 5 5
  6. 6. only jQuery? 除了jQuery外事實上,javascript Library不只 有jQuery而已,還有諸如 Yahoo UI(YUI),Prototype, Mootool, Ext.js 等等 jQuery擅長處理Dom結構。 5 5
  7. 7. only jQuery? 除了jQuery外事實上,javascript Library不只 有jQuery而已,還有諸如 Yahoo UI(YUI),Prototype, Mootool, Ext.js 等等 jQuery擅長處理Dom結構。 輕巧、社群持續活躍。 5 5
  8. 8. jquery <script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.1/jquery.min.js"></script> 6 6
  9. 9. <script src=”js/your.js”></script> 7 7
  10. 10. in your.js $(document).ready(function() { 頁面載入後你要寫的js內容 }); 8 8
  11. 11. in your.js $(document).ready(function() { 頁面載入後你要寫的js內容 }); DOMContentLoaded 8 8
  12. 12. $ $() = jQuery() 9 9
  13. 13. $ $() = jQuery() var $j = jQuery.noConflict(); $j(document).ready(function({ 內容 }); 9 9
  14. 14. $("div") 選取的方式用很多種,大部分CSS中先進的選取 器都支援 10 10
  15. 15. #bear>li>a 11 11
  16. 16. #bear>li>a #bear:first #bear:last 11 11
  17. 17. #bear>li>a #bear:first #bear:last #bear:first-child #bear:last-child 11 11
  18. 18. #bear>li>a #bear:first #bear:last #bear:first-child #bear:last-child #bear:odd奇數 #bear:even偶數 11 11
  19. 19. #bear>li>a #bear:first #bear:last #bear:first-child #bear:last-child #bear:odd奇數 #bear:even偶數 #bear:conains(fish) 11 11
  20. 20. #bear[href] 有href的#bear #bear[href=fish.png]值是fish.png #bear[href^= ‘fi’]以fi開頭 #bear[href$= ‘.png’] 以.png結尾 12 12
  21. 21. #bear[href] 有href的#bear #bear[href=fish.png]值是fish.png #bear[href^= ‘fi’]以fi開頭 #bear[href$= ‘.png’] 以.png結尾 #bear[href*= ‘fish’] 只要有fish 12 12
  22. 22. $("#bear").addClass(“gss”); <div id=”bear” class=”gss”>(・ั( )・ั)</div> 13 13
  23. 23. $("#bear").css(‘height’,‘100px’); $("#bear").css( { ‘background-color’ : 'yellow', ‘font-size’ : '120%' } ); 14 14
  24. 24. animate $("#bear").animate( {opacity:’0’,width:‘960px’}, {queue:false,duration:300}); 先控制要它變得css,接著寫執行的過程時間 queue:false代表後面若有動作會同時執行 15 15
  25. 25. click $('#bear').click(function(){ 點了之後要他做的事 } ); 16 16
  26. 26. toggle,Hover $('#bear').toggle( ! ! ! function(){ $(this).addClass("star-off"); $(this).removeClass("star-on");}, ! ! ! ! function(){ $(this).addClass("star-on"); ! ! ! $(this).removeClass("star-off"); }); 17 17
  27. 27. append $('#bear').append( ‘<div class=”sport”> (・ั( )・ั) </div>’ ); 直接給Bear一個新的東西 18 18
  28. 28. append var fish = $(‘#fish’); $(document).ready(function() { $('#bear').append(fish);}); 給Bear一個頁面中的東西,會帶走餵給Bear 19 19
  29. 29. plugin 這是一點我比較常用到的。 接著我們看一些jQuery Plugin 20 20
  30. 30. superfish http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started 21 21
  31. 31. superfish <script type="text/javascript" src="superfish.js"></script> <script> $(document).ready(function() { $('ul.menu').superfish(); }); </script> http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started 21 21
  32. 32. Lightbox http://planetozh.com/projects/lightbox-clones/ 22 22
  33. 33. TOp up http://gettopup.com/ 23 23
  34. 34. TOp up http://gettopup.com/ 23 23
  35. 35. Coda-slider http://www.ndoherty.biz/demos/coda-slider/2.0/ 24 24
  36. 36. Spritely http://spritely.net/download/ 25 25
  37. 37. Spritely http://spritely.net/download/ $('#bird') .sprite({fps: 8, no_of_frames: 3}) .spRandom({ top: 70, left: 100, right: 200, bottom: 340, speed: 4000, pause: 3000 }); 25 25
  38. 38. More http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for- jquery-lovers/ http://masonry.desandro.com/ http://uniformjs.com/ 26 26
  39. 39. so jQuery讓我們做到很多特別的動態效果甚至 是CSS選擇器, 一些還未支援的CSS3技術也能模擬支援 然而JS的效能依然不能用過頭。 特別是jQuery這類工具,在不夠了解JS的情 況下亦會大大拖垮網站效能。 27 27

×