Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery easy use

460 views

Published on

for fine arts department students

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

×