1. Confidential
Introduction to jQuery
Hunter Wu
Nov. 30, 2007

2. Confidential
Table of Contents
• About jQuery
• Finding Elements
• Performing Actions
• A Concept of Using jQuery
• Appendix

3. About jQuery

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

5. Confidential
Trends
• 2007 Ajaxian.com Reader Survey Results
Survey Result of 2006

6. Finding Elements

7. Confidential
Traditional Ways
document.getElementById('txt1')
document.getElementsByTagName('input')
document.forms['form1'].elements['txt1']
document.images['img1']
document.form1.txt1
document.form1.img1
document.img1
form1.txt1
document.all.txt1
document.all['txt1']
document.layers['div1']
window.form1
document.forms['form1'].elements['img1']

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

10. 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.

11. 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]")

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

13. Peforming Actions

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

16. A Concept of Using jQuery

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

19. Appendix

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

22. Any Questions?

23. 以下是備而不用

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