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

HTML is tied to JavaScript

jQuery Philosophy

jQuery Philosophy #1. Find some HTML

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

Find $(“div”)

Find let’s find some $(“div”) 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 $(“#content”) get element with id content $(“li:first”) get first list item

Selector Examples $(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows

Selector Examples $(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows $(“a[target=_blank]”) get all links who’s target is “_blank”

Selector Examples $(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows $(“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 $(“div”)

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

One Method, Many Uses $(...).html(); $(...).html(“<p>hello</p>”);

One Method, Many Uses $(...).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 •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass()

jQuery Methods •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click()

jQuery Methods •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click() •Effects show(), fadeOut(), toggle(), animate()

jQuery Methods •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click() •Effects show(), fadeOut(), toggle(), animate() •Traversing find(), is(), prevAll(), next(), hasClass()

jQuery Methods •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click() •Effects show(), fadeOut(), toggle(), animate() •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.

jQuery Factory Method $() You can also pass $() a function to run the function after the page loads. $(function(){ });

jQuery Factory Method $() You can also pass $() a function to run the function after the page loads. $(function(){ code here will execute after DOM is ready });

jQuery Factory Method $() You can also pass $() a function to run the function after the page loads. $(function(){ code here will execute after DOM is ready }); Note: This is essentially the same as.. $(document).ready(function(){ });

jQuery Factory Method $() You can also pass $() a function to run the function after the page loads. $(function(){ code here will execute after DOM is ready }); 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>

Moving Elements Examples Get element with ID foo and add some HTML. $(“#foo”).append(“<p>test</p>”); <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>

Moving Elements Examples Get element with ID foo and add some HTML. $(“#foo”).append(“<p>test</p>”); <html> <body> <div>jQuery</div> <div id=”foo”>example<p>test</p></div> </body> </html>

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

Moving Elements Examples Move paragraphs to element with id “foo” $(“p”) .appendTo(“#foo”); <html> <body> <div>jQuery <p>moving</p> <p>paragraphs</p> </div> <div id=”foo”>example</div> </body> </html>

Moving Elements Examples Move paragraphs to element with id “foo” $(“p”) .appendTo(“#foo”); <html> <body> <div>jQuery</div> <div id=”foo”>example <p>moving</p> <p>paragraphs</p> </div> </body> </html>

Attributes

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 .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val() .css(“top”) .width()

Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val() .val(“new val”) .css(“top”) .width()

Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val() .val(“new val”) .css(“top”) .css(“top”, “80px”) .width()

Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val() .val(“new val”) .css(“top”) .css(“top”, “80px”) .width() .width(60)

Attributes

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

Attributes Set border to 1px black $(...).css(“border”, “1px solid black”); Set various css properties. $(...).css({ “background”: “yellow”, “height”: “400px” });

Attributes Set border to 1px black $(...).css(“border”, “1px solid black”); 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

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

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

Attributes Replace HTML with a new paragraph. $(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div> Set checkboxes attribute “checked” to checked. $(“:checkbox”).attr(“checked”,”checked”);

Attributes Replace HTML with a new paragraph. $(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div> Set checkboxes attribute “checked” to checked. $(“:checkbox”).attr(“checked”,”checked”); Set input value to 3. $(...).val(“3”);

Attributes Replace HTML with a new paragraph. $(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div> Set checkboxes attribute “checked” to checked. $(“:checkbox”).attr(“checked”,”checked”); Set input value to 3. Get input value. $(...).val(“3”); $(...).val();

Events Examples

Events

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

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

Events When a button is clicked, do something. $(“button”).click(function(){ 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

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

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

Animation / Effects With each click, slide up / slide down a div. $(...).click(function(){ $(“div:first”).slideToggle(); }); Animate elements to 300px wide in .5 seconds. $(...).animate({ “width”: “300px” }, 500);

Animation / Effects With each click, slide up / slide down a div. $(...).click(function(){ $(“div:first”).slideToggle(); }); 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

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 Get previous table cells to #myCell. $(“#myCell”) .prevAll() <html> <body> <table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td> </tr></table> </body> </html>

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

Traversing Examples Move paragraphs to element with id “foo” $(“table”) <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>

Traversing Examples Move paragraphs to element with id “foo” $(“table”) .next() <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>

Traversing Examples Move paragraphs to element with id “foo” $(“table”) .next().find(“p”); <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>

Ajax Examples

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

Extending jQuery

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

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

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

Wait, There’s More!

jQuery isn’t only about simpler code

jQuery isn’t only about simpler code and being more productive

jQuery isn’t only about simpler code and being more productive It is also about..

jQuery isn’t only about simpler code and being more productive 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

http://marcgrabanski.com	61885
http://www.learningjquery.com	33272
http://web.enavu.com	20417
http://www.bukuharian.com	3213
http://www.myphptutorials.com	3038
http://tutsvalley.com	2717
http://blog.25sprout.com	2058
http://www.liondk.com	1555
http://www.learningjquery.com.	1356
http://miageprojet2.unice.fr	1327
http://www.vestanbul.net	987
http://kopi-paste.com	853
http://www.mrkindy.com	785
http://phpwafr.wordpress.com	680
http://shreelimbkar.wordpress.com	658
http://www.scoop.it	470
http://vothanhduy.wordpress.com	440
http://www.elholgazan.com	421
http://eredaktor.pl	398
http://jquery.collected.info	390
http://feeds2.feedburner.com	380
http://www.digitalmediaminute.com	353
http://green.cx	314
http://www.slideshare.net	304
http://www.nosolocodigo.com	292
http://www.iamntz.com	285
http://jqueryfiles.ru	281
http://swik.net	263
http://translate.googleusercontent.com	254
http://localhost	247
http://assets.marcgrabanski.com	243
http://learningjquery.com	231
http://www.koolbuddhi.com	212
http://blog.factordstudio.com	185
http://www.jquery.allindoc.com	157
http://www.blog.smthakur.com	145
http://thuannvn.blogspot.com	135
http://feeds.feedburner.com	122
http://www.cnblogs.com	115
http://blog.nerdery.com	98
http://nomikos.info	93
http://vothanhduy.com	91
http://posterous.com	85
http://janaksodha.com	71
url_unknown	70
http://static.slidesharecdn.com	69
http://blog.artetweb.com	68
http://www.srikanthportal.com	67
http://greenido.wordpress.com	63
http://www.lug.or.kr	62
https://wiki.betware.com	62

jQuery Essentials

by Marc Grabanski

Accessibility

Categories

Upload Details

Usage Rights

285 Embeds 144K

Statistics