Stackoverflow DevDays: jQuery Introduction for Developers

Introduction for Developers

Survey

Who Me?
Jörn Zaefferer from Cologne
Consultant for maxence integration technologies
jQueryteam member
jQuery UI lead developer
Co-Author jQuery Cookbook, due this month

Why bother?

Who uses jQuery
35% of all sites that use JavaScript, use jQuery
1 out 5 sites, of all sites, use jQuery
http://trends.builtwith.com/javascript/JQuery

What exactly is jQuery
jQuery is a JavaScript Library!
Dealing with the DOM
JavaScript Events
Animations
Ajax interactions

What does that mean?

It means no more of this
var tables = document.getElementsByTagName("table");
for (vart = 0; t<tables.length; t++) {
var rows = tables[t].getElementsByTagName("tr");
for (vari = 1; i<rows.length; i += 2) {
if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
rows[i].className+= " odd";
}
}
};
http://jsbin.com/esewu/edit

Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");

jQuery function

jQuery Selector (CSS expression)
jQuery function

jQuery function
jQuery Wrapper Set

jQuery function
jQuery Method
jQuery Wrapper Set

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 active community
Tested on 50 browsers, 11 platforms
Its for both coders and designers

Why use jQuery over other solutions
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 active community
Tested on 50 browsers, 11 platforms
Its 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>
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>
<ulid="nav">
</ul>
<script>
jQuery("#nav li");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ulid="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>
<ulid="nav">
</ul>
<script>
jQuery("#nav a");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ulid="nav">
<li><a href="/home">home</a></li>
<li><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>
<ulid="nav">
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ulid="nav">
</ul>
<script>
jQuery("<li>home</li>");
jQuery("<li>about</li>");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ulid="nav">
</ul>
<script>
jQuery("<li>home</li>").wrapInner("a");
jQuery("<li>about</li>").wrapInner("a");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ulid="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">
<li class="navLiItem"><a href="/home">home</a></li>
<li class="navLiItem"><a href="/about">about</a></li>
</ul>
<script>
jQuery("ul").attr("id","nav");
jQuery("#nav li").addClass("navLiItem");
jQuery("#nav a").each(function(){
jQuery(this).attr("href", "/" + jQuery(this).text());
});
</script>
</body>
</html>

Concept 3. Chaining
<!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("ul").attr("id","nav")
.find("li").addClass("navLiItem")
.find("a").each(function(){
jQuery(this).attr("href","/" + jQuery(this).text());
});
</script>
</body>
</html>

Concept 4. jQuery parameter types
CSS Selectors & custom CSS expressions jQuery("#nav") and jQuery(":first")
HTML jQuery("<li><a href=“#”>link</a></li>")
DOM ElementsjQuery(document) or jQuery(this) or jQuery(event.target)
A function (shortcut for jQuery DOM ready event)jQuery(function(){}) = jQuery(document).ready(function(){})

Review
Find something, do something
Create something, do something
Chaining
jQuery parameter types

Overview of jQuery API
Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery()
each()
map()
size()
length
selector
context
index()
get()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
<!DOCTYPE html>
<html>
<body>
<p>Gold</p>
<p>Silver</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
alert(jQuery("p").map(function() {
return $(this).text();
}).get());
</script>
</body>
</html>
http://jsbin.com/orani/edit#html

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery("#nav li.contact")

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery(":visible")

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery(":visible")
jQuery(":radio:enabled:checked")

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery(":visible")
jQuery("a[title]")

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery(":visible")
jQuery("a[title]")
jQuery("a[title][href='foo']")

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery(":visible")
jQuery("a[title]")
jQuery("a:first[href*='foo']")

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery(":visible")
jQuery("a[title]")
jQuery("#header, #footer")

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery(":visible")
jQuery("a[title]")
jQuery("#header, #footer")
jQuery("#header, #footer").filter(":visible")

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
attr()
removeAttr()
addClass()
hasClass()
toggleClass()removeClass()
val()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
<!DOCTYPE html><html><body>
<input type="text" value="search" />
<script>
$("input").focus(function(){
var v = $(this).val();
$(this).val( v == this.defaultValue? "" : v);
}).blur(function(){
var v = $(this).val();
$(this).val( !v ? this.defaultValue : v);
});
</script></body></html>
http://jsbin.com/irico/edit#html
http://jsbin.com/ihale/edit#html

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
add()
children()
closest()
find()
next()
nextAll()
prev()
prevAll()
siblings()
parent()
parents()
andSelf()
end()
eq()
filter()
is()
not()
slice()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
<!DOCTYPE html>
<html>
<body>
<h3>Quotes</h3>
<div>
<p>Now or never</p>
<p>Because he could</p>
</div>
<script>
$("h3").click(function() {
$(this).next().toggle();
}).next().hide();
</script>
</body>
</html>
http://jsbin.com/uhole/edit#html

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
html()
text()
append()
appendTo()
prepend()
prependTo()
after()
insertAfter()
before()
insertBefore()
wrap()
wrapAll()
wrapInner()
replaceWith()
replaceAll()
empty()
remove()
clone()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
<!DOCTYPE html>
<html>
<body>
<p>Make me bold!</p>
<script>
jQuery("p").wrapInner("<b></b>");
</script>
</body>
</html>
http://jsbin.com/esuwu/edit#html

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
css()
offset()
offsetParent()
postion()
scrollTop()
scrollLeft()
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
<!DOCTYPE html>
<html>
<head>
<style>div{background-color:#ccc; width:100px; margin:0 20px; float:left;}</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script src=“jquery.js" ></script>
<script>
jQuery("div").height(jQuery(document).height());
</script>
</body>
</html>
http://jsbin.com/iseti/edit#html

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
blur()
change()
click()
dbclick()
error()
focus()
keydown()
keypress()
keyup()
mousedown()
mousenter()
mouseleave()
mouseout()
mouseup()
resize()
scroll()
select()
submit()
unload()
ready()
bind()
one()
trigger()
triggerHandler()
unbind()
live()
die()
hover()
toggle()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
<!DOCTYPE html>
<html>
<body>
<p>click me</p>
<p>click me</p>
<script>
jQuery("p").bind("click", function(){
$(this).after("<p>click me</p>");
});
</script>
</body>
</html>
http://jsbin.com/ehuki/edit#html

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
<!DOCTYPE html>
<html>
<body>
<p>click me</p>
<p>click me</p>
<script>
jQuery("p").live("click", function(){
$(this).after("<p>click me</p>");
});
</script>
</body>
</html>
http://jsbin.com/epeha/edit#html

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
show()
hide()
toggle()
slideDown()
slideUp()
slideToggle()
fadeIn()
fadeOut()
fadeTo()
animate()
stop()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
var tooltip = $("<div/>")
.addClass("tooltip")
.appendTo("body");
$("input").mouseover(function(event) {
tooltip.text(this.title).css({
left: event.pageX,
top: event.pageY
}).fadeIn();
}).mouseout(function() {
tooltip.fadeOut();
});
http://jsbin.com/enoco3/edit#html

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
show()
hide()
toggle()
slideDown()
slideUp()
slideToggle()
fadeIn()
fadeOut()
fadeTo()
animate()
stop()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
<!DOCTYPE html><html><head>
<style>
div{background-color:#bca;width:100px;border:1px solid green;}
</style>
</head>
<body>
<div id="block">Hello!</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script>
jQuery("#block").animate({
width: "70%",
opacity: 0.4,
}, 1500);
http://jsbin.com/ulexu/edit#html

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery.ajaxSetup()
serialize()
serializeArray()
jQuery.ajax()
jQuery.get()
jQuery.getJSON()
jQuery,getScript()
jQuery.post()
load()
ajaxComplete()
ajaxError()
ajaxSend()
ajaxStart()
ajaxStop()
ajaxSuccess()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script>
jQuery.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=all&format=json&jsoncallback=?",
function(data){
jQuery.each(data.items, function(i,item){
jQuery("<img/>")
.attr("src", item.media.m)
.appendTo("body");
if ( i == 30 ) return false;
});
});
http://jsbin.com/ivifa/edit#html
http://jsbin.com/erase/edit#html

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery.support
jQuery.boxModel
jQuery.each(),
jQuery.extend(),
jQuery.grep(),
jQuery.makeArray(),
jQuery.map(),
jQuery.inArray(),
jQuery.merge(),
jQuery.unique()
jQuery.isArray(),
jQuery,isFunction()
jQuery.trim()
jQuery.param()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery.support
jQuery.boxModel
jQuery.each(),
jQuery.extend(),
jQuery.grep(),
jQuery.makeArray(),
jQuery.map(),
jQuery.inArray(),
jQuery.merge(),
jQuery.unique()
jQuery.isArray(),
jQuery.isFunction()
jQuery.trim()
jQuery.param()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
// returns "hello"
jQuery.trim(" hello ");

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
jQuery.support
jQuery.boxModel
jQuery.each(),
jQuery.extend(),
jQuery.grep(),
jQuery.makeArray(),
jQuery.map(),
jQuery.inArray(),
jQuery.merge(),
jQuery.unique()
jQuery.isArray(),
jQuery.isFunction()
jQuery.trim()
jQuery.param()

Core
Selectors
Attributes
Traversing
Manipulation
CSS
Events
Effects
Ajax
Utilities
// returns "name=John&url=ejohn.org"
jQuery.param({ name: "John", url: "ejohn.org" });

jQuery and $
var jQuery = window.jQuery = window.$ = function() {}

jQuery and $
jQuery(document).ready(function($) {
// ready code
});
or
jQuery(function($) {
// ready code
});

jQuery.noConflict()

Plugins

A jQueryplugin in 6 steps
http://jsbin.com/asice/edit

Step 1. create a private scope for $ alias
<script>
(function($){
})(jQuery);

Step 2. attach plugin to fn alias (aka prototype)
<script>
(function($){
$.fn.loveNotHate = function(){
$(this).text($(this).text().replace(/hate/g,"love"));
};
})(jQuery);

Step 2. attach plugin to fn alias (aka prototype)
<p>I hate jQuery!</p>
<script>
(function($){
};
})(jQuery);
jQuery("p").loveNotHate();

Step 3. add implicit iteration
<script>
(function($){
this.each(function(){
});
};
})(jQuery);

Step 3. add implicit iteration
<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);
jQuery("p").loveNotHate().hide();

Step 5. add default options
<script>
(function($){
$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
});
};
$.fn.loveNotHate.defaults = {text:"love"};
})(jQuery);

Step 6. add custom options
<script>
(function($){
});
};
})(jQuery);
jQuery("p").loveNotHate({text:"love-love-love"});

Pluginsare simple,just follow the steps!

jQuery News
Moving towards a Conservancy (Software Freedom Law Center) owning the code
Tax-deductible donations
Four conferences next year (Boston, San Francisco, London, and online)
jQuery.org project site
T-shirts
jQueryForum moving away from Google Groups
Revamp of the plugin site

Thank you!

http://www.mysrc.de	1116
http://speakerrate.com	27
http://www.slideshare.net	10

Stackoverflow DevDays: jQuery Introduction for Developers

by Jörn Zaefferer on Nov 03, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 1,153

Statistics

Stackoverflow DevDays: jQuery Introduction for Developers — Presentation Transcript