jQuery Stack Overflow DevDays DC 2009

transcript

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

Safari 3+Chrome

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.

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)

Richard D. Worth

$.get()

$.post()

$.getJSON()

$.getScript()

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

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

Learning jQuery (Packt)

jQuery in Action (Manning)Karl Swedberg, Jonathan Chaffer

Bear Bibeault, Yehuda Katz

jQuery Stack Overflow DevDays DC 2009

Technology