jQuery 入門

Transcript

1. jQuery ⼊入⾨門
   蔡秉諺
   1
   

   View Slide

2. 課前準備
   • jQuery 官網
   • http://jquery.com/
   • http://api.jquery.com/
   • 安裝 Chrome
   • https://www.google.com/chrome
   • 安裝 Notepad++
   • http://notepad-plus-plus.org/
   

   View Slide

3. Chrome JavaScript 控制台
   • 開啟
   • 右上選單按鈕 -> ⼯工具 -> JavaScript 控制台
   • 滑⿏鼠右鍵 -> 檢查元素 -> 左下 Show Console
   • 玩
   > 1 + 1
   2
   > var a = 1;
   undefined
   > a
   1
   > alert(a);
   undefined
   > window
   Window
   下⼀一⾏行顯⽰示的是什麼？

   

   就好像在程式碼前加上 var x = 

   變成 var x = 1 + 1

   然後把 x 的值顯⽰示在下⼀一⾏行
   

   View Slide

4. View Slide

5. jQuery
   • 語法⽐比 JavaScript 好懂
   • 處理瀏覽器差異
   • 處理瀏覽器 Bug
   

   View Slide

6. JavaScript
   var divs = document.getElementByTagName('div'),
   n = divs.length;
   for(i = 0; i < n; ++i)
   divs[i].style.display = 'none';
   jQuery
   $('div').hide();
   

   View Slide

7. JavaScript
   var req;
   if(window.XMLHttpRequest)
   req = new XMLHttpRequest();
   else
   req = new ActiveXObject('Microsoft.XMLHTTP');
   req.onreadystatechange = function() {
   if(req.readyState !== 4 || req.status !== 200)
   return;
   var data = eval('(' + req.responseText + ')');
   alert(data.ID);
   }
   req.open('GET', 'demo.php', true);
   req.send();
   jQuery
   $.getJSON('demo.php', function(data) {
   alert(data.ID);
   });
   

   View Slide

8. JavaScript
   var btn = document.getElementById('btn1');
   if(btn.addEventListener)
   btn.addEventListener('click', handler, false);
   else
   btn.attachEvent('on' + event, handler);
   function handler() {
   alert('Clicked!');
   }
   jQuery
   $('#btn1').click(function() {
   alert('Clicked!');
   });
   

   View Slide

9. 讓網⾴頁執⾏行 jQuery
   
   
   
   
   
   
   <br/>alert(jQuery); // function() { ... }<br/>alert($); // function() { ... }<br/>alert(jQuery === $); // true<br/>
   
   
   在網⾴頁嵌⼊入 jQuery 程式碼
   var jQuery = function() {
   /* 略 */
   }
   var $ = jQuery;
   /*
   替 jQuery 函式增加其他屬性
   */
   多 jQuery 和 $
   兩個⼀一模⼀一樣的變數
   

   View Slide

10. jQuery 程式碼哪裡來
    • http://jquery.com/download/
    • 壓縮版 & 未壓縮版
    • 產品使⽤用 & 開發使⽤用
    • CDN
    • Microsoft
    • Google
    • jQuery 官⽅方 ( MediaTemple )
    • The best CDN for jQuery in 2012
    

    View Slide

11. 讓網⾴頁執⾏行 jQuery
    • 下載 jQuery 程式碼
    • 將檔名 jquery-1.9.1.js 改為 jquery.js
    • 開啟 Notepad++
    • 新增右側內容
    • 儲存為 demo.html
    • ⽤用 Chrome 開啟
    • 玩 JavaScript 控制台
    • 玩開發⼈人員⼯工具
    
    
    
    
    
    
    <br/>alert(jQuery); // function() { ... }<br/>alert($); // function() { ... }<br/>alert(jQuery === $); // true<br/>
    
    
    

    View Slide

12. 找東⻄西 & 做事情
    $('div').html('DEMO');
    找東⻄西 做事情
    
    
    
    
    
    
    
    
    
    <br/>$('div').html('<b>DEMO</b>');<br/>
    
    
    找出所有的 DIV 塞⼊入 DEMO
    

    View Slide

13. 找東⻄西
    • ⽤用 CSS Selector 找
    • ⽀支援 CSS3 Selector
    
    
    
    
    
    
    
    
    
    
    <br/>$('div').html('A');<br/>$('#id1').html('B');<br/>$('.class1').html('C');<br/>$('.class1.class2').html('D');<br/>
    
    
    同時具有 class1 class2
    HTML 空⽩白間隔
    CSS 無空⽩白間隔
    CSS 空⽩白間格另有意義
    

    View Slide

14. 找東⻄西
    • ⽤用 CSS Selector 找
    • ⽀支援 CSS3 Selector
    
    
    
    
    
    
    
    
    <br/>$('div span').html('A');<br/>$('#id1 i').html('B');<br/>$('#id1 > i').html('C');<br/>$('#id1 > span > i').html('D');<br/>
    
    
    

    View Slide

15. 找東⻄西
    
    
    
    
    
    
    
    
    
    
    <br/>$('input[type=text]').val('abc');<br/>$('.class1[type=text]').val('xyz');<br/>
    
    
    • ⽤用 CSS Selector 找
    • ⽀支援 CSS3 Selector
    

    View Slide

16. 找東⻄西
    • CSS3 Selector ⽂文件
    • W3Schools CSS Selector Reference
    • div+p
    • a[href^="https"]
    • a[href$=".pdf"]
    • a[href*="w3schools"]
    • input:checked
    • jQuery Selector Extensions
    • 不屬於 CSS3 Selector ，只有 jQuery 有
    注意 W3Schools 寫 a[src^="https"] 是嚴重錯誤
    

    View Slide

17. 找東⻄西
    • K ⽂文件、看範例、玩 !
    • Chrome JavaScript 控制台
    • Xuite
    

    View Slide

18. 找東⻄西
    
    
    
    
    
    
    
    
    <br/>
    
    
    $('div i').html('A');
    $('div > i').html('B');
    $('div > span > i').html('C');
    $('div').find('i').html('A');
    $('div').children('i').html('B');
    $('div').children('span').children('i').html('C');
    意義相同
    效能較佳
    

    View Slide

19. 找東⻄西
    • jQuery API Traversing
    • .find()
    • .children()
    • .eq()
    • .parent()
    • .parents()
    • .next()
    • .prev()
    • …
    
    
    
    
    
    
    
    
    
    <br/>$('div').eq(1).html('ABC');<br/>
    
    
    第⼆二個 DIV

    由 0 起算
    

    View Slide

20. 找東⻄西
    • K ⽂文件、看範例、玩 !
    • Chrome JavaScript 控制台
    • Xuite
    

    View Slide

21. 做事情
    $('div').html('DEMO');
    找東⻄西 做事情
    塞⼊入 DEMO
    

    View Slide

22. 做事情
    • jQuery API
    • Attributes
    • CSS
    • Effects
    • Manipulation
    • Events
    • Data
    • …
    

    View Slide

23. 做事情
    • 同⼀一個 method 可以做很多事情
    • $('div').html();
    • $('div').html('ABC');
    • $('div').html(function() { return Date(); });
    

    View Slide

24. 做事情
    • 取值
    • 取找東⻄西中第⼀一個的值
    
    
    
    
    
    
    1
    2
    3
    <br/>alert($('div').html()); // 1<br/>
    
    
    

    View Slide

25. 做事情
    • 設定值
    • 設定所有找東⻄西的值
    
    
    
    
    
    
    1
    2
    3
    <br/>$('div').html('ABC');<br/>$('div').html(function() { return Date(); });<br/>
    
    
    只設定第⼀一個 DIV 的 HTML
    $('div').eq(0).html('XYZ');
    

    View Slide

26. Attributes
    • .val()
    • HTML 元素 value
    
    
    
    
    
    
    
    
    
    
    <br/>alert($('input').val()); // demo<br/>$('input').val('ABC');<br/>
    
    
    第⼀一個 INPUT
    所有 INPUT
    

    View Slide

27. Attributes
    • addClass()
    • removeClass()
    • toggleClass()
    • hasClass()
    
    
    
    
    
    
    
    
    
    <br/>$('div').addClass('class4');<br/>$('div').removeClass('class1');<br/>$('div').toggleClass('class2');<br/>alert($('div').hasClass('class3')); // true<br/>
    
    
    沒的加上 有的拿掉
    其中⼀一個 DIV 有就跳 true
    

    View Slide

28. Attributes
    • .prop()
    • .removeProp()
    • 無法移除原⽣生屬性
    
    
    
    
    
    
    1
    2
    <br/>alert($('a').prop('title')); // 1<br/>$('a').prop('title', 'ABC');<br/>$('a').prop('title', null);<br/>$('a').prop({ 'title' : 'XYZ', 'href' : 'demo.html' });<br/>
    
    
    第⼀一個 A
    傳⼊入 JavaScript 物件
    ⼀一次改多個 DOM Property
    $('a').removeProp('title'); 運作異常
    

    View Slide

29. Attributes
    • .attr()
    • ⼤大致對應 DOM getAttribute() setAttribute()
    • .removeAttr()
    • ⼤大致對應 DOM removeAttribute()
    • 歷史共業
    • jQuery 先有 .attr() 才有 .prop()
    • 新版多⽤用 .prop()
    • JavaScript property 、 DOM property 、 HTML attribute
    

    View Slide

30. CSS
    • .css()
    
    
    
    
    
    
    1
    2
    <br/>$('#id1').css('font-size', '36px');<br/>alert($('div').css('font-size')); // 36px<br/>$('#id2').css({ 'background-color' : '#0F0', 'font-size' : '24px' });<br/>
    
    
    第⼀一個 DIV
    傳⼊入 JavaScript 物件
    ⼀一次改多個 CSS 屬性
    

    View Slide

31. CSS
    • .height()
    • ⾼高
    • .innerHeight()
    • ⾼高 + padding
    • .outerHeight()
    • ⾼高 + padding + border (+ margin)
    

    View Slide

32. CSS
    • .width()
    • 寬
    • .innerWidth()
    • 寬 + padding
    • .outerWidth()
    • 寬 + padding + border (+ margin)
    

    View Slide

33. CSS
    • .offset()
    • 相對網⾴頁
    • .position()
    • 相對 offsetParent
    
    
    
    
    
    
    
    
    DEMO
    
    
    <br/>console.log($('#child').offset()); // 150, 150<br/>console.log($('#child').position()); // 50, 50<br/>
    
    
    回傳⼀一物件，有 top 、 left 兩屬性
    

    View Slide

34. CSS
    • .scrollLeft()
    • 橫向捲軸
    • .scrollTop()
    • 縱向捲軸
    

    View Slide

35. Effects
    • .hide()
    • CSS display : none
    • .show()
    • .toggle()
    
    
    
    
    
    
    1
    2
    3
    4
    <br/>$('#id1').hide();<br/>$('#id2').hide(function() { alert('ABC'); });<br/>$('#id3').hide('slow');<br/>$('#id4').hide(800, function()<br/>{ alert('XYZ'); });<br/>
    
    
    Callback 總是最後⼀一個參數
    

    View Slide

36. Effects
    • .fadeOut()
    • .fadeIn()
    • .fadeToggle()
    

    View Slide

37. Effects
    • .slideUp()
    • .slideDown()
    • .slideToggle()
    

    View Slide

38. Effects
    • .animate()
    • 客製動畫
    

    View Slide

39. 串
    • 找東⻄西
    • 回傳 jQuery 物件
    • 做事情
    • 取值
    • 回傳值
    • 設定值
    • 回傳 jQuery 物件
    
    
    
    
    
    
    
    
    
    
    <br/>$('#id1').children('div')<br/>.html('<a href="demo.html" >DEMO</>')<br/>.css({ 'background' : '#F00', 'padding' : '20px'})<br/>.children('a')<br/>.fadeOut()<br/>.fadeIn();<br/>
    
    
    這裡開始對象變 #id1 > div > a
    

    View Slide

40. 找東⻄西、做事情、串
    • K ⽂文件、看範例、玩 !
    • Chrome JavaScript 控制台
    • Xuite
    

    View Slide

41. Manipulation
    • .append() 與 .appendTo()
    
    
    
    
    
    
    <br/>$('<a href="demo.html" >DEMO</a>').appendTo('#id1');<br/>$('#id1').append('<a href="demo.html" >DEMO</a>'); </<br/>script><br/></body><br/></html><br/>傳⼊入<br/>CSS Selector<br/>DOM 物件<br/>HTML<br/>都可以<br/>功能相同<br/>作⽤用對象不同<br/>

    View Slide

42. Manipulation
    • .append() 與 .appendTo()
    • .prepend() 與 .prependTo()
    • .after() 與 .insertAfter()
    • .before() 與 .insertBefore()
    

    View Slide

43. Manipulation
    • .empty()
    • 清空⼦子節點
    • .remove()
    • 移除⾃自⼰己
    

    View Slide

44. Manipulation
    • .wrap()
    • .wrapInner()
    • .wrapAll()
    • .unwrap()
    

    View Slide

45. Manipulation
    • K ⽂文件、看範例、玩 !
    • Chrome JavaScript 控制台
    • Xuite
    • 記得串 !
    

    View Slide

46. Events
    • .bind()
    • .unbind()
    
    
    
    
    
    
    1
    2
    <br/>$('#id1').bind('click', function() { alert('!'); });<br/>function f() { alert('!!'); }<br/>$('#id2').bind('click', f);<br/>$('#id2').unbind('click', f);<br/>
    
    
    

    View Slide

47. Events
    • .click()
    • .bind('click', function() { /* … */ }) 的縮寫
    
    
    
    
    
    
    DEMO
    <br/>$('div').click(function() { alert('!'); });<br/>
    
    
    與 $('div').bind('click', function() { alert('!'); }); 意義相同
    

    View Slide

48. Events
    • .blur()
    • .change()
    • .click()
    • .dblclick()
    • .focus()
    • .keydown()
    • .keypress()
    • .keyup()
    • .load()
    • .mousedown()
    • .mousemove()
    • .mouseout()
    • .mouseover()
    • .mouseup()
    • .resize()
    • .scroll()
    • .submit()
    • .unload()
    • …
    

    View Slide

49. Events
    • .one()
    • 只執⾏行⼀一次
    
    
    
    
    
    
    DEMO
    <br/>$('div').one('click', function() { alert('!'); });<br/>
    
    
    

    View Slide

50. Events
    • .on()
    • .off()
    
    
    
    
    
    
    DEMO
    <br/>$('div span').click(function() { alert('!'); });<br/>$('div').on('click', 'span', function() { alert('!!'); });<br/>$('div').append('<span>DEMO2</span>');<br/>
    
    
    按 DEMO 會跳 ! 和 !!
    按 DEMO2 只會跳 !!
    

    View Slide

51. Events
    • $(document).ready(function() { /* ... */ })
    • DOMContentLoaded
    • DOM Tree 建⽴立完成時，圖⽚片、CSS 載⼊入完成前
    • ⽐比 $(window).load(function() { /* ... */ }) 早
    • 縮寫 $(function() { /* ... */ })
    

    View Slide

52. Data
    • .data()
    • 在 jQuery 物件上儲存資料
    • .removeData()
    
    
    
    
    
    
    DEMO
    <br/>$('div').data('key', '1qaz2wsx');<br/>$('div').click(function() {<br/>alert($(this).data('key')); // 1qaz2wsx<br/>});<br/>
    
    
    

    View Slide

53. jQuery 物件當 Array ⽤用
    • $('div').length
    • 有多少個 DIV
    • $('div')[2]
    • 第三個 DIV 的 DOM 物件
    第三個 DIV 的 jQuery 物件
    $('div').eq(2)
    

    View Slide

54. .each()
    
    
    
    
    
    
    
    
    
    
    
    <br/>$('div').each(function(index) {<br/>$(this).html(index);<br/>});<br/>
    
    
    

    View Slide

55. Events 、 Data 、 當 Array 、 .each()
    • K ⽂文件、看範例、玩 !
    • Chrome JavaScript 控制台
    • Xuite
    • 寫新網⾴頁
    • 記得串 !
    

    View Slide

56. jQuery 函式的屬性 var jQuery = function() {
    this.addClass = function() {
    /* 略 */
    return this;
    }
    /* 略 */
    return this;
    }
    var $ = jQuery;
    jQuery.get = function() { /* 略 */ }
    jQuery.post = function() { /* 略 */ }
    /* 略 */
    jQuery 函式的屬性
    類似 Java 的 Static ⽅方法
    

    View Slide

57. Ajax
    • $.get()
    • jQuery 函式的屬性
    • HTTP GET
    $.get('data.php', function(data) {
    console.log(data);
    });
    

    View Slide

58. Ajax
    • $.post()
    • jQuery 函式的屬性
    • HTTP POST
    $.post('target.php', function(data) {
    console.log(data);
    });
    $.post('target.php', { name : "John", time : "2pm" },
    function(data) {
    console.log(data);
    });
    

    View Slide

59. Ajax
    • $.getJSON
    • HTTP GET
    • ⾃自動將 JSON 轉為 JavaScript 物件
    • ⽀支援 JSONP
    • 網址加上 callback=?
    $.getJSON('https://graph.facebook.com/pingyen.tsai?callback=?', function(data) {
    alert(data.name);
    });
    

    View Slide

60. Ajax
    • $.ajax()
    • 客製化 Ajax
    • settings
    • cache
    • crossDomain
    • dataType
    • …
    $.ajax({
    url : 'https://graph.facebook.com/pingyen.tsai',
    crossDomain : true,
    success : function(data) {
    alert(data.name);
    }});
    Cross-Domain 要瀏覽器與伺服器同時⽀支援
    

    View Slide

61. Ajax
    • K ⽂文件、看範例、玩 !
    • ⽤用 $.getJSON() 抓⾃自⼰己的 Facebook 資料
    • ⽤用 $.ajax() 抓⾃自⼰己的 Facebook 資料
    

    View Slide

62. Deferred Object
    • $.get('a.php') -> $.get('b.php') -> $.get('c.php')
    $.get('a.php', function(data) {
    $.get('b.php', function(data) {
    $.get('c.php', function(data) {
    // ...
    });
    });
    });
    $.get('a.php')
    .then(function(data) {
    return $.get('b.php');
    })
    .then(function(data) {
    return $.get('c.php');
    })
    .done(function(data) {
    // ...
    });
    傳統寫法
    新寫法
    

    View Slide

63. Deferred Object
    • $.get('a.php') $.get('b.php') $.get('c.php') 同時
    • 三者皆完成進⾏行下⼀一步
    傳統寫法
    ~!@#$%^&*
    $.when($.get('a.php'), $.get('b.php'),
    $.get('c.php'))
    .done(function(arr, arr2, arr3) {
    // ...
    });
    新寫法
    

    View Slide

64. Deferred Object
    • 視情況 $.get('a.php') 或 $.get('b.php')
    if(type === 'A')
    $.get('a.php', function(data) {
    f(data.a);
    });
    else
    $.get('b.php', function(data) {
    f(data.b);
    });
    function f(p) {
    // ...
    } 傳統寫法
    var d;
    if(type === 'A')
    d = $.get('a.php')
    .then(function(data) {
    return data.a;
    });
    else
    d = $.get('b.php')
    .then(function(data) {
    return data.b;
    });
    d.done(function(p) {
    // ...
    }); 新寫法
    由
    上
    到
    下
    

    View Slide

65. Deferred Object
    • 有值直接⽤用 沒值 $.get('a.php')
    if(localStorage.x)
    f(localStorage.x);
    else
    $.get('a.php', function(data) {
    var x = data.x;
    localStorage.x = x;
    f(x);
    });
    function f(p) {
    // ...
    } 傳統寫法
    var d;
    if(localStorage.x)
    d = $.when(localStorage.x);
    else
    d = $.get('a.php')
    .then(function(data) {
    var x = data.x;
    localStorage.x = x;
    return x;
    });
    d.done(function(p) {
    // ...
    }); 新寫法
    由
    上
    到
    下
    

    View Slide

66. jQuery 1.9 vs. jQuery 2.0
    • API ⼀一模⼀一樣
    • 但 jQuery 2.0 不⽀支援 IE 6 7 8
    • 更輕量
    
    
    
    
    

    View Slide

67. jQuery Plugins
    • http://plugins.jquery.com/
    • jQuery Cookie
    • Google 搜尋 jQuery Plugin
    

    View Slide

68. jQuery UI
    • http://jqueryui.com/
    

    View Slide

69. 網路資源
    • http://try.jquery.com/
    • http://jsfiddle.net/
    • http://www.bibeault.org/jqia2/
    • https://tutsplus.com/course/30-days-to-learn-jquery/
    

    View Slide

70. Deferred Object 、 jQuery UI
    • K ⽂文件、看範例、玩 !
    • ⽤用 $.getJSON() + Deferred 抓好友們的 Facebook 資料
    • ⽤用 $.ajax() + Deferred 抓好友們的 Facebook 資料
    

    View Slide