SlideShare a Scribd company logo

jQuery Essentials

Things you should know about jQuery JavaScript library.

1 of 115
Download to read offline
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()
<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
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

Recommended

Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptMuhammadRehan856177
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript ProgrammingSehwan Noh
 
Java script errors &amp; exceptions handling
Java script  errors &amp; exceptions handlingJava script  errors &amp; exceptions handling
Java script errors &amp; exceptions handlingAbhishekMondal42
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 

More Related Content

What's hot (20)

Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
JavaScript - Chapter 11 - Events
 JavaScript - Chapter 11 - Events  JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
Css tables
Css tablesCss tables
Css tables
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOM
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
Html forms
Html formsHtml forms
Html forms
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
 
Javascript functions
Javascript functionsJavascript functions
Javascript functions
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Php and MySQL
Php and MySQLPhp and MySQL
Php and MySQL
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 

Similar to jQuery Essentials

jQuery Rescue Adventure
jQuery Rescue AdventurejQuery Rescue Adventure
jQuery Rescue AdventureAllegient
 
Rails Presentation - Technology Books, Tech Conferences
 Rails Presentation - Technology Books, Tech Conferences Rails Presentation - Technology Books, Tech Conferences
Rails Presentation - Technology Books, Tech Conferencestutorialsruby
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentationguestcf600a
 
JQuery-Tutorial" />
  JQuery-Tutorial" />  JQuery-Tutorial" />
JQuery-Tutorial" />tutorialsruby
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentationguestcf600a
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQueryAngel Ruiz
 
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Jack Franklin
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQueryorestJump
 
jQuery - Introdução
jQuery - IntroduçãojQuery - Introdução
jQuery - IntroduçãoGustavo Dutra
 
JQuery do dia-a-dia Gustavo Dutra
JQuery do dia-a-dia Gustavo DutraJQuery do dia-a-dia Gustavo Dutra
JQuery do dia-a-dia Gustavo DutraTchelinux
 
Working With JQuery Part1
Working With JQuery Part1Working With JQuery Part1
Working With JQuery Part1saydin_soft
 

Similar to jQuery Essentials (20)

jQuery Rescue Adventure
jQuery Rescue AdventurejQuery Rescue Adventure
jQuery Rescue Adventure
 
Rails Presentation - Technology Books, Tech Conferences
 Rails Presentation - Technology Books, Tech Conferences Rails Presentation - Technology Books, Tech Conferences
Rails Presentation - Technology Books, Tech Conferences
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentation
 
JQuery-Tutorial" />
  JQuery-Tutorial" />  JQuery-Tutorial" />
JQuery-Tutorial" />
 
jQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20PresentationjQuery%20on%20Rails%20Presentation
jQuery%20on%20Rails%20Presentation
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQuery
 
Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9Introduction to jQuery - Barcamp London 9
Introduction to jQuery - Barcamp London 9
 
jQuery
jQueryjQuery
jQuery
 
JQuery
JQueryJQuery
JQuery
 
J query training
J query trainingJ query training
J query training
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQuery
 
jQuery - Introdução
jQuery - IntroduçãojQuery - Introdução
jQuery - Introdução
 
JQuery do dia-a-dia Gustavo Dutra
JQuery do dia-a-dia Gustavo DutraJQuery do dia-a-dia Gustavo Dutra
JQuery do dia-a-dia Gustavo Dutra
 
Jquery 3
Jquery 3Jquery 3
Jquery 3
 
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
 
Hooks WCSD12
Hooks WCSD12Hooks WCSD12
Hooks WCSD12
 
Working With JQuery Part1
Working With JQuery Part1Working With JQuery Part1
Working With JQuery Part1
 
J Query Public
J Query PublicJ Query Public
J Query Public
 
jQuery
jQueryjQuery
jQuery
 

More from Marc Grabanski

CSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsCSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsMarc Grabanski
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllMarc Grabanski
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Marc Grabanski
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery PluginsMarc Grabanski
 

More from Marc Grabanski (8)

CSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsCSS/SVG Matrix Transforms
CSS/SVG Matrix Transforms
 
Free vs Paid Content
Free vs Paid ContentFree vs Paid Content
Free vs Paid Content
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
 
jQTouch and Titanium
jQTouch and TitaniumjQTouch and Titanium
jQTouch and Titanium
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 

Recently uploaded

Personal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FSPersonal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FSvnendicottstudent
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and OptionsJIT KUMAR GUPTA
 
Jamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani weddingJamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani weddingPriyanka Singhvi
 
Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023maker Money
 
Concept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.pptConcept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.pptAr. TANIA BERA
 
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbvStoryboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv22nvatafu
 
Cargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryCargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryDarshiniPatel16
 
Book on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural ProjectsBook on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural ProjectsJIT KUMAR GUPTA
 
introduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptxintroduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptxrajeshkapahi786
 
Explore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdfExplore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdfCREATIVEDESIGNS9
 
The Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignThe Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignAlbany Glass
 
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...JIT KUMAR GUPTA
 
Interior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionInterior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionNityaSharma77
 
International Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptxInternational Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptxzulamirulhaq1
 
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfAnavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfanishdishis
 
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm22nvatafu
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Peter139483
 

Recently uploaded (17)

Personal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FSPersonal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FS
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and Options
 
Jamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani weddingJamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani wedding
 
Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023
 
Concept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.pptConcept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.ppt
 
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbvStoryboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
 
Cargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryCargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industry
 
Book on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural ProjectsBook on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural Projects
 
introduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptxintroduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptx
 
Explore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdfExplore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdf
 
The Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignThe Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel Design
 
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
 
Interior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionInterior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features Extraction
 
International Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptxInternational Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptx
 
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfAnavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
 
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
 

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
  • 9. jQuery Philosophy #1. Find some HTML
  • 10. jQuery Philosophy #1. Find some HTML #2. Do something to it
  • 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”)
  • 25. Find Do $(“div”) .addClass(“redbox”);
  • 26. jQuery API Spice Two things that make the API HOT
  • 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>”; });
  • 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>
  • 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)
  • 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”);
  • 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();
  • 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”);
  • 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(); });
  • 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
  • 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);
  • 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>
  • 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); });
  • 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>
  • 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