Devdays Seattle jQuery Intro for Developers

A bit about me
•  Cody Lindley
•  I work for Ning (www.ning.com)
•  jQuery team member, on the evangelism team
•  Many years ago I authored, Thickbox
•  Co‐authored O’Reilly “jQuery Cookbook” due out
end of the year
•  Recently authored a PDF book called “jQuery
Enlightenment” (www.jqueryenlightenment.com)

Today
•  Who, what, where, and why of jQuery
•  5 core jQuery concepts
•  Overview of jQuery API
•  How to build a plugin in 6 steps
•  Ques)ons

Who uses jQuery
•  35% of all sites that use JavaScript, use jQuery
•  1 out 5 sites, 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 sites, of all sites, use jQuery
reddit.com   whitehouse.gov   overstock.com
espn.com   wikipedia.org   )me.com
ibm.com   microso_.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
(if you don’t already know)

•  jQuery is a JavaScript Library
(19kb Miniﬁed and Gzipped, 120kb Uncompressed)

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

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

It means no more of this
var tables = document.getElementsByTagName(‘table’);

for (var t = 0; t < tables.length; t++) {
var rows = tables[t].getElementsByTagName("tr");
for (var i = 0; i < rows.length; i += 2) {
if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
rows[i].className += ‘odd’;
}
}
};

h[p://jsbin.com/ebiye/edit#html

Using jQuery we can do this

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



jQuery func)on



jQuery Selector (CSS expression)

jQuery func)on




jQuery func)on

jQuery Wrapper Set




jQuery func)on

jQuery Wrapper Set jQuery Method

It really is the

“write less, do more”

JavaScript Library!

Why use jQuery
•  Helps us to simplify and speed up web
development
•  Allows us to avoid common headaches associated
with browser development
•  Provides a large pool of plugins
•  Large and ac)ve community
•  Tested on 50 browsers, 11 plaiorms
•  It’s for both coders and designers (we don’t
discriminate)

Why use jQuery over other soluKons
•  Helps us to simplify and speed up web
development
•  Allows us to avoid common headaches associated
with browser development
•  Provides a large pool of plugins
•  Large and ac)ve community
•  Tested on 50 browsers, 11 plaiorms
•  It’s for both coders and designers (we don’t
discriminate)

Where to get jQuery
•  Download the source from Google code
(moving to github soon)
h[p://code.google.com/p/jqueryjs/

•  Or, use a CDN
h[p://code.google.com/apis/ajaxlibs/documenta)on/#jquery
h[p://ajax.microso_.com/ajax/jquery/jquery‐1.3.2.min.js

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>

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

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


</ul>
<script>

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

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


</ul>
<script>

jQuery(‘#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>

jQuery(‘#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>

jQuery(‘#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>

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

jQuery(this).attr(‘href’,’/’+jQuery(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>

jQuery(‘<li>home</li>’);

jQuery(‘<li>contact</li>’);
</script>
</body>
</html>

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

jQuery(‘<li>home</li>’).wrapInner(‘a’);

jQuery(‘<li>about</li>’).wrapInner(‘a’);
</script>
</body>
</html>

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


</ul>
<script>

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

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

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


</ul>
<script>

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

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

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


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

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


</ul>
<script>

jQuery(‘ul’)

.attr(‘id’,’nav’)

.find(‘li’)

.addClass(‘navLiItem’)

.find(‘a’)

.each(function(){


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

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


</ul>
<script>

jQuery(‘ul’)


.find(‘li’)


.find(‘a’)

.each(function(){


}).end();
</script>
</body>
</html>

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


</ul>
<script>

jQuery(‘ul’)


.find(‘li’)


.find(‘a’)

.each(function(){


}).end().end();
</script>
</body>
</html>

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


</ul>
<script>

jQuery(‘ul’)


.find(‘li’)


.find(‘a’)

.each(function(){


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

Concept 5. jQuery() parameters

•  First Parameter
CSS selectors ‐ e.g. jQuery(‘li’)
HTML ‐ e.g. jQuery(‘<li><a href=“#”>link</a></li>’)
DOM elements ‐ e.g. jQuery(document)
A func)on (shortcut for ready()) ‐ e.g. jQuery(func)on(){})

•  Second Parameter
CSS selectors ‐ e.g. jQuery(‘li’,’#nav’)
DOM elements ‐ e.g. jQuery(‘input’,’document.forms[0]’)

Review
•  Find something, do something
•  Create something, do something
•  Chaining
•  Implicit Itera)on
•  jQuery() parameters

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

•  Core jQuery()

•  Selectors each()
size()
•  A[ributes length
selector
•  Traversing context
eq()
•  Manipula)on get()
index()
•  CSS data()

•  Events removeData()
queue()

•  Eﬀects dequeue()

Ajax
jQuery.fn.extend()
•  jQuery.extend()

•  U)li)es jQuery.noConflict()

•  Core <!DOCTYPE html>

Selectors
<html>
•  <body>

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

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

Manipula)on
<script>
• 
alert(jQuery(‘p’).get(0).nodeType);
</script>
•  CSS </body>

•  Events </html>

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


Selectors
<html>
•  <body>

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

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

Manipula)on
<script>
• 
alert(jQuery(‘p’).get(0).nodeType);

alert(jQuery(‘p’)[0].nodeType);
•  CSS </script>

•  Events </body>
</html>

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

•  Core jQuery(‘:visible’)

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


•  Selectors jQuery(‘:radio:enabled:checked’)

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



•  A[ributes jQuery(‘a[title]’)

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




•  Traversing jQuery(‘a[title][href*=‘foo’]’)

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





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

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






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

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







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

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







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

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

•  Ajax
•  U)li)es

•  Core attr()
•  Selectors removeAttr()

•  A[ributes addClass()
hasClass()
•  Traversing toggleClass() 
removeClass()
•  Manipula)on val()
•  CSS
•  Events
•  Eﬀects
•  Ajax
•  U)li)es

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

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

•  A[ributes <script src="jquery.js"></script>
<script>

•  Traversing jQuery('input').focus(function(){

•  Manipula)on var v = $(this).val();

$(this).val( v === this.defaultValue ? '' : v);
•  CSS }).blur(function(){

•  Events var v = $(this).val();

•  Eﬀects $(this).val( v.match(/^s+$|^$/) ?
this.defaultValue : v);

•  Ajax });

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

•  Core add()
eq()
•  Selectors children()
closest()
filter()
is()
•  A[ributes contents()
find()
map()
not()
•  Traversing next()
nextAll()
slice()

•  Manipula)on offsetParent()
parent()
•  CSS parents()
prev()
•  Events prevAll()
siblings()
•  Eﬀects
•  Ajax andSelf()
end()
•  U)li)es


Selectors
<html>
•  <body>

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

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

•  Events
.contents()

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

•  Eﬀects </script>

Ajax
</body>
•  </html>

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

•  Core html()
replaceWith()
•  Selectors text()
replaceAll()

•  A[ributes append()
appendTo()
empty()
remove()
•  Traversing prepend()
prependTo()
clone()
•  Manipula)on after()
•  CSS before()
insert()
•  Events insertAfter()
insertBefore
•  Eﬀects
•  Ajax warp()
wrapAll()
•  U)li)es wrapInner()

•  Selectors <html>
<body>
•  A[ributes <p>jQuery</p>
•  Traversing <script src="jquery.js"></script>
•  Manipula)on <script>

•  CSS //alerts “jQuery”
alert(jQuery(‘p’).text());
•  Events
</script>
•  Eﬀects </body>

•  Ajax </html>

•  U)li)es

•  Core css()
•  Selectors offset()
•  A[ributes offsetParent()
postion()
•  Traversing scrollTop()
scrollLeft()
•  Manipula)on height()
•  CSS width()
innerHeight()
•  Events innerWidth()
outerHeight()
•  Eﬀects outerWidth()

•  Ajax
•  U)li)es


Selectors
<html>
•  <head>
<style>div{background-color:#ccc; width:100px;
•  A[ributes margin:0 20px; float:left;}</style>
</head>

•  Traversing <body>

Manipula)on
<div></div>
•  <div></div>
<div></div>
•  CSS <script src=“jquery.js" ></script>

•  Events <script>

•  Eﬀects
jQuery('div')

.height(jQuery(document).height());

•  Ajax </script>
</body>

•  U)li)es </html>

•  Core ready()
blur()

Selectors
change()
•  bind()
click()
one()
dbclick()
•  A[ributes trigger()
triggerHandler()
error()
focus()
•  Traversing unbind()
keydown()
keypress()
•  Manipula)on live()
die()
keyup()
mousedown()
•  CSS hover()
mousenter()
mouseleave()

•  Events toggle()
mouseout()
mouseup()

•  Eﬀects resize()
scroll()

Ajax
select()
•  submit()
unload()
•  U)li)es


<body>

•  A[ributes <button>click me</button>



•  CSS jQuery(‘button’).bind("click",
function(){

•  Events
$(this).after(‘<button>click me</
button>’);

•  Eﬀects });

</body>

h[p://jsbin.com/ogeni/edit#html


<body>

•  A[ributes <button>click me</button>



•  CSS jQuery(‘button’).live("click",
function(){

•  Events
$(this).after(‘<button>click me</
button>’);

•  Eﬀects });

</body>

h[p://jsbin.com/ogeni/edit#html

•  Core show()
•  Selectors hide()
toggle()
•  A[ributes slideDown()
•  Traversing slideUp()
slideToggle()
•  Manipula)on fadeIn()
•  CSS fadeOut()
fadeTo()
•  Events
animate()
•  Eﬀects stop()

•  Ajax
•  U)li)es

•  Core <!DOCTYPE html><html><head>

Selectors
<style>
•  div{background-color:#bca;width:100px;border:
1px solid green;}
•  A[ributes </style>
</head>

•  Traversing <body>
<div>jQuery animate() method</div>

Manipula)on
<script src="http://ajax.googleapis.com/ajax/
•  libs/jquery/1.3.2/jquery.min.js" ></script>
<script>
•  CSS jQuery(”div").animate({

•  Events
width: ‘70%’,

opacity: 0.4,

•  Eﬀects

marginLeft: ‘0.6in’,

fontSize: ‘3em’,

borderWidth: ‘10px’
•  Ajax }, 1500);

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

•  Core jQuery.ajax() jQuery.ajaxSetup()
•  Selectors jQuery.get()
jQuery.getJSON()
serialize()
serializeArray()
•  A[ributes jQuery,getScript()
jQuery.post()
•  Traversing
•  Manipula)on load()

•  CSS ajaxCompete()
ajaxError()
•  Events ajaxSend()
•  Eﬀects ajaxStart()
ajaxStop()
•  Ajax ajaxSuccess()

•  U)li)es

<html>
•  Selectors <body>
<script src="h[p://ajax.googleapis.com/ajax/libs/jquery/
•  A[ributes 1.3.2/jquery.min.js" ></script>
<script>
•  Traversing jQuery.getJSON(‘://api.ﬂickr.com/services/feeds/
photos_public.gne?
•  Manipula)on tags=jquery&tagmode=all&format=json&jsoncallback=?’,
func)on(data){
•  CSS     jQuery.each(data.items, func)on(i,item){
        jQuery("<img/>")
•  Events .a[r("src", item.media.m).appendTo("body");
        if ( i == 30 ) return false;
•  Eﬀects     });
});
</body>
•  U)li)es </html> h[p://jsbin.com/erase/edit#html

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

•  U)li)es

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

•  Selectors jQuery("<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

$ alias
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<head>
<head>

<script src=“jquery.js”></script>
<script>
<script>

jQuery(‘body’).append(‘foo’);
(function($){

$(‘body’).append(‘foo’);
</script>
})(jQuery);
</head>
<body>
</script>
</body>
</html>
<head>
<body>
</body>
</html>

jQuery(document).ready() event
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<body>
<head>

<script>
<script>

jQuery(‘body’).append(‘foo’);
jQuery(document).ready(function(){

$(‘body’).append(‘foo’);
</script>
});
</body>
</html>
</script>
</head>
<body>
</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

jQuery().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#html

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);
</script></body></html>

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

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

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);
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);
jQuery('p').loveNotHate({text:'love-love-love'});

Plugins are simple.
Just follow the steps!

Devdays Seattle jQuery Intro for Developers

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Devdays Seattle jQuery Intro for Developers

Semelhante a Devdays Seattle jQuery Intro for Developers (20)

Último

Último (20)

Devdays Seattle jQuery Intro for Developers

Notas do Editor