jQuery (MeshU)

jeresig
Building Interactive
Prototypes with jQuery
      MeshU - May 2008
     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
✦   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=_blank]”)
       .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
✦   $(“#asdf ”).load(“sample.html”);
    ✦ 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>”);
    });
Ajax (cont.)
✦   $(“#body”).load(“sample.html div > h1”);
    ✦ Before:
      <div id=”body”></div>
    ✦ After:
      <div id=”body”>
      <h1>Hello, world!</h1>
      </div>
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.)
✦   var ul = $(“ul.open”); // ul, ul, ul
    ul.children(“li”) // li, li, li
        .addClass(“open”)

    ul.find(“a”) // a, a, a
         .click(function(){
            $(this).next().toggle();
            return false;
         })
Why jQuery?
✦   Fully documented
✦   Great community
✦   Tons of plugins
✦   Small size (15kb)
✦   Everything works in IE 6+, Firefox,
    Safari 2+, and Opera 9+
Graduation
✦   Ideal for Prototyping
✦   Perfect for application development
✦   Designers and Developers agree!
Accordion Menu
     http://jquery.com/files/apple/
http://jquery.com/files/apple/done.html
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...
Todo List
     http://jquery.com/files/todo/
http://jquery.com/files/todo/done.php
Social Networking
      http://jquery.com/files/social/
 http://jquery.com/files/social/done.php
jQuery UI
✦   Full set of themed widgets and
    components
✦   Drop in and have it “just work”
✦   Themed to match your layout
✦   Easy to prototype with, easy to use in the
    final product
UI Components
✦   Drag & Drop
✦   Resize
✦   Tabs
✦   Slider
✦   Table Sorting
✦   Modal Dialog
✦   etc.
Who uses jQuery?
✦   Google
✦   IBM
✦   NBC
✦   Amazon
✦   Wordpress
✦   Digg
✦   many others...
Community
✦   Very active mailing list
    ✦ 100+ Posts/Day
    ✦ 6000+ Members

✦   Technorati: Dozens of blog posts per day
Books
✦   3 Books Released:
    ✦ Learning jQuery (Packt)
    ✦ jQuery Reference (Packt)
    ✦ jQuery in Action (Manning)
Random
✦   New Logo
✦   and New Web Site
✦   Coming Soon!
Summary
✦   Perfect for rapid-prototyping and
    deployable development.
✦   Provides plenty of drop in UI code.
jquery.com
docs.jquery.com - jquery.com/plugins
               More:
            ui.jquery.com
          visualjquery.com
        learningjquery.com
1 of 35

Recommended

jQuery (BostonPHP) by
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)jeresig
1.7K views34 slides
jQuery (DrupalCamp Toronto) by
jQuery (DrupalCamp Toronto)jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)jeresig
1.5K views35 slides
JavaScript 1.5 to 2.0 (TomTom) by
JavaScript 1.5 to 2.0 (TomTom)JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)jeresig
17.7K views53 slides
JavaScript Libraries (Kings of Code) by
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)jeresig
2.2K views83 slides
JavaScript Libraries (@Media) by
JavaScript Libraries (@Media)JavaScript Libraries (@Media)
JavaScript Libraries (@Media)jeresig
2.6K views89 slides
Processing and Processing.js by
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.jsjeresig
2.7K views15 slides

More Related Content

What's hot

DOM Scripting Toolkit - jQuery by
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQueryRemy Sharp
3.4K views44 slides
jQuery: Nuts, Bolts and Bling by
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingDoug Neiner
7.1K views31 slides
Unobtrusive javascript with jQuery by
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQueryAngel Ruiz
1.1K views59 slides
jQuery Essentials by
jQuery EssentialsjQuery Essentials
jQuery EssentialsBedis ElAchèche
2.8K views83 slides
jQuery Features to Avoid by
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoiddmethvin
1.6K views46 slides
HTML5: where flash isn't needed anymore by
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreRemy Sharp
2.5K views73 slides

What's hot(20)

DOM Scripting Toolkit - jQuery by Remy Sharp
DOM Scripting Toolkit - jQueryDOM Scripting Toolkit - jQuery
DOM Scripting Toolkit - jQuery
Remy Sharp3.4K views
jQuery: Nuts, Bolts and Bling by Doug Neiner
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and Bling
Doug Neiner7.1K views
Unobtrusive javascript with jQuery by Angel Ruiz
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQuery
Angel Ruiz1.1K views
jQuery Features to Avoid by dmethvin
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoid
dmethvin1.6K views
HTML5: where flash isn't needed anymore by Remy Sharp
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp2.5K views
An in-depth look at jQuery by Paul Bakaus
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQuery
Paul Bakaus1.4K views
jQuery('#knowledge').appendTo('#you'); by mikehostetler
jQuery('#knowledge').appendTo('#you');jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');
mikehostetler2.6K views
Yearning jQuery by Remy Sharp
Yearning jQueryYearning jQuery
Yearning jQuery
Remy Sharp16K views
JQuery in Seaside by ESUG
JQuery in SeasideJQuery in Seaside
JQuery in Seaside
ESUG3.8K views
Netvibes UWA workshop at ParisWeb 2007 by Netvibes
Netvibes UWA workshop at ParisWeb 2007Netvibes UWA workshop at ParisWeb 2007
Netvibes UWA workshop at ParisWeb 2007
Netvibes1.3K views
Introduction to jQuery by manugoel2003
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
manugoel20032.2K views
Reactive Type safe Webcomponents with skateJS by Martin Hochel
Reactive Type safe Webcomponents with skateJSReactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJS
Martin Hochel586 views
Remy Sharp The DOM scripting toolkit jQuery by deimos
Remy Sharp The DOM scripting toolkit jQueryRemy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
deimos1.3K views
JavaScript the Smart Way - Getting Started with jQuery by katbailey
JavaScript the Smart Way - Getting Started with jQueryJavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
katbailey2.2K views
从YUI2到YUI3看前端的演变 by Kejun Zhang
从YUI2到YUI3看前端的演变从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变
Kejun Zhang2.2K views

Similar to jQuery (MeshU)

jQuery Presentation to Rails Developers by
jQuery Presentation to Rails DevelopersjQuery Presentation to Rails Developers
jQuery Presentation to Rails DevelopersYehuda Katz
2.7K views38 slides
Learning jQuery @ MIT by
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MITjeresig
1.5K views31 slides
jQuery Internals + Cool Stuff by
jQuery Internals + Cool StuffjQuery Internals + Cool Stuff
jQuery Internals + Cool Stuffjeresig
6.1K views37 slides
jQuery for Seaside by
jQuery for SeasidejQuery for Seaside
jQuery for SeasideLukas Renggli
1.8K views57 slides
Building a JavaScript Library by
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Libraryjeresig
11.7K views54 slides
How to make Ajax Libraries work for you by
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for youSimon Willison
1.4K views51 slides

Similar to jQuery (MeshU)(20)

jQuery Presentation to Rails Developers by Yehuda Katz
jQuery Presentation to Rails DevelopersjQuery Presentation to Rails Developers
jQuery Presentation to Rails Developers
Yehuda Katz2.7K views
Learning jQuery @ MIT by jeresig
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
jeresig1.5K views
jQuery Internals + Cool Stuff by jeresig
jQuery Internals + Cool StuffjQuery Internals + Cool Stuff
jQuery Internals + Cool Stuff
jeresig6.1K views
Building a JavaScript Library by jeresig
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
jeresig11.7K views
How to make Ajax Libraries work for you by Simon Willison
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
Simon Willison1.4K views
jQuery 1.3 and jQuery UI by jeresig
jQuery 1.3 and jQuery UIjQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UI
jeresig4.5K views
Introduction to jQuery (Ajax Exp 2006) by jeresig
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
jeresig2.4K views
Introduction to jQuery (Ajax Exp 2007) by jeresig
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
jeresig1.3K views
jQuery - Boston IxDA by jeresig
jQuery - Boston IxDAjQuery - Boston IxDA
jQuery - Boston IxDA
jeresig1.6K views
Everything is Awesome - Cutting the Corners off the Web by James Rakich
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
James Rakich544 views
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group) by Doris Chen
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen9.5K views
Building iPhone Web Apps using "classic" Domino by Rob Bontekoe
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
Rob Bontekoe1.6K views
The Dom Scripting Toolkit J Query by QConLondon2008
The Dom Scripting Toolkit J QueryThe Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J Query
QConLondon2008646 views
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries by Simon Willison
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Simon Willison48.2K views
20111014 mu me_j_querymobile by Erik Duval
20111014 mu me_j_querymobile20111014 mu me_j_querymobile
20111014 mu me_j_querymobile
Erik Duval435 views

More from jeresig

Does Coding Every Day Matter? by
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?jeresig
3K views19 slides
Accidentally Becoming a Digital Librarian by
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarianjeresig
1.3K views72 slides
2014: John's Favorite Thing (Neo4j) by
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)jeresig
847 views42 slides
Computer Vision as Art Historical Investigation by
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigationjeresig
1K views89 slides
Hacking Art History by
Hacking Art HistoryHacking Art History
Hacking Art Historyjeresig
925 views107 slides
Using JS to teach JS at Khan Academy by
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academyjeresig
1K views25 slides

More from jeresig(20)

Does Coding Every Day Matter? by jeresig
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?
jeresig3K views
Accidentally Becoming a Digital Librarian by jeresig
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
jeresig1.3K views
2014: John's Favorite Thing (Neo4j) by jeresig
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
jeresig847 views
Computer Vision as Art Historical Investigation by jeresig
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
jeresig1K views
Hacking Art History by jeresig
Hacking Art HistoryHacking Art History
Hacking Art History
jeresig925 views
Using JS to teach JS at Khan Academy by jeresig
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
jeresig1K views
Applying Computer Vision to Art History by jeresig
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig826 views
NYARC 2014: Frick/Zeri Results by jeresig
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
jeresig2.1K views
EmpireJS: Hacking Art with Node js and Image Analysis by jeresig
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
jeresig18.5K views
Applying Computer Vision to Art History by jeresig
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig3.1K views
JavaScript Libraries (Ajax Exp 2006) by jeresig
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
jeresig3.1K views
jQuery Recommendations to the W3C (2011) by jeresig
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
jeresig1.7K views
jQuery Open Source Process (RIT 2011) by jeresig
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
jeresig1.7K views
jQuery Open Source Process (Knight Foundation 2011) by jeresig
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
jeresig2.2K views
jQuery Mobile by jeresig
jQuery MobilejQuery Mobile
jQuery Mobile
jeresig1.5K views
jQuery Open Source (Fronteer 2011) by jeresig
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
jeresig4K views
Holistic JavaScript Performance by jeresig
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
jeresig4K views
New Features Coming in Browsers (RIT '09) by jeresig
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
jeresig1.5K views
Advanced jQuery (Ajax Exp 2007) by jeresig
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
jeresig1.3K views
JavaScript Library Overview (Ajax Exp West 2007) by jeresig
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)
jeresig1.4K views

Recently uploaded

Microsoft Power Platform.pptx by
Microsoft Power Platform.pptxMicrosoft Power Platform.pptx
Microsoft Power Platform.pptxUni Systems S.M.S.A.
53 views38 slides
HTTP headers that make your website go faster - devs.gent November 2023 by
HTTP headers that make your website go faster - devs.gent November 2023HTTP headers that make your website go faster - devs.gent November 2023
HTTP headers that make your website go faster - devs.gent November 2023Thijs Feryn
22 views151 slides
Info Session November 2023.pdf by
Info Session November 2023.pdfInfo Session November 2023.pdf
Info Session November 2023.pdfAleksandraKoprivica4
12 views15 slides
6g - REPORT.pdf by
6g - REPORT.pdf6g - REPORT.pdf
6g - REPORT.pdfLiveplex
10 views23 slides
Ransomware is Knocking your Door_Final.pdf by
Ransomware is Knocking your Door_Final.pdfRansomware is Knocking your Door_Final.pdf
Ransomware is Knocking your Door_Final.pdfSecurity Bootcamp
55 views46 slides
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdfDr. Jimmy Schwarzkopf
19 views29 slides

Recently uploaded(20)

HTTP headers that make your website go faster - devs.gent November 2023 by Thijs Feryn
HTTP headers that make your website go faster - devs.gent November 2023HTTP headers that make your website go faster - devs.gent November 2023
HTTP headers that make your website go faster - devs.gent November 2023
Thijs Feryn22 views
6g - REPORT.pdf by Liveplex
6g - REPORT.pdf6g - REPORT.pdf
6g - REPORT.pdf
Liveplex10 views
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by Dr. Jimmy Schwarzkopf
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf
Voice Logger - Telephony Integration Solution at Aegis by Nirmal Sharma
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at Aegis
Nirmal Sharma39 views
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by sugiuralab
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors
sugiuralab19 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb14 views
Powerful Google developer tools for immediate impact! (2023-24) by wesley chun
Powerful Google developer tools for immediate impact! (2023-24)Powerful Google developer tools for immediate impact! (2023-24)
Powerful Google developer tools for immediate impact! (2023-24)
wesley chun10 views
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc10 views
Unit 1_Lecture 2_Physical Design of IoT.pdf by StephenTec
Unit 1_Lecture 2_Physical Design of IoT.pdfUnit 1_Lecture 2_Physical Design of IoT.pdf
Unit 1_Lecture 2_Physical Design of IoT.pdf
StephenTec12 views
Case Study Copenhagen Energy and Business Central.pdf by Aitana
Case Study Copenhagen Energy and Business Central.pdfCase Study Copenhagen Energy and Business Central.pdf
Case Study Copenhagen Energy and Business Central.pdf
Aitana16 views

jQuery (MeshU)

  • 1. Building Interactive Prototypes with jQuery MeshU - May 2008 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 ✦ 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=_blank]”) .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 ✦ $(“#asdf ”).load(“sample.html”); ✦ 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. Ajax (cont.) ✦ $(“#body”).load(“sample.html div > h1”); ✦ Before: <div id=”body”></div> ✦ After: <div id=”body”> <h1>Hello, world!</h1> </div>
  • 19. 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();
  • 20. Chaining (cont.) ✦ var ul = $(“ul.open”); // ul, ul, ul ul.children(“li”) // li, li, li .addClass(“open”) ul.find(“a”) // a, a, a .click(function(){ $(this).next().toggle(); return false; })
  • 21. Why jQuery? ✦ Fully documented ✦ Great community ✦ Tons of plugins ✦ Small size (15kb) ✦ Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
  • 22. Graduation ✦ Ideal for Prototyping ✦ Perfect for application development ✦ Designers and Developers agree!
  • 23. Accordion Menu http://jquery.com/files/apple/ http://jquery.com/files/apple/done.html
  • 24. 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(); }); };
  • 25. Plugins ✦ Drag and Drop ✦ Sortables ✦ Modal Dialogs ✦ Tabbed Navigation ✦ Sortable Tables ✦ And hundreds more...
  • 26. Todo List http://jquery.com/files/todo/ http://jquery.com/files/todo/done.php
  • 27. Social Networking http://jquery.com/files/social/ http://jquery.com/files/social/done.php
  • 28. jQuery UI ✦ Full set of themed widgets and components ✦ Drop in and have it “just work” ✦ Themed to match your layout ✦ Easy to prototype with, easy to use in the final product
  • 29. UI Components ✦ Drag & Drop ✦ Resize ✦ Tabs ✦ Slider ✦ Table Sorting ✦ Modal Dialog ✦ etc.
  • 30. Who uses jQuery? ✦ Google ✦ IBM ✦ NBC ✦ Amazon ✦ Wordpress ✦ Digg ✦ many others...
  • 31. Community ✦ Very active mailing list ✦ 100+ Posts/Day ✦ 6000+ Members ✦ Technorati: Dozens of blog posts per day
  • 32. Books ✦ 3 Books Released: ✦ Learning jQuery (Packt) ✦ jQuery Reference (Packt) ✦ jQuery in Action (Manning)
  • 33. Random ✦ New Logo ✦ and New Web Site ✦ Coming Soon!
  • 34. Summary ✦ Perfect for rapid-prototyping and deployable development. ✦ Provides plenty of drop in UI code.
  • 35. jquery.com docs.jquery.com - jquery.com/plugins More: ui.jquery.com visualjquery.com learningjquery.com