jQuery Essentials

v2
jQuery Essentials
by Marc Grabanski

We needed a hero to get
these guys in line

jQuery rescues us by working
the same in all browsers!

Easier to write jQuery than
pure JavaScript

Hide divs with pure JavaScript
divs = document.getElementByTagName(‘div’);

for (i = 0; i < divs.length; i++) {
divs[i].style.display = ‘none’;
}

Hide divs with pure JavaScript
divs = document.getElementByTagName(‘div’);

for (i = 0; i < divs.length; i++) {
divs[i].style.display = ‘none’;
}

Hide divs with jQuery
$(“div”).hide();

jQuery Philosophy

#1. Find some HTML

jQuery Philosophy

#1. Find some HTML
#2. Do something to it

Find let’s find some
$(“div”) elements

Give $() a selector

$(“#myId”)

Give $() a selector

$(“#myId”) $(“.myClass”)

Give $() a selector

$(“#myId”) $(“.myClass”) $(“table”)

Selector Examples

$(“#content”) get element with id content

Selector Examples

$(“li:first”) get first list item

Selector Examples

$(“tr:odd”) get odd numbered table rows

Selector Examples


$(“a[target=_blank]”)
get all links who’s target is “_blank”

Selector Examples


$(“a[target=_blank]”)
get all links who’s target is “_blank”

$(“form[id^=step]”)
get all forms who’s id starts with “step”

You can also string selectors together

You can also string selectors together
$(“#myId, .myClass, table”)

Find Do
$(“div”) .addClass(“redbox”);

jQuery API Spice
Two things that make the API HOT

Chain Methods
$(“div”).addClass(“redbox”)

Chain Methods
$(“div”).addClass(“redbox”) .fadeOut();

One Method, Many Uses
$(...).html();

$(...).html();

$(...).html(“<p>hello</p>”);

$(...).html();

$(...).html(“<p>hello</p>”);

$(...).html(function(i){
return “<p>hello “ + i + “</p>”;
});

jQuery Methods
•Moving Elements:
append(), appendTo(), before(), after(),

jQuery Methods
•Moving Elements:
•Attributes
css(), attr(), html(), val(), addClass()

jQuery Methods
•Moving Elements:
•Attributes
•Events
bind(), trigger(), unbind(), live(), click()

jQuery Methods
•Moving Elements:
•Attributes
•Events

•Effects
show(), fadeOut(), toggle(), animate()

jQuery Methods
•Moving Elements:
•Attributes
•Events

•Effects
•Traversing
find(), is(), prevAll(), next(), hasClass()

jQuery Methods
•Moving Elements:
•Attributes
•Events

•Effects
•Traversing
find(), is(), prevAll(), next(), hasClass()
•Ajax
get(), getJSON(), post(), ajax(), load()

jQuery Factory Method $()

You can also pass $() a function
to run the function after the page loads.



$(function(){

});



$(function(){
code here will execute after DOM is ready
});



$(function(){
});

Note: This is essentially the same as..
$(document).ready(function(){ });



$(function(){
});

Note: This is essentially the same as..
$(document).ready(function(){ });
..you will see this in tutorials around the net

Moving Elements Examples

Get element with ID foo and add some HTML.
$(“#foo”)
<html>
<body>
<div>jQuery</div>
<div id=”foo”>example</div>
</body>
</html>


$(“#foo”).append(“<p>test</p>”);
<html>
<body>
<div>jQuery</div>
</body>
</html>


$(“#foo”).append(“<p>test</p>”);
<html>
<body>
<div>jQuery</div>
<div id=”foo”>example<p>test</p></div>
</body>
</html>


Move paragraphs to element with id “foo”
$(“p”)
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
</body>
</html>


$(“p”) .appendTo(“#foo”);
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
</body>
</html>


$(“p”) .appendTo(“#foo”);
<html>
<body>
<div>jQuery</div>
<div id=”foo”>example
<p>moving</p>
<p>paragraphs</p>
</div>
</body>
</html>

Attributes

Get
.attr(‘id’)

Attributes

Get
.attr(‘id’)
.html()

Attributes

Get
.attr(‘id’)
.html()
.val()

Attributes

Get
.attr(‘id’)
.html()
.val()

.css(“top”)

Attributes

Get
.attr(‘id’)
.html()
.val()

.css(“top”)

.width()

Attributes

Get Set
.attr(‘id’) .attr(‘id’, ‘foo’)
.html()
.val()

.css(“top”)

.width()

Attributes

Get Set
.html() .html(“<p>hi</p>”)
.val()

.css(“top”)

.width()

Attributes

Get Set
.val() .val(“new val”)
.css(“top”)

.width()

Attributes

Get Set
.css(“top”) .css(“top”, “80px”)

.width()

Attributes

Get Set
.css(“top”) .css(“top”, “80px”)

.width() .width(60)

Attributes
Set border to 1px black
$(...).css(“border”, “1px solid black”);

Attributes

Set various css properties.
$(...).css({
“background”: “yellow”,
“height”: “400px”
});

Attributes

Set various css properties.
$(...).css({
“background”: “yellow”,
“height”: “400px”
});

Set all link’s href attribute to google.com
$(“a”).attr(“href”, “http://google.com”);

Attributes

Replace HTML with a new paragraph.
$(...).html(“<p>I’m new</p>”);

Attributes

$(...).html(“<p>I’m new</p>”);
<div>whatever</div> turns into
<div><p>I’m new</p></div>

Attributes

$(...).html(“<p>I’m new</p>”);
Set checkboxes attribute “checked” to checked.
$(“:checkbox”).attr(“checked”,”checked”);

Attributes

$(...).html(“<p>I’m new</p>”);

Set input value to 3.
$(...).val(“3”);

Attributes

$(...).html(“<p>I’m new</p>”);

Set input value to 3. Get input value.
$(...).val(“3”); $(...).val();

Events
When a button is clicked, do something.
$(“button”).click(function(){
something();
});

Events
something();
});
Setup a custom event and trigger it.
$(“button“).bind(“expand”, function(){
something();
});
$(“button:first“).trigger(“expand”);

Events
something();
});
Setup a custom event and trigger it.
$(“button“).bind(“expand”, function(){
something();
});
$(“button:first“).trigger(“expand”);
Unbind custom event.
$(“button“).unbind(“expand”);

Event Delegation
Attach events to document
$(“button”).live(‘click’, function(){
something();
});

Event Delegation
Attach events to document
$(“button”).live(‘click’, function(){
something();
});

Attach event delegation to elements
$(“form“).delegate(“button”, ”click”, function(){
something();
});

Effects / Animation
Examples

Animation / Effects

Types of Effects

Animation / Effects

Types of Effects

#1. Hide and Show

Animation / Effects

Types of Effects

#1. Hide and Show

#2. Fade In and Out

Animation / Effects

Types of Effects

#1. Hide and Show

#2. Fade In and Out

#3. Slide Up and Down

Animation / Effects

With each click, slide up / slide down a div.
$(...).click(function(){
$(“div:first”).slideToggle();
});

Animation / Effects

});

Animate elements to 300px wide in .5 seconds.
$(...).animate({ “width”: “300px” }, 500);

Animation / Effects

});

Animate elements to 300px wide in .5 seconds.
$(...).animate({ “width”: “300px” }, 500);

Take focus off elements by fading them to
30% opacity in .5 seconds
$(...).fadeTo(500, 0.3);

Traversing Examples

Get previous table cells to #myCell.
$(“#myCell”)
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td id=”myCell”></td>
<td></td>
</tr></table>
</body>
</html>

Traversing Examples

$(“#myCell”) .prevAll()
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td></td>
</tr></table>
</body>
</html>

Traversing Examples

$(“#myCell”) .prevAll() .andSelf();
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td></td>
</tr></table>
</body>
</html>

Traversing Examples

$(“table”)
<html>
<body>
<table></table>
<div>
<p>foo</p>
<span>bar</span>
</div>
</body>
</html>

Traversing Examples

$(“table”) .next()
<html>
<body>
<table></table>
<div>
<p>foo</p>
<span>bar</span>
</div>
</body>
</html>

Traversing Examples

$(“table”) .next().find(“p”);
<html>
<body>
<table></table>
<div>
<p>foo</p>
<span>bar</span>
</div>
</body>
</html>

Ajax Examples

Post data, “bar” equals “baz” to tag.php using get.
$(...).get(“tag.php”, { “bar”: “baz” });

Ajax Examples

Post data, “bar” equals “baz” to tag.php using get.
$(...).get(“tag.php”, { “bar”: “baz” });

Post data, “foo” equals “bar” to send.php, then
alert the response.
$.post(“send.php”, { foo: ”bar” },
function(response){
alert(response);
});

Plugin Example
$.fn.myPlugin = function(){
return this.each(function(){
$(this).html(“you used myPlugin!”);
});
});

<html>
<body>
<div></div>
<div></div>
</body>
</html>

Plugin Example
});
});
$(“div”).myPlugin();
<html>
<body>
<div></div>
<div></div>
</body>
</html>

Plugin Example
});
});
$(“div”).myPlugin();
<html>
<body>
<div>you used myPlugin!</div>
<div>you used myPlugin!</div>
</body>
</html>

jQuery isn’t only about simpler code

and being more productive


It is also about..


It is also about..
great community
test coverage plugins books
support
tutorials
open (free) license speed
light weight code

Led to World Domination

jQuery

http://google.com/trends?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype
+javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1

Usage Across Top 10,000 Sites

http://trends.builtwith.com/javascript

Plugins
jQuery has hundreds of plugins at
http://plugins.jquery.com/

jQuery UI
Set of official user interface
components at:
http://jqueryui.com

Support
jQuery general discussion mailing list
http://forum.jquery.com

jQuery discussion docs page
http://docs.jquery.com/Discussion

jQuery IRC room
#jquery on FreeNode.net

Books

Learning jQuery 1.3 jQuery in Action
by Karl Swedberg Yahuda Katz
http://www.amazon.com/gp/product/1847196705? http://www.amazon.com/gp/product/1933988355?
ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&cam ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&camp
p=1789&creative=9325&creativeASIN=1847196705 =1789&creative=9325&creativeASIN=1933988355

Video Training

http://marcgrabanski.com/article/the-jquery-course-prerelease

Thank you!
Marc Grabanski:
http://marcgrabanski.com

Twitter: @1Marc

jQuery Essentials

More Related Content

What's hot

Similar to jQuery Essentials

More from Marc Grabanski

Recently uploaded

jQuery Essentials