jQuery Essentials

jQuery Essentialsby Marc Grabanski

v2

We needed a hero to get these guys in line

jQuery rescues us by workingthe same in all browsers!

Easier to write jQuery than 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 pure JavaScript

$(“div”).hide();

Hide divs with jQuery

HTML is tied to JavaScript

jQuery Philosophy

#1. Find some HTML

jQuery Philosophy

#1. Find some HTML

#2. Do something to it

jQuery Philosophy

$(“div”)

Find

$(“div”)

Find let’s find some elements

Give $() a selector

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




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

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

You can also string selectors together

You can also string selectors together

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

$(“div”)

Find

Do

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

Find

jQuery API SpiceTwo things that make the API HOT

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

Chain Methods

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

Chain Methods

.fadeOut();

$(...).html();

One Method, Many Uses

$(...).html();


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

$(...).html();


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

$(...).html(function(i){

return “<p>hello “ + i + “</p>”;

});

jQuery Methods

jQuery Methods

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

jQuery Methods


•Attributescss(), attr(), html(), val(), addClass()

jQuery Methods



•Eventsbind(), trigger(), unbind(), live(), click()

jQuery Methods




•Effectsshow(), fadeOut(), toggle(), animate()

jQuery Methods



•Traversingfind(), is(), prevAll(), next(), hasClass()



jQuery Methods



•Traversingfind(), is(), prevAll(), next(), hasClass()


•Ajaxget(), getJSON(), post(), ajax(), load()


jQuery Factory Method $()

You can also pass $() a functionto 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(){ });

code here will execute after DOM is ready



$(function(){

});

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

code here will execute after DOM is ready

..you will see this in tutorials around the net

$(“#foo”)

Get element with ID foo and add some HTML.

<html><body>

<div>jQuery</div><div id=”foo”>example</div>

</body></html>

Moving Elements Examples

$(“#foo”)


<html><body>

<div>jQuery</div><div id=”foo”>example</div>

</body></html>


.append(“<p>test</p>”);

$(“#foo”)


<html><body>

<div>jQuery</div><div id=”foo”>example<p>test</p></div>

</body></html>


.append(“<p>test</p>”);

<html><body>

<div>jQuery<p>moving</p> <p>paragraphs</p>

</div><div id=”foo”>example</div>

</body></html>

$(“p”)

Move paragraphs to element with id “foo”


<html><body>

<div>jQuery<p>moving</p> <p>paragraphs</p>

</div><div id=”foo”>example</div>

</body></html>

$(“p”)



.appendTo(“#foo”);

$(“p”)


<html><body>

<div>jQuery</div><div id=”foo”>example

<p>moving</p> <p>paragraphs</p>

</div></body>

</html>


.appendTo(“#foo”);

Attributes

Attributes

.attr(‘id’)

Get

Attributes

.attr(‘id’)

Get

.html()

Attributes

.attr(‘id’)

Get

.html()

.val()

Attributes

.attr(‘id’)

Get

.html()

.val()

.css(“top”)

Attributes

.attr(‘id’)

Get

.html()

.val()

.width()

.css(“top”)

Attributes

.attr(‘id’)

Get

.html()

.val()

Set

.attr(‘id’, ‘foo’)

.width()

.css(“top”)

Attributes

.attr(‘id’)

Get

.html()

.val()

.html(“<p>hi</p>”)

Set


.width()

.css(“top”)

Attributes

.attr(‘id’)

Get

.html()

.val()


Set


.val(“new val”)

.width()

.css(“top”)

Attributes

.attr(‘id’)

Get

.html()

.val()


Set


.val(“new val”)

.width()

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

Attributes

.attr(‘id’)

Get

.html()

.val()


Set


.val(“new val”)

.width() .width(60)

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

Attributes

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

Attributes


Set various css properties.$(...).css({

“background”: “yellow”, “height”: “400px”

});

Attributes


Set various css properties.$(...).css({

“background”: “yellow”, “height”: “400px”

});

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

Attributes

http://google.com

http://google.com

Attributes

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

Attributes


Attributes

<div>whatever</div> turns into<div><p>I’m new</p></div>


Set checkboxes attribute “checked” to checked.$(“:checkbox”).attr(“checked”,”checked”);

Attributes




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

Attributes




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

$(...).val();Get input value.

Attributes


Events Examples

Events

$(“button”).click(function(){something();

});

When a button is clicked, do something.

Events


});


Setup a custom event and trigger it.$(“button“).bind(“expand”, function(){

something();}); $(“button:first“).trigger(“expand”);

Events


});


Setup a custom event and trigger it.$(“button“).bind(“expand”, function(){

something();}); $(“button:first“).trigger(“expand”);

Events

$(“button“).unbind(“expand”);Unbind custom event.

Event Delegation

$(“button”).live(‘click’, function(){something();

});

Event Delegation

Attach events to document

$(“button”).live(‘click’, function(){something();

});

Event Delegation

Attach events to document

Attach event delegation to elements

$(“form“).delegate(“button”, ”click”, function(){something();

});

Effects / Animation Examples

Animation / Effects

Types of Effects

Animation / Effects

#1. Hide and Show

Types of Effects

Animation / Effects

#2. Fade In and Out

#1. Hide and Show

Types of Effects

Animation / Effects

#2. Fade In and Out

#1. Hide and Show

#3. Slide Up and Down

Types of Effects

Animation / Effects

$(...).click(function(){$(“div:first”).slideToggle();

});

With each click, slide up / slide down a div.

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);

$(...).fadeTo(500, 0.3);

Take focus off elements by fading them to 30% opacity in .5 seconds

Animation / Effects

Traversing Examples

$(“#myCell”)

Get previous table cells to #myCell.

<html><body>

<table><tr><td></td><td></td><td id=”myCell”></td><td></td>

</tr></table></body>

</html>

Traversing Examples

<html><body>



</html>

$(“#myCell”)


Traversing Examples

.prevAll()

$(“#myCell”)


Traversing Examples

.prevAll()

<html><body>



</html>

.andSelf();

<html><body>

<table></table><div>

<p>foo</p><span>bar</span>

</div></body>

</html>

$(“table”)


Traversing Examples

<html><body>



</div></body>

</html>

$(“table”)


Traversing Examples

.next()

$(“table”)


<html><body>



</div></body>

</html>

Traversing Examples

.next()

$(“table”)


Traversing Examples

.next().find(“p”);

<html><body>



</div></body>

</html>

Ajax Examples

Ajax Examples

$(...).get(“tag.php”, { “bar”: “baz” });

Post data, “bar” equals “baz” to tag.php using get.

Ajax Examples

$(...).get(“tag.php”, { “bar”: “baz” });

Post data, “bar” equals “baz” to tag.php using get.

Post data, “foo” equals “bar” to send.php, thenalert the response.

$.post(“send.php”, { foo: ”bar” }, function(response){

alert(response);});

Ajax Examples

Extending jQuery

$.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



});

<html><body>

<div>you used myPlugin!</div><div>you used myPlugin!</div>

</body></html>

$(“div”).myPlugin();

Plugin Example

Wait, There’s More!

jQuery isn’t only about simpler code

jQuery isn’t only about simpler codeand being more productive


It is also about..


It is also about..great community

support tutorials

plugins

open (free) license

test coverage books

speed

light weight code

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

Led to World Domination

jQuery





Usage Across Top 10,000 Sites

http://trends.builtwith.com/javascript



Plugins

jQuery has hundreds of plugins athttp://plugins.jquery.com/

jQuery UI

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

http://plugins.jquery.com

http://plugins.jquery.com

http://jqueryui.com

http://jqueryui.com

http://forum.jquery.com

Support

http://docs.jquery.com/Discussion

jQuery general discussion mailing list

jQuery discussion docs page

jQuery IRC room#jquery on FreeNode.net





Books

http://www.amazon.com/gp/product/1847196705?ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1847196705


Learning jQuery 1.3by Karl Swedberg

jQuery in ActionYahuda Katz













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

Video Training





Thank you!

Marc Grabanski: http://marcgrabanski.com

Twitter: @1Marc

http://marcgrabanski.com

http://marcgrabanski.com

http://twitter.com/1Marc

http://twitter.com/1Marc

Design

jQuery Essentials