SlideShare uma empresa Scribd logo
1 de 31
Baixar para ler offline
Building Interactive
Prototypes with jQuery
   @Media Ajax - November 2007
      John Resig (ejohn.org)
What is jQuery?
✦   An open source JavaScript library that
    simplifies the interaction between HTML
    and JavaScript.
Ideal for Prototyping
✦   Completely unobtrusive
✦   Uses CSS to layer functionality
✦   Easy to separate behavior
✦   Quick, terse, syntax
The Focus of jQuery

Find Some Elements Do something with them
    {


                         {
   $(“div”).addClass(“special”);
      jQuery Object
The jQuery Object
✦   Commonly named ‘$’
✦   Also named ‘jQuery’
✦   Completely valid:
    ✦ jQuery(“div”).addClass(“special”);
Find Some Elements...
✦   Full CSS Selector 1-3 Support
✦   Basic XPath
✦   Better CSS Selector support than most
    browsers
$(“div”)
<div id=”body”>
  <h2>Some Header</h2>
  <div class=”contents”>
      <p>...</p>
      <p>...</p>
  </div>
</div>
$(“#body”)
<div id=”body”>
  <h2>Some Header</h2>
  <div class=”contents”>
      <p>...</p>
      <p>...</p>
  </div>
</div>
$(“div#body”)
<div id=”body”>
  <h2>Some Header</h2>
  <div class=”contents”>
      <p>...</p>
      <p>...</p>
  </div>
</div>
$(“div.contents p”)
  <div id=”body”>
    <h2>Some Header</h2>
    <div class=”contents”>
        <p>...</p>
        <p>...</p>
    </div>
  </div>
$(“div > div”)
<div id=”body”>
  <h2>Some Header</h2>
  <div class=”contents”>
      <p>...</p>
      <p>...</p>
  </div>
</div>
$(“div:has(div)”)
 <div id=”body”>
   <h2>Some Header</h2>
   <div class=”contents”>
       <p>...</p>
       <p>...</p>
   </div>
 </div>
Do something with them
✦   DOM Manipulation (append, prepend, remove)
✦   Events (click, hover, toggle)
✦   Effects (hide, show, slideDown, fadeOut)
✦   AJAX (load, get, post)
DOM Manipulation
✦   $(“a[target]”)
       .append(“ (Opens in New Window)”);
✦   $(“#body”).css({
        border: “1px solid green”,
        height: “40px”
    });
Events
✦   $(“form”).submit(function(){
        if ( $(“input#name”).val() == “” )
           $(“span.help”).show();
    });
✦   $(“a#open”).click(function(){
        $(“#menu”).show();
        return false;
    });
Animations
✦   $(“#menu”).slideDown(“slow”);
✦   Individual properties:
    $(“div”).animate({
        fontWeight: “2em”,
        width: “+=20%”,
        color: “green” // via plugin
    });

✦   Callbacks:
    $(“div”).hide(500, function(){
        // $(this) is an individual <div> element
        $(this).show(500);
    });
Ajax
✦   $(“#body”).load(“sample.html div > h1”);
    ✦ Before:
      <div id=”body”></div>
    ✦ After:
      <div id=”body”>
      <h1>Hello, world!</h1>
      </div>
✦   $.getJSON(“test.json”, function(js){
      for ( var name in js )
        $(“ul”).append(“<li>” + name + “</li>”);
    });
Chaining
✦   You can have multiple actions against a single set
    of elements
✦   $(“div”).hide();
✦   $(“div”).hide().css(“color”,”blue”);
✦   $(“div”).hide().css(“color”,”blue”).slideDown();
Chaining (cont.)
✦   $(“ul.open”) // [ ul, ul, ul ]
       .children(“li”) // [ li, li, li ]
          .addClass(“open”) // [ li, li, li]
       .end() // [ ul, ul, ul ]
       .find(“a”) // [ a, a, a ]
          .click(function(){
              $(this).next().toggle();
              return false;
          }) // [ a, a, a ]
       .end(); // [ ul, ul, ul ]
Why jQuery?
✦   Fully documented
✦   Great community
✦   Tons of plugins
✦   Small size (14kb)
✦   Everything works in IE 6+, Firefox,
    Safari 2+, and Opera 9+
jQuery Plugins
✦   Extend the jQuery system
✦   Add on extra methods:
    $(“div”).hideRemove();
✦   Trivial to implement:
    jQuery.fn.hideRemove = function(speed){
       return this.hide(speed, function(){
           jQuery(this).remove();
       });
    };
Plugins
✦   Drag and Drop
✦   Sortables
✦   Modal Dialogs
✦   Tabbed Navigation
✦   Sortable Tables
✦   And hundreds more...
Prototyping Demos
Accordion Menu
     http://jquery.com/files/apple/
http://jquery.com/files/apple/done.html
Social Networking
      http://jquery.com/files/social/
 http://jquery.com/files/social/done.php
Todo List
     http://jquery.com/files/todo/
http://jquery.com/files/todo/done.php
Who uses jQuery?
✦   Google
✦   IBM
✦   NBC
✦   Amazon
✦   Wordpress
✦   Digg
✦   many others...
Community
✦   Very active mailing list
    ✦ 108+ Posts/Day
    ✦ 4000+ Members

✦   Technorati: Dozens of blog posts per day
Books
✦   2 Books Released:
    ✦ Learning jQuery (Packt)
    ✦ jQuery Reference (Packt)

✦   1 Book in Progress:
    ✦ jQuery in Action (Manning)
jQuery UI
✦   Full set of themed widgets and
    components
✦   Drag & Drop
✦   Tabs
✦   Table
✦   Modal Dialog
✦   etc.
jquery.com
docs.jquery.com - jquery.com/plugins
               More:
            ui.jquery.com
          visualjquery.com
        learningjquery.com

Mais conteúdo relacionado

Mais de jeresig

Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarianjeresig
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)jeresig
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigationjeresig
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art Historyjeresig
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academyjeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art Historyjeresig
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Resultsjeresig
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysisjeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art Historyjeresig
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)jeresig
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jeresig
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jeresig
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jeresig
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobilejeresig
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jeresig
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performancejeresig
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)jeresig
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)jeresig
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)jeresig
 

Mais de jeresig (20)

Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art History
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
 

Último

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 

Último (20)

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 

Building Interactive Prototypes with jQuery

  • 1. Building Interactive Prototypes with jQuery @Media Ajax - November 2007 John Resig (ejohn.org)
  • 2. What is jQuery? ✦ An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
  • 3. Ideal for Prototyping ✦ Completely unobtrusive ✦ Uses CSS to layer functionality ✦ Easy to separate behavior ✦ Quick, terse, syntax
  • 4. The Focus of jQuery Find Some Elements Do something with them { { $(“div”).addClass(“special”); jQuery Object
  • 5. The jQuery Object ✦ Commonly named ‘$’ ✦ Also named ‘jQuery’ ✦ Completely valid: ✦ jQuery(“div”).addClass(“special”);
  • 6. Find Some Elements... ✦ Full CSS Selector 1-3 Support ✦ Basic XPath ✦ Better CSS Selector support than most browsers
  • 7. $(“div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 8. $(“#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 9. $(“div#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 10. $(“div.contents p”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 11. $(“div > div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 12. $(“div:has(div)”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 13. Do something with them ✦ DOM Manipulation (append, prepend, remove) ✦ Events (click, hover, toggle) ✦ Effects (hide, show, slideDown, fadeOut) ✦ AJAX (load, get, post)
  • 14. DOM Manipulation ✦ $(“a[target]”) .append(“ (Opens in New Window)”); ✦ $(“#body”).css({ border: “1px solid green”, height: “40px” });
  • 15. Events ✦ $(“form”).submit(function(){ if ( $(“input#name”).val() == “” ) $(“span.help”).show(); }); ✦ $(“a#open”).click(function(){ $(“#menu”).show(); return false; });
  • 16. Animations ✦ $(“#menu”).slideDown(“slow”); ✦ Individual properties: $(“div”).animate({ fontWeight: “2em”, width: “+=20%”, color: “green” // via plugin }); ✦ Callbacks: $(“div”).hide(500, function(){ // $(this) is an individual <div> element $(this).show(500); });
  • 17. Ajax ✦ $(“#body”).load(“sample.html div > h1”); ✦ Before: <div id=”body”></div> ✦ After: <div id=”body”> <h1>Hello, world!</h1> </div> ✦ $.getJSON(“test.json”, function(js){ for ( var name in js ) $(“ul”).append(“<li>” + name + “</li>”); });
  • 18. Chaining ✦ You can have multiple actions against a single set of elements ✦ $(“div”).hide(); ✦ $(“div”).hide().css(“color”,”blue”); ✦ $(“div”).hide().css(“color”,”blue”).slideDown();
  • 19. Chaining (cont.) ✦ $(“ul.open”) // [ ul, ul, ul ] .children(“li”) // [ li, li, li ] .addClass(“open”) // [ li, li, li] .end() // [ ul, ul, ul ] .find(“a”) // [ a, a, a ] .click(function(){ $(this).next().toggle(); return false; }) // [ a, a, a ] .end(); // [ ul, ul, ul ]
  • 20. Why jQuery? ✦ Fully documented ✦ Great community ✦ Tons of plugins ✦ Small size (14kb) ✦ Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
  • 21. jQuery Plugins ✦ Extend the jQuery system ✦ Add on extra methods: $(“div”).hideRemove(); ✦ Trivial to implement: jQuery.fn.hideRemove = function(speed){ return this.hide(speed, function(){ jQuery(this).remove(); }); };
  • 22. Plugins ✦ Drag and Drop ✦ Sortables ✦ Modal Dialogs ✦ Tabbed Navigation ✦ Sortable Tables ✦ And hundreds more...
  • 24. Accordion Menu http://jquery.com/files/apple/ http://jquery.com/files/apple/done.html
  • 25. Social Networking http://jquery.com/files/social/ http://jquery.com/files/social/done.php
  • 26. Todo List http://jquery.com/files/todo/ http://jquery.com/files/todo/done.php
  • 27. Who uses jQuery? ✦ Google ✦ IBM ✦ NBC ✦ Amazon ✦ Wordpress ✦ Digg ✦ many others...
  • 28. Community ✦ Very active mailing list ✦ 108+ Posts/Day ✦ 4000+ Members ✦ Technorati: Dozens of blog posts per day
  • 29. Books ✦ 2 Books Released: ✦ Learning jQuery (Packt) ✦ jQuery Reference (Packt) ✦ 1 Book in Progress: ✦ jQuery in Action (Manning)
  • 30. jQuery UI ✦ Full set of themed widgets and components ✦ Drag & Drop ✦ Tabs ✦ Table ✦ Modal Dialog ✦ etc.
  • 31. jquery.com docs.jquery.com - jquery.com/plugins More: ui.jquery.com visualjquery.com learningjquery.com