Stack Overflow Austin - jQuery for Developers

Introduc)on for Developers

Who am I?
• Jonathan Sharp, Omaha, Nebraska
• Freelance Developer (Out West Media.com)
• jQuery Team member, (web & infrastructure team)
• Co‐authored “jQuery Cookbook” (O’Reilly) Q4 2009
• @jdsharp

Who am I?
• Own a horse

Overview
• Who, what, and why of jQuery
• 5 core jQuery concepts
• Overview of jQuery API
• Build a plugin in 6 steps
• jQuery Ini)a)ves
• Ques)ons

Who uses jQuery
• 35% of all sites that use JavaScript, use jQuery
• 1 out 5, of all sites, use jQuery

h]p://trends.builtwith.com/javascript/JQuery

Who uses jQuery
• 35% of all sites that use JavaScript, use jQuery
• 1 out 5, of all sites, use jQuery
reddit.com  whitehouse.gov  overstock.com
espn.com  wikipedia.org  )me.com
ibm.com  microsob.com  capitalone.com
stackoverﬂow.com  amazon.com  usatoday.com
kickball.com  netﬂix.com  ning.com
boxee.tv  bing.com  wordpress.com
bit.ly monster.com  dell.com
twitpic.com tv.com twi]er.com

h]p://trends.builtwith.com/javascript/JQuery

What exactly is jQuery 
jQuery is a JavaScript Library!

• Interac)on with the DOM
(e.g. selec)ng, crea)ng, traversing, changing etc…)

• JavaScript Events
• Anima)ons
• Ajax interac)ons

Add class ‘odd’ to a table row...
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’;
}
}
};

...becomes...
h]p://jsbin.com/esewu/edit

Poetry

jQuery(‘table tr:nth-child(odd)’).addClass(‘odd’);

Using jQuery we can do this


jQuery func)on



jQuery Selector (CSS Expression)

jQuery func)on




jQuery func)on

jQuery Collec)on




jQuery func)on

jQuery Collec)on jQuery Method

Further Reduced

$(‘table tr:nth-child(odd)’).addClass(‘odd’);

Further Reduced

var jQuery = function(...) { ... };

// $ is a valid variable character in JavaScript
var $ = jQuery;

$(‘table tr:nth-child(odd)’).addClass(‘odd’);

It really is the 

“write less, do more” 

JavaScript Library!

Why use jQuery
• Simplicity, Speeds up web development
• Avoids common headaches w/ browsers
• Extensive list of plugins
• Large & ac)ve community
• Extensive test coverage (50 browsers, 11 plahorms)
• API for both coders and designers

Why use jQuery over other soluNons
• Simplicity, Speeds up web development
• Avoids common headaches w/ browsers
• Extensive list of plugins
• Large & ac)ve community
• Extensive test coverage (50 browsers, 11 plahorms)
• API for both coders and designers

Concept 1. Find something, do something
<!DOCTYPE html>
<html>
<body>
<ul>

<li><a>home</a></li>

<li><a>about</a></li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul>


</ul>
<script src=‘jquery.js’></script>
<script>

$(‘ul’);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>


</ul>
<script>

$(‘ul’).attr(‘id’,‘nav’);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>


</ul>
<script>

$(‘#nav li’);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>

<li class=‘navLiItem’><a>home</a></li>

<li class=‘navLiItem’><a>about</a></li>
</ul>
<script>

$(‘#nav li’).addClass(‘navLiItem’);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>

<li class=‘navLiItem’><a>home</a></li>

<li class=‘navLiItem’><a>about</a></li>
</ul>
<script>

$(‘#nav a’);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>

<li class=‘navLiItem’><a href=‘/home’>home</a></li>

<li class=‘navLiItem’><a href=‘/about’>about</a></li>
</ul>
<script>

$(‘#nav a’).each(function(){

$(this).attr(‘href’,’/’ + $(this).text());

});
</script>
</body>
</html>

Concept 2. Create something, do something
<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>
</ul>
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>
</ul>
<script>

$(‘<li>home</li>’);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>
</ul>
<script>

$(‘<li>home</li>’).wrapInner(‘a’);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>


</ul>
<script>

$(‘<li>home</li>’).wrapInner(‘a’).appendTo(‘#nav’);

$(‘<li>about</li>’).wrapInner(‘a’).appendTo(‘#nav’);
</script>
</body>
</html>

Concept 3. Chaining & OperaNng
<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>


</ul>
<script>

$(‘ul’).attr(‘id’,’nav’);

$(‘#nav li’).addClass(‘navLiItem’);

$(‘#nav a’).each(function(){


});
</script>
</body>
</html>

Concept 3. Chaining & OperaNng
<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>


</ul>
<script>

$(‘ul’)

.attr(‘id’,’nav’)

.find(‘li’) // Push stack

.addClass(‘navLiItem’)

.find(‘a’) // Push stack

.each(function(){


});
</script>
</body>
</html>

Concept 4. Understanding Implicit iteraNon
<!DOCTYPE html>
<html>
<body>
<ul id=‘nav’>


</ul>
<script>

$(‘ul’)

.attr(‘id’,’nav’)

.find(‘li’)

.addClass(‘navLiItem’)

.find(‘a’)

.each(function(){


});
</script>
</body>
</html>

Concept 5. Knowing the jQuery parameter types

• CSS Selectors & custom CSS expressions 
e.g. $(‘#nav’) and $(‘:first’)

• HTML 
e.g. $(‘<li><a href=“#”>link</a></li>’)

• DOM Elements
e.g. $(document) or $(document.createElement('a'))

• A func)on (shortcut for jQuery DOM ready event)
e.g. $(function(){}) = $(document).ready(function(){})

Review
• Find something, do something
• Create something, do something
• Chaining & Opera)ng
• Understanding Implicit Itera)on
• Knowing the jQuery parameter types

jQuery API overview
• Core
• Selectors
• A]ributes
• Traversing
• Manipula)on
• CSS
• Events
• Eﬀects
• Ajax
• U)li)es

Overview of jQuery API
• Core $()

• Selectors each()
size()

• A]ributes length()
selector()
context()
• Traversing eq()
get()
• Manipula)on index()

• CSS data()
removeData()
queue()
• Events dequeue()

• Eﬀects jQuery.fn.extend()
jQuery.extend()

• Ajax jQuery.noConflict()

• U)li)es

• Core <!DOCTYPE html>
<html>
• Selectors <body>

• A]ributes <p>Element Node</p>

<script src="http://ajax.googleapis.com/ajax/libs/
• Traversing jquery/1.3.2/jquery.min.js" ></script>
<script>
• Manipula)on
alert($(‘p’).get(0).nodeType);
</script>

• CSS </body>
</html>
• Events
• Eﬀects
• Ajax
• U)li)es h]p://jsbin.com/aneki/edit#html

<html>

• A]ributes <p>Element Node</p>

<script src="http://ajax.googleapis.com/ajax/libs/
• Traversing jquery/1.3.2/jquery.min.js" ></script>
<script>
• Manipula)on

alert($(‘p’).get(0).nodeType);
alert($(‘p’)[0].nodeType);

• CSS </script>

</body>
• Events </html>

• Eﬀects
• Ajax
• U)li)es

• Core
• Selectors
• A]ributes
• Traversing
• Manipula)on
• CSS
• Events
• Eﬀects
• Ajax
• U)li)es

• Core $(‘#nav li.contact’)

• Selectors
• A]ributes
• Traversing
• Manipula)on
• CSS
• Events
• Eﬀects
• Ajax
• U)li)es


• Selectors $(‘:visible’)

• A]ributes
• Traversing
• Manipula)on
• CSS
• Events
• Eﬀects
• Ajax
• U)li)es



• A]ributes $(‘:radio:enabled:checked’)

• Traversing
• Manipula)on
• CSS
• Events
• Eﬀects
• Ajax
• U)li)es




$(‘a[title]’)
• Traversing
• Manipula)on
• CSS
• Events
• Eﬀects
• Ajax
• U)li)es




$(‘a[title]’)
• Traversing $(‘a[title][href*=‘foo’]’)
• Manipula)on
• CSS
• Events
• Eﬀects
• Ajax
• U)li)es




$(‘a[title]’)
• Manipula)on $(‘a:first[href*=‘foo’]’)

• CSS
• Events
• Eﬀects
• Ajax
• U)li)es




$(‘a[title]’)

• CSS $(‘#header,#footer’)

• Events
• Eﬀects
• Ajax
• U)li)es




$(‘a[title]’)


• Events $(‘#mainContent,#sidebar’,’#content’)

• Eﬀects
• Ajax
• U)li)es




$(‘a[title]’)


• Events $(‘#mainContent,#sidebar’,’#content’)

• Eﬀects h]p://codylindley.com/jqueryselectors/

• Ajax
• U)li)es

• Core attr()
removeAttr()
• Selectors
addClass()
• A]ributes hasClass()
toggleClass()
• Traversing removeClass()

• Manipula)on val()

• CSS
• Events
• Eﬀects
• Ajax
• U)li)es

• Core <!DOCTYPE html><html><body>

• Selectors <input type="text" value="search" />

<script src="jquery.js"></script>

• A]ributes <script>
$('input')
.focus(function(){
• Traversing var v = $(this).val();
$(this).val( v === this.defaultValue ? '' : v);

• Manipula)on
})
.blur(function(){
var v = $(this).val();

• CSS $(this).val( v.match(/^s+$|^$/) ?

});
this.defaultValue : v);

• Events </script></body></html>

• Eﬀects
• Ajax
• U)li)es h]p://jsbin.com/irico/edit#html

• Core add() eq()
children() filter()
• Selectors closest() is()
contents() map()
• A]ributes find() not()
next() slice()
• Traversing nextAll()
offsetParent()
• Manipula)on parent()
parents()
• CSS prev()
prevAll()
• Events siblings()

• Eﬀects andSelf()
end()
• Ajax
• U)li)es

<html>

• A]ributes <p>Make me bold!</p>

<script src="http://ajax.googleapis.com/ajax/
• Traversing libs/jquery/1.3.2/jquery.min.js" ></script>
<script>
• Manipula)on $(‘p’)

• CSS

.contents()
.wrap(‘<strong></strong>’);

• Events </script>
</body>

• Eﬀects </html>

• Ajax
• U)li)es h]p://jsbin.com/ituza/edit#html

• Core html() replaceWith()
text() replaceAll()
• Selectors
append() empty()
• A]ributes appendTo() remove()
prepend()
• Traversing prependTo() clone()

• Manipula)on after()
before()
• CSS insert()
insertAfter()
• Events insertBefore

• Eﬀects warp()
wrapAll()
• Ajax wrapInner()

• U)li)es

<html>

• A]ributes <p>jQuery</p>

• Traversing <script src="jquery.js"></script>
<script>
• Manipula)on
alert($(‘p’).text());
• CSS
</script>
• Events </body>
</html>
• Eﬀects
• Ajax
• U)li)es

• Core css()

• Selectors offset()
offsetParent()
• A]ributes position()
scrollTop()
• Traversing scrollLeft()

• Manipula)on height()
width()
• CSS innerHeight()
innerWidth()
• Events outerHeight()
outerWidth()
• Eﬀects
• Ajax
• U)li)es

<html>
• Selectors <head>
<style>div{background-color:#ccc; width:100px;

• A]ributes margin:0 20px; float:left;}</style>
</head>
<body>
• Traversing <div></div>
• Manipula)on <div></div>
<div></div>

• CSS <script src=“jquery.js" ></script>
<script>
• Events $('div')

• Eﬀects
.height($(document).height());

• Ajax
</script>
</body>
</html>
• U)li)es

• Core ready() blur()
change()
• Selectors bind()
one()
click()
dbclick()

• A]ributes trigger()
triggerHandler()
error()
focus()
unbind() keydown()
• Traversing live()
keypress()
keyup()
• Manipula)on die() mousedown()
mousenter()

• CSS hover()
toggle()
mouseleave()
mouseout()
mouseup()
• Events resize()
scroll()

• Eﬀects select()
submit()

• Ajax
unload()

• U)li)es

<html>

• A]ributes <p>click me</p>
<p>click me</p>

• Manipula)on <script>

• CSS
$("p").bind("click", function(){
$(this).after("<p>click me</p>");
});
• Events
</script>
• Eﬀects </body>
</html>
• Ajax
• U)li)es h]p://jsbin.com/ehuki/edit#html

<html>

• A]ributes <p>click me</p>
<p>click me</p>

• Manipula)on <script>

• CSS
$("p").live("click", function(){
$(this).after("<p>click me</p>");
});
• Events
</script>
• Eﬀects </body>
</html>
• Ajax
• U)li)es h]p://jsbin.com/epeha/edit#html

• Core show()
hide()
• Selectors toggle()

• A]ributes slideDown()
slideUp()
• Traversing slideToggle()

• Manipula)on fadeIn()
fadeOut()
• CSS fadeTo()

• Events animate()
stop()
• Eﬀects
• Ajax
• U)li)es

• Core <!DOCTYPE html><html><head>
<style>
• Selectors div{background-color:#bca;width:100px;border:1px
solid green;}

• A]ributes </style>
</head>
<body>
• Traversing <div id="block">Hello!</div>
<script src="http://ajax.googleapis.com/ajax/
• Manipula)on libs/jquery/1.3.2/jquery.min.js" ></script>
<script>

• CSS $("#block").animate({

width: ‘70%’,
• Events

opacity: 0.4,
marginLeft: ‘0.6in’,

• Eﬀects

fontSize: ‘3em’,
borderWidth: ‘10px’

• Ajax
}, 1500);

</script></body></html>
• U)li)es h]p://jsbin.com/evage/edit#html

• Core jQuery.ajax() jQuery.ajaxSetup() 
jQuery.get() serialize()
• Selectors jQuery.getJSON()  serializeArray()
• A]ributes jQuery.getScript() 
jQuery.post()
• Traversing load()
• Manipula)on
ajaxCompete()
• CSS ajaxError()
ajaxSend()
• Events ajaxStart()
• Eﬀects ajaxStop()
ajaxSuccess()
• Ajax
• U)li)es

• Core jQuery.ajax() jQuery.ajaxSetup() 
jQuery.get() serialize()
• Selectors jQuery.getJSON()  serializeArray()
• A]ributes jQuery,getScript() 
jQuery.post()
• Traversing load()
• Manipula)on
ajaxCompete()
• CSS ajaxError()
ajaxSend()
• Events ajaxStart()
• Eﬀects ajaxStop()
ajaxSuccess()
• Ajax
• U)li)es

• Core <!DOCTYPE html><html><body> 
<script src="h]p://ajax.googleapis.com/ajax/libs/jquery/
• Selectors 1.3.2/jquery.min.js" ></script> 
<script>  
• A]ributes var url = ‘h]p://api.ﬂickr.com/services/feeds/
photos_public.gne?
• Traversing tags=jquery&tagmode=all&format=json&jsoncallback=?’;

• Manipula)on $.getJSON(url, func)on(data){ 
• CSS     $.each(data.items, func)on(i,item){ 
        $("<img/>")
• Events   .a]r("src", item.media.m).appendTo("body"); 
        if ( i == 30 ) return false; 
• Eﬀects     }); 
}); 
• Ajax </script> </body></html>

• U)li)es h]p://jsbin.com/erase/edit#html

• Core $.support $.trim()
$.boxModel
• Selectors $.param()
• A]ributes $.each(), 
$.extend(), 
• Traversing $.grep(), 
$.makeArray(), 
• Manipula)on $.map(), 
$.inArray(), 
• CSS $.merge(), 
$.unique()
• Events
• Eﬀects $.isArray(), 
$,isFunc)on()
• Ajax
• U)li)es

• Core $.each(data.items, function(i,item){

• Selectors $("<img/>")

.attr("src”,item.media.m).appendTo("body");

• A]ributes if ( i == 30 ) return false;

});
• Traversing
• Manipula)on
• CSS
• Events
• Eﬀects
• Ajax
• U)li)es

What happen to the $ alias and the $
(document).ready() event
<!DOCTYPE html> <html>
<head>
<script src=“jquery.js”></script>
<script>
$(document).ready(function{

//jQuery code here
})
</script>
</head>
<body>
</script>
</body>
</html>

<!DOCTYPE html> <html>
<head>
<script>
$(document).ready(function{

alert($(document).jquery);
})
</script>
</head>
<body>
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<script>
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<script>
(function($){

alert($().jquery);
})(jQuery);
</script>
</body>
</html>

So, what is a plugin?
A plugin is nothing more than a custom jQuery 
method created to extend the func)onality of 
the jQuery object

$(‘ul’).myPlugin()

Why Create a plugin?
You want to “ﬁnd something”, and “do 
something” but the “do something” is not 
available in jQuery. 

Roll your own “do something” with a plugin!

A jQuery plugin in 6 steps

h]p://jsbin.com/eheku/edit

Step 1. create a private scope for $ alias
<!DOCTYPE html><html><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.min.js"></script>
<script>
(function($){

})(jQuery);

Step 2. a]ach plugin to fn alias (aka prototype)
<script>
(function($){
$.fn.loveNotHate = function(){

$(this).text($(this).text().replace(/hate/g,'love'));
};
})(jQuery);

Step 2. a]ach plugin to fn alias (aka prototype)
<p>I hate jQuery!</p>
<script>
(function($){

};
})(jQuery);
$('p').loveNotHate();

Step 3. add implicit itera)on
<script>
(function($){
this.each(function(){

});
};
})(jQuery);

Step 3. add implicit itera)on
<p>I mean really hate jQuery!</p>
<script>
(function($){
this.each(function(){

});
};
})(jQuery);

Step 4. enable chaining
<script>
(function($){
return this.each(function(){

});
};
})(jQuery);

Step 4. enable chaining
<script>
(function($){

});
};
})(jQuery);
$('p').loveNotHate().hide();

Step 5. add default op)ons
<script>
(function($){

$(this).text($(this).text().replace(/hate/g,
$.fn.loveNotHate.defaultOptions.text));
});
};
$.fn.loveNotHate.defaultOptions = {text:'love'};
})(jQuery);

Step 6. add custom op)ons
<script>
(function($){

});
};
})(jQuery);
$('p').loveNotHate({text:'love-love-love'});

Plugins are simple, just follow the steps!

jQuery News
• jQuery.org & Founda)on (Sobware Freedom Law 
Center)
• Tax‐deduc)ble dona)ons
• Four conferences next year (Boston, San Francisco, 
London, and online)
• Infrastructure Upgrade (MediaTemple Sponsorship)
• New Plugin site (h]p://plugins.jquery.com)
• jQuery Forum (moving away from Google Groups)

Jonathan Sharp (@jdsharp)

Special thanks to Cody Lindley

Stack Overflow Austin - jQuery for Developers

Recommended

More Related Content

What's hot (20)

Similar to Stack Overflow Austin - jQuery for Developers (20)

Recently uploaded (20)

Stack Overflow Austin - jQuery for Developers