Download presentation
Presentation is loading. Please wait.
1
What is “this”? 在物件導向程式設計中，類別的定義就是在說明如果創建了“這個物件”的話，它會具有那些屬性與功能，以及這些功能是如何實現的。 而所謂的“這個物件”就以 this 來表示。 當我們在JavaScript與jQuery中寫 script 程式(函式)時，“誰”呼叫這個函式，這個“誰”就是該函式中所謂的 this。
2
jQuery ready $(document).ready( // 裡面撰寫你想執行的 script 程式碼。 );
// 想像成花錢($)為 DOM 添加裝備來變成 jQuery $(DOM-object) => jQuery jQuery[index] => DOM-object
3
Getting objects by DOM and jQuery
DOM: document.getElementById(“id”) jQuery: $(“#id”) <-- 注意 id 前有 # DOM: document.getElementsByTagName(“tag”) jQuery: $(“tag”) DOM: document.getElementsByClassName(“cla”) jQuery: $(“.cla”) <-- 注意 className cla 前有 .
4
jQuery is chainable jquery = $(“p”).css(…) ; <-- 傳回 jQuery 物件。
jquery = jquery.html(…); <-- 傳回 jQuery 物件。 jquery = jquery.fadeIn(…); <-- 傳回 jQuery 物件。 可等效地以串接的方式來寫這一系列的呼叫: $(“p”).css(…) <-- 傳回 jQuery 物件。 .html(…) <-- 傳回 jQuery 物件。 .fadeIn(…) <-- 傳回 jQuery 物件。 => $(“p”).css(…).html(…).fadeIn(…);
5
jQuery hover $(document).ready( function() { $('img').hover(
function() { // over 事件 $('img').animate( {'margin-left': '+=30px'}, 500); } , function() { // leave 事件 $('img').animate( {'width': '-=10px', 'height': '-=10px'}, 500); });
Similar presentations
