4. Confidential
jQuery
• Released on Jan. 2006
• Focus on DOM Traversal
• Built in support for Events, Ajax, and Animations
• Succinct code, small file size
• Extensible via a plugin architecture
• Dual licensed under the MIT and GPL licenses
Find something
Perform actions
against on it
8. Confidential
Comparison
Native Function jQuery
Get an
element
var txt1 = document.
getElementById("txt1");
var txt1 = $("#txt1");
Return [Element] [jQuery Object]
Get value var t2 = txt1.value; var t2 = txt1.val();
Set value txt1.value = "hello"; txt1.val("hello");
9. Confidential
CSS Selectors
CSS Selectors Effected Element(s) jQuery Syntax
#mainTb {…} id="mainTb" $("#mainTb")
matches a single element with the given id
.bk13 {…} class="bk13" $(".bk13")
matches all elements with the given class
input {…} <input …> $("input")
matches all elements with the given tag
12. Confidential
More Selector Examples
$("#orderedlist > li")
(Hierarchy) Selects all child lis of the element with the
id orderedlist.
$("#orderedlist li:last")
(Basic Filters) Selects the last child li of the element
with the id orderedlist.
$("img[src*=yimg.com]")
(Attribute Filters) Selects all image elements that have
the src attribute and it contants a certain value.
Full documentation of selectors:
http://docs.jquery.com/Selectors
14. Confidential
Basic Effects
$("img[src*=yimg.com]").hide();
Hides each of the matched elements if they are shown.
$("img[src*=yimg.com]").fadeOut(); //fade out
$("img[src*=yimg.com]").fadeIn(); //fade in
$("img[src*=yimg.com]").fadeOut();
$("img[src*=yimg.com]").fadeIn();
$("img[src*=yimg.com]").fadeOut('slow'); //fade out slowly
Apply fade-out/fade-in several times to each of the
matched elements.
15. Confidential
Chainability (The Magic of jQuery)
• Chainable Functions:
$("img[src*=yimg.com]").fadeOut().fadeIn().fadeOut().
fadeIn().fadeOut('slow');
• Another Example:
$("img[src*=yimg.com]").
attr("src", "http://www.ruten.com.tw/img/userbanner.gif").
attr("border", "0").
removeAttr("height").
removeAttr("width").
wrap("<a href="" +
$("a[href*=/user/index.php?sid=]:first").attr("href") +
""></a>");
17. Confidential
Ruten UI Toolbox
• Users are not familiar with Image Processing
• Providing online, easy-to-use APIs for them
• Effects may look like:
18. Confidential
Ruten UI Toolbox (cont.)
• For Users
• Add filter names to the class attribute, and it’s set.
<img src="..." class="glossy reflex">
• For Developers
• One line to rule them all.
/* a pseudo code */
$("img[class*=corner]").addEffect("corner").
end().find("img[class*=edges]").addEffect("edges").
end().find("img[class*=filmed]").addEffect("filmed").
end().find("img[class*=glossy]").addEffect("glossy").
end().find("img[class*=reflex]").addEffect("reflex");
20. Confidential
The Author of jQuery
• John Resig
• Work for Mozilla Corp.
• The author of the book "Pro JavaScript Techniques"
• The speaker of "Building a JavaScript Library" on Google
Tech Talk
作者: Resig, John
出版社: Apress
初版日: 2006-12-11
商品條碼: 9781590597279
ISBN 條碼
:
1590597273
資料提供:
21. Confidential
Using jQuery with Other Libraries
• Loading the other library before jQuery
<script src="prototype.js"></script>
<script src="jquery.js"></script>
• Overriding the $-function
jQuery.noConflict();
var theTable = jQuery("#mainTb");
• Using another shortcut for jQuery
var $j = jQuery.noConflict();
var theTable = $j("#mainTb");
24. Confidential
More Features of jQuery
• Namespacing (only one global variable: jQuery)
• Implementations of Object-Orented Design
• Unobtrusive scripting
25. Confidential
Launching Code on Document Ready
• Limitations of window.onload
• Can not be used twice in one page
• The Javascript code isn't run until all images are finished
downloading
• Solution from jQuery
$(document).ready(function(){
// Your code here
});