54
Richard D. Worth, jQuery Team http://twitter.com/rworth
| Date post: | 17-May-2015 |
| Category: |
Technology |
| Upload: | richard-d-worth |
| View: | 3,862 times |
| Download: | 0 times |
Richard D. Worth, jQuery Teamhttp://twitter.com/rworth
Open Source (MIT, GPL)
JavaScript Library
Richard D. Worth
John Resig, AuthorMozilla, JavaScript Evangelisthttp://ejohn.org/
January 2006BarCampNYC
History
Richard D. Worth
Minimal
Lightweight (19kb)
Unobtrusive
Richard D. Worth
Browser Compatible
IE6+
Safari 3+Chrome
FF2+
Opera 9+
Richard D. Worth
reddit.comespn.comibm.comboxee.tv
bit.lytwitpic.com
whitehouse.gov
microsoft.comamazon.comnetflix.com
stackoverflow.combing.com
monster.comtv.com
overstock.comtime.com
capitalone.comwordpress.com
dell.comtwitter.com
w3.org
Who’s Using jQuery
Richard D. Worth
reddit.comddit.cespn.comn.comibm.comi m
oxee.tvboxebibit.ly
twitpic.comwhitehouse.gov
microsoft.comcamazon.comamnetflix.com
bing.commonster.com
tv.com
overstock.comtime.com
capitalone.comwordpress.com
dell.comtwitter.com
w3.org
Who’s Using jQuery
Richard D. Worth
stackoverflow.com
Changes the wayyou writeJavaScript
Richard D. Worth
var tables = document.getElementsByTagName('table');
for (var t = 0; t < tables.length; t++) {
var rows = tables[t].getElementsByTagName('tr');
for (var i = 1; i < rows.length; i += 2) {
if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
rows[i].className += ' odd';
}
}
}
Richard D. Worth
jQuery('table tr:nth-child(odd)')
.addClass('odd');
Richard D. Worth
$ == jQuery
jQuery $ Alias
Richard D. Worth
jQuery Pattern
Find ThingsDo Stuff
Richard D. Worth
$( ). ();
jQuery Pattern
Find ThingsDo Stuff
Richard D. Worth
$("div").hide();$("button").remove();$("form").submit();$("p").addClass("special");$("span").show("fast");
Richard D. Worth
<!DOCTYPE html><html><body><ul> <li><a>home</a></li> <li><a>about</a></li></ul></body></html>
Richard D. Worth
<!DOCTYPE html><html><body><ul> <li><a>home</a></li> <li><a>about</a></li></ul><script src="jquery.js"></script></body></html>
Richard D. Worth
<!DOCTYPE html><html><body><ul> <li><a>home</a></li> <li><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery('ul');</script></body></html>
Richard D. Worth
<!DOCTYPE html><html><body><ul id="nav"> <li><a>home</a></li> <li><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery('ul').attr('id', 'nav');</script></body></html>
Richard D. Worth
<!DOCTYPE html><html><body><ul id="nav"> <li><a>home</a></li> <li><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery('ul').attr('id', 'nav');jQuery('#nav li');</script></body></html>
Richard D. Worth
<!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery('ul').attr('id', 'nav');jQuery('#nav li').addClass('item');</script></body></html>
Richard D. Worth
<!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery('ul').attr('id', 'nav');jQuery('#nav li').addClass('item');jQuery('#nav a');</script></body></html>
Richard D. Worth
<!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery('ul').attr('id', 'nav');jQuery('#nav li').addClass('item');jQuery('#nav a').each(function(){ jQuery(this);});</script></body></html>
Richard D. Worth
<!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li></ul><script src="jquery.js"></script><script>jQuery('ul').attr('id', 'nav');jQuery('#nav li').addClass('item');jQuery('#nav a').each(function(){ jQuery(this);});</script></body></html>
Richard D. Worth
<!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li></ul><script src="jquery.js"></script><script>jQuery('ul').attr('id', 'nav');jQuery('#nav li').addClass('item');jQuery('#nav a').each(function(){ jQuery(this).attr('href', '/' + jQuery(this).text());});</script></body></html>
Richard D. Worth
<!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li></ul><script src="jquery.js"></script><script>$('ul').attr('id', 'nav');$('#nav li').addClass('item');$('#nav a').each(function(){ $(this).attr('href', '/' + $(this).text());});</script></body></html>
Richard D. Worth
<!DOCTYPE html><html><body><ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li></ul><script src="jquery.js"></script><script>$('ul').attr('id', 'nav');$('#nav li').addClass('item').find('a').each(function(){ $(this).attr('href', '/' + $(this).text());});</script></body></html>
Richard D. Worth
jQuery Object
Collection of DOM Elements
Array-like
Holds the methods
Richard D. Worth
Selectors
CSS 1-3 (better than most browsers)
Basic XPath via a plugin
Custom jQuery selectors
Richard D. Worth
$("div#nav")$("form > table")$("tr:even")$("a strong")$("a[href^=https://]")
Richard D. Worth
$(":hidden")$("ul:visible")$(":disabled")$("td:first *")$("fieldset:has(button)")
Richard D. Worth
Method Calls
Safe (0, 1, more elements)
No need for loop
Some operate on first element
Richard D. Worth
$("p").addClass("special")
.css("color", "red")
.append("hello")
.show("slow");
Chaining
Richard D. Worth
Some methods modify chain
.end() to get back to previous
Most methods are chainable
Chaining
Richard D. Worth
Concise, Natural, Consistent
Logical, Almost Guessable
Easy to read, understand, remember
jQuery API
Richard D. Worth
jQuery’s Focus
DOM Manip.
Ajax
Events
Animation
Richard D. Worth
.next() .prev()
.find() .children()
.parent() .parents()
.filter()
DOM Traversing
Richard D. Worth
.text() .html()
.attr() .removeAttr()
.remove() // returns element
.css()
Attributes
Richard D. Worth
.css(key, value)
.css({key: value, key: value})
.addClass() .removeClass()
.toggleClass()
CSS / Styles
Richard D. Worth
.append() .prepend()
.before() .after()
.insertBefore() .insertAfter()
$("<div>New Element</div>")
DOM Construction
Richard D. Worth
Overloaded
Richard D. Worth
$(selector)
$(HTML)
$(DOMElement)
$(function) // DOM Ready
$(selector, context)
Optional Context
Richard D. Worth
.click(fn) .click()
.toggle(fn, fn) .toggle()
.click(fn) -> .bind("click", fn)
.click() -> .trigger("click")
Events
Richard D. Worth
Event Handler/Callback
Callback gets context (this)
‘this’ is always a DOMElement
First parameter is Event object
Richard D. Worth
.load(url)
.load(url + " " + selector)
Ajax
Richard D. Worth
$.get()
$.post()
$.getJSON()
$.getScript()
Ajax
Richard D. Worth
$.ajaxSend()
$.ajaxStart() $.ajaxStop()
$.ajaxError() $.ajaxSuccess()
$.ajaxComplete()
Ajax Events
Richard D. Worth
.show() .hide() .toggle()
.fadeIn() .fadeOut() .fadeTo()
.animate() .stop() .queue()
.slideUp() .slideDown() .slideToggle()
Animations
Richard D. Worth
Richard D. Worth
Plugins KeepThe Core Lean
Richard D. Worth
Writing a jQueryPlugin
Richard D. Worth
Extending theSelector Engine
Richard D. Worth
Custom Events
Richard D. Worth
.data()
Richard D. Worth
Q&A
Books
Richard D. Worth
Learning jQuery (Packt)
jQuery in Action (Manning)Karl Swedberg, Jonathan Chaffer
Bear Bibeault, Yehuda Katz
