jQuery 入門 - Speaker Deck

Slide 1

Slide 1 text

jQuery ⼊入⾨門蔡秉諺 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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 的值顯⽰示在下⼀一⾏行

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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); });

Slide 8

Slide 8 text

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!'); });

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

找東⻄西 & 做事情 $('div').html('DEMO'); 找東⻄西做事情

$('div').html('<b>DEMO</b>'); 找出所有的 DIV 塞⼊入 DEMO

Slide 13

Slide 13 text

找東⻄西 • ⽤用 CSS Selector 找 • ⽀支援 CSS3 Selector

$('div').html('A'); $('#id1').html('B'); $('.class1').html('C'); $('.class1.class2').html('D'); 同時具有 class1 class2 HTML 空⽩白間隔 CSS 無空⽩白間隔 CSS 空⽩白間格另有意義

Slide 14

Slide 14 text

找東⻄西 • ⽤用 CSS Selector 找 • ⽀支援 CSS3 Selector

$('div span').html('A'); $('#id1 i').html('B'); $('#id1 > i').html('C'); $('#id1 > span > i').html('D');

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

找東⻄西 • 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"] 是嚴重錯誤

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

找東⻄西

$('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'); 意義相同效能較佳

Slide 19

Slide 19 text

找東⻄西 • jQuery API Traversing • .find() • .children() • .eq() • .parent() • .parents() • .next() • .prev() • …

$('div').eq(1).html('ABC'); 第⼆二個 DIV  由 0 起算

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

做事情 • 取值 • 取找東⻄西中第⼀一個的值

alert($('div').html()); // 1

Slide 25

Slide 25 text

做事情 • 設定值 • 設定所有找東⻄西的值

$('div').html('ABC'); $('div').html(function() { return Date(); }); 只設定第⼀一個 DIV 的 HTML $('div').eq(0).html('XYZ');

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Attributes • addClass() • removeClass() • toggleClass() • hasClass()

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

CSS • .css()

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

CSS • .offset() • 相對網⾴頁 • .position() • 相對 offsetParent

DEMO

console.log($('#child').offset()); // 150, 150 console.log($('#child').position()); // 50, 50 回傳⼀一物件，有 top 、 left 兩屬性

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Effects • .hide() • CSS display : none • .show() • .toggle()

$('#id1').hide(); $('#id2').hide(function() { alert('ABC'); }); $('#id3').hide('slow'); $('#id4').hide(800, function() { alert('XYZ'); }); Callback 總是最後⼀一個參數

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Effects • .animate() • 客製動畫

Slide 39

Slide 39 text

串 • 找東⻄西 • 回傳 jQuery 物件 • 做事情 • 取值 • 回傳值 • 設定值 • 回傳 jQuery 物件

$('#id1').children('div') .html('<a href="demo.html" >DEMO</>') .css({ 'background' : '#F00', 'padding' : '20px'}) .children('a') .fadeOut() .fadeIn(); 這裡開始對象變 #id1 > div > a

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Manipulation • .append() 與 .appendTo()

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Events • .bind() • .unbind()

$('#id1').bind('click', function() { alert('!'); }); function f() { alert('!!'); } $('#id2').bind('click', f); $('#id2').unbind('click', f);

Slide 47

Slide 47 text

Events • .click() • .bind('click', function() { /* … */ }) 的縮寫

DEMO

$('div').click(function() { alert('!'); }); 與 $('div').bind('click', function() { alert('!'); }); 意義相同

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Events • .one() • 只執⾏行⼀一次

DEMO

$('div').one('click', function() { alert('!'); });

Slide 50

Slide 50 text

Events • .on() • .off()

DEMO

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Data • .data() • 在 jQuery 物件上儲存資料 • .removeData()

DEMO

$('div').data('key', '1qaz2wsx'); $('div').click(function() { alert($(this).data('key')); // 1qaz2wsx });

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

.each()

$('div').each(function(index) { $(this).html(index); });

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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); });

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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 要瀏覽器與伺服器同時⽀支援

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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) { // ... }); 傳統寫法新寫法

Slide 63

Slide 63 text

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) { // ... }); 新寫法

Slide 64

Slide 64 text

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) { // ... }); 新寫法由上到下

Slide 65

Slide 65 text

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) { // ... }); 新寫法由上到下

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

jQuery UI • http://jqueryui.com/

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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