Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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]....
Hide divs with pure JavaScript
divs = document.getElementByTagName(‘div’);

for (i = 0; i < divs.length; i++) {
  divs[i]....
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 numbere...
Selector Examples

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

$(“#content”) get element with id content
$(“li:first”) get first list item
$(“tr:odd”) get odd numbere...
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 + “</...
jQuery Methods
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addC...
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addC...
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addC...
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addC...
jQuery Methods
•Moving Elements:
 append(), appendTo(), before(), after(),
•Attributes
 css(), attr(), html(), val(), addC...
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...
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(){
  ...
Moving Elements Examples

Get element with ID foo and add some HTML.
 $(“#foo”)
 <html>
  <body>
    <div>jQuery</div>
   ...
Moving Elements Examples

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

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

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

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

Move paragraphs to element with id “foo”
$(“p”) .appendTo(“#foo”);
<html>
 <body>
   <div>jQuery...
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()
...
Attributes


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


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


Get                 Set
.attr(‘id’)         .attr(‘id’, ‘foo’)
.html()             .html(“<p>hi</p>”)
.val() ...
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({
  ...
Attributes
Set border to 1px black
 $(...).css(“border”, “1px solid black”);

Set various css properties.
 $(...).css({
  ...
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...
Attributes

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

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

Replace HTML with a new paragraph.
 $(...).html(“<p>I’m new</p>”);
    <div>whatever</div> turns into
    <div...
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 an...
Events
When a button is clicked, do something.
 $(“button”).click(function(){
   something();
 });
Setup a custom event an...
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 delegati...
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()...
Animation / Effects

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

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

Get previous table cells to #myCell.
$(“#myCell”) .prevAll()
  <html>
   <body>
     <table><tr>
    ...
Traversing Examples

Get previous table cells to #myCell.
$(“#myCell”) .prevAll() .andSelf();
  <html>
   <body>
     <tab...
Traversing Examples

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

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

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

Move paragraphs to element with id “foo”
$(“table”) .next().find(“p”);
<html>
 <body>
   <table></tab...
Ajax Examples
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, ...
Extending jQuery
Plugin Example
$.fn.myPlugin = function(){
  return this.each(function(){
    $(this).html(“you used myPlugin!”);
  });
})...
Plugin Example
$.fn.myPlugin = function(){
  return this.each(function(){
    $(this).html(“you used myPlugin!”);
  });
})...
Plugin Example
$.fn.myPlugin = function(){
  return this.each(function(){
    $(this).html(“you used myPlugin!”);
  });
})...
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
 ...
Led to World Domination

                             jQuery

 http://google.com/trends?q=dojo+javascript,+jquery+javascri...
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
  com...
Support
 jQuery general discussion mailing list
    http://forum.jquery.com

 jQuery discussion docs page
    http://docs....
Books




Learning jQuery 1.3                             jQuery in Action
by Karl Swedberg                               ...
Video Training




http://marcgrabanski.com/article/the-jquery-course-prerelease
Thank you!
Marc Grabanski:
http://marcgrabanski.com

Twitter: @1Marc
Upcoming SlideShare
Loading in …5
×

jQuery Essentials

361,063 views

Published on

Things you should know about jQuery JavaScript library.

Published in: Design, Technology
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

jQuery Essentials

  1. v2 jQuery Essentials by Marc Grabanski
  2. We needed a hero to get these guys in line
  3. jQuery rescues us by working the same in all browsers!
  4. Easier to write jQuery than pure JavaScript
  5. Hide divs with pure JavaScript divs = document.getElementByTagName(‘div’); for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’; }
  6. 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();
  7. HTML is tied to JavaScript
  8. jQuery Philosophy
  9. jQuery Philosophy #1. Find some HTML
  10. jQuery Philosophy #1. Find some HTML #2. Do something to it
  11. Find $(“div”)
  12. Find let’s find some $(“div”) elements
  13. Give $() a selector
  14. Give $() a selector $(“#myId”)
  15. Give $() a selector $(“#myId”) $(“.myClass”)
  16. Give $() a selector $(“#myId”) $(“.myClass”) $(“table”)
  17. Selector Examples $(“#content”) get element with id content
  18. Selector Examples $(“#content”) get element with id content $(“li:first”) get first list item
  19. Selector Examples $(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows
  20. 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”
  21. 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”
  22. You can also string selectors together
  23. You can also string selectors together $(“#myId, .myClass, table”)
  24. Find $(“div”)
  25. Find Do $(“div”) .addClass(“redbox”);
  26. jQuery API Spice Two things that make the API HOT
  27. Chain Methods $(“div”).addClass(“redbox”)
  28. Chain Methods $(“div”).addClass(“redbox”) .fadeOut();
  29. One Method, Many Uses $(...).html();
  30. One Method, Many Uses $(...).html(); $(...).html(“<p>hello</p>”);
  31. One Method, Many Uses $(...).html(); $(...).html(“<p>hello</p>”); $(...).html(function(i){ return “<p>hello “ + i + “</p>”; });
  32. jQuery Methods
  33. jQuery Methods •Moving Elements: append(), appendTo(), before(), after(),
  34. jQuery Methods •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass()
  35. jQuery Methods •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click()
  36. 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()
  37. 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()
  38. 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()
  39. jQuery Factory Method $() You can also pass $() a function to run the function after the page loads.
  40. jQuery Factory Method $() You can also pass $() a function to run the function after the page loads. $(function(){ });
  41. 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 });
  42. 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(){ });
  43. 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
  44. 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>
  45. 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>
  46. 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>
  47. 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>
  48. 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>
  49. 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>
  50. Attributes
  51. Attributes Get .attr(‘id’)
  52. Attributes Get .attr(‘id’) .html()
  53. Attributes Get .attr(‘id’) .html() .val()
  54. Attributes Get .attr(‘id’) .html() .val() .css(“top”)
  55. Attributes Get .attr(‘id’) .html() .val() .css(“top”) .width()
  56. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .val() .css(“top”) .width()
  57. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val() .css(“top”) .width()
  58. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val() .val(“new val”) .css(“top”) .width()
  59. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val() .val(“new val”) .css(“top”) .css(“top”, “80px”) .width()
  60. 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)
  61. Attributes
  62. Attributes Set border to 1px black $(...).css(“border”, “1px solid black”);
  63. Attributes Set border to 1px black $(...).css(“border”, “1px solid black”); Set various css properties. $(...).css({ “background”: “yellow”, “height”: “400px” });
  64. 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”);
  65. Attributes
  66. Attributes Replace HTML with a new paragraph. $(...).html(“<p>I’m new</p>”);
  67. 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>
  68. 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”);
  69. 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”);
  70. 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();
  71. Events Examples
  72. Events
  73. Events When a button is clicked, do something. $(“button”).click(function(){ something(); });
  74. 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”);
  75. 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”);
  76. Event Delegation
  77. Event Delegation Attach events to document $(“button”).live(‘click’, function(){ something(); });
  78. Event Delegation Attach events to document $(“button”).live(‘click’, function(){ something(); }); Attach event delegation to elements $(“form“).delegate(“button”, ”click”, function(){ something(); });
  79. Effects / Animation Examples
  80. Animation / Effects Types of Effects
  81. Animation / Effects Types of Effects #1. Hide and Show
  82. Animation / Effects Types of Effects #1. Hide and Show #2. Fade In and Out
  83. Animation / Effects Types of Effects #1. Hide and Show #2. Fade In and Out #3. Slide Up and Down
  84. Animation / Effects
  85. Animation / Effects With each click, slide up / slide down a div. $(...).click(function(){ $(“div:first”).slideToggle(); });
  86. 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);
  87. 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);
  88. Traversing Examples
  89. 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>
  90. 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>
  91. 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>
  92. Traversing Examples Move paragraphs to element with id “foo” $(“table”) <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>
  93. 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>
  94. 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>
  95. 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>
  96. Ajax Examples
  97. Ajax Examples
  98. Ajax Examples Post data, “bar” equals “baz” to tag.php using get. $(...).get(“tag.php”, { “bar”: “baz” });
  99. 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); });
  100. Extending jQuery
  101. Plugin Example $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); }); }); <html> <body> <div></div> <div></div> </body> </html>
  102. Plugin Example $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); }); }); $(“div”).myPlugin(); <html> <body> <div></div> <div></div> </body> </html>
  103. 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>
  104. Wait, There’s More!
  105. jQuery isn’t only about simpler code
  106. jQuery isn’t only about simpler code and being more productive
  107. jQuery isn’t only about simpler code and being more productive It is also about..
  108. 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
  109. 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
  110. Usage Across Top 10,000 Sites http://trends.builtwith.com/javascript
  111. Plugins jQuery has hundreds of plugins at http://plugins.jquery.com/ jQuery UI Set of official user interface components at: http://jqueryui.com
  112. 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
  113. 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
  114. Video Training http://marcgrabanski.com/article/the-jquery-course-prerelease
  115. Thank you! Marc Grabanski: http://marcgrabanski.com Twitter: @1Marc

×