jQuery (BostonPHP)

jeresig
jQuery
BostonPHP - June 2008
 John Resig (ejohn.org)
What is jQuery?
✦   An open source JavaScript library that
    simplifies the interaction between HTML
    and JavaScript.
The Focus of jQuery

Find Some Elements Do something with them
    {


                         {
   $(“div”).addClass(“special”);
      jQuery Object
Keep Clean
✦   jQuery can be rename ‘$’:
    var $jq = jQuery.noConflict();
    $jq(“div”).hide();
✦   jQuery can even rename ‘jQuery’ allowing
    multiple copies of jQuery to work side-by-
    side.
✦   var $a = jQuery.noConflict(true);
    // load other version of jQuery
    $a(“div”).hide(); // still works!
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.contents p”)
  <div id=”body”>
    <h2>Some Header</h2>
    <div class=”contents”>
        <p>...</p>
        <p>...</p>
    </div>
  </div>
$(“#body > div”)
 <div id=”body”>
   <h2>Some Header</h2>
   <div class=”contents”>
       <p>...</p>
       <p>...</p>
   </div>
 </div>
$(“div[class]”)
<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(“ <img src=’new.png’/>”);
✦   $(“#body”).css({
        border: “1px solid green”,
        height: “40px”
    });
Events
✦   $(“form”).submit(function(){
        if ( $(“input#name”).val() == “” ) {
           $(“span.help”).show();
           return false;
        }
    });
✦   $(“a#open”).click(function(){
        $(“#menu”).show();
        return false;
    });
Animations
✦   $(“#menu”).slideDown(“slow”);
✦   Individual properties:
    $(“div”).animate({
        fontSize: “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”);
    ✦ 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.)
✦   $(“ul.open”) // ul
       .children(“li”) // li
         .addClass(“open”) // li
       .end() // ul
       .find(“a”)
          .click(function(){
             $(this).next().toggle();
             return false;
          })
       .end();
HTML Selector
✦   $(“<li><a></a></li>”)
     .find(“a”)
       .attr(“href ”, “http://ejohn.org/”)
       .html(“John Resig”)
     .end()
     .appendTo(“ul”);
liveQuery
✦   Makes jQuery work like CSS
✦   Works on all matches, forever
✦   Simple plugin
✦   $(“a.stop”).livequery(“click”, function(){
      $(this).blur();
      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+
Accordion Menu
     http://jquery.com/files/apple/
http://jquery.com/files/apple/done.html
Plugins
✦   Huge plugin ecosystem
✦   Managed by Plugin tracker - built with
    Drupal!
    http://plugins.jquery.com/
✦   Hundreds in the tracker - even more on
    the web
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();
       });
    };
Todo List
     http://jquery.com/files/todo/
http://jquery.com/files/todo/done.php
jQuery UI
✦   A complete set of themed, cross-browser,
    user interface components.
✦   Drag, Drop, Sort, Select, Resize
✦   Accordion, Datepicker, Dialog, Slider, Tabs
✦   More info:
    http://docs.jquery.com/UI
✦   1.5 is in beta right now:
    http://jquery.com/blog/2008/02/12/jquery-ui-15b-new-api-more-features-huge-performance-boost/
Accessibility
✦   Keyboard Accessible
✦   Screenreader Accessible
✦   Grant from Mozilla Foundation to
    implement ARIA
Support
✦   Liferay (Java CMS) hired Paul Bakaus,
    jQuery UI lead to work on it full time.
✦   More support on the way!
Who uses jQuery?
✦   Projects:
    ✦ Wordpress, Drupal, CakePHP,
      Textpattern, Mozilla
✦   Companies:
    ✦ Google, IBM, Amazon, Digg, Netflix,
      Dell, HP, Bank of America, Intel...
    ✦ NBC, CBS, BBC, Reuters, Newsweek,
      Boston Globe, and more
✦   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)
Upcoming
✦   New Logo
✦   and New Web Site
✦   jQuery 1.3
    ✦ New Selector Engine
jquery.com
docs.jquery.com - jquery.com/plugins
               More:
            ui.jquery.com
          visualjquery.com
        learningjquery.com
1 of 34

Recommended

jQuery (MeshU) by
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)jeresig
1.4K 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
jQuery (DrupalCamp Toronto) by
jQuery (DrupalCamp Toronto)jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)jeresig
1.5K views35 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
Processing and Processing.js by
Processing and Processing.jsProcessing and Processing.js
Processing and Processing.jsjeresig
2.7K views15 slides
JavaScript Libraries (@Media) by
JavaScript Libraries (@Media)JavaScript Libraries (@Media)
JavaScript Libraries (@Media)jeresig
2.6K views89 slides

More Related Content

What's hot

An in-depth look at jQuery UI by
An in-depth look at jQuery UIAn in-depth look at jQuery UI
An in-depth look at jQuery UIPaul Bakaus
1.7K views49 slides
Unobtrusive javascript with jQuery by
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQueryAngel Ruiz
1.1K views59 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
jQuery Features to Avoid by
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoiddmethvin
1.6K views46 slides
jQuery Essentials by
jQuery EssentialsjQuery Essentials
jQuery EssentialsBedis ElAchèche
2.8K views83 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)

An in-depth look at jQuery UI by Paul Bakaus
An in-depth look at jQuery UIAn in-depth look at jQuery UI
An in-depth look at jQuery UI
Paul Bakaus1.7K views
Unobtrusive javascript with jQuery by Angel Ruiz
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQuery
Angel Ruiz1.1K 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
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
jQuery Loves Developers - Oredev 2009 by Remy Sharp
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
Remy Sharp3.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
Prototype & jQuery by Remy Sharp
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
Remy Sharp37K 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
Yearning jQuery by Remy Sharp
Yearning jQueryYearning jQuery
Yearning jQuery
Remy Sharp16K views
jQuery('#knowledge').appendTo('#you'); by mikehostetler
jQuery('#knowledge').appendTo('#you');jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');
mikehostetler2.6K views
Shibuya.js Lightning Talks by jeresig
Shibuya.js Lightning TalksShibuya.js Lightning Talks
Shibuya.js Lightning Talks
jeresig1.5K 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
从YUI2到YUI3看前端的演变 by Kejun Zhang
从YUI2到YUI3看前端的演变从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变
Kejun Zhang2.2K views
Introduction to jQuery by manugoel2003
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
manugoel20032.2K 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

Viewers also liked

D3.js mindblow by
D3.js mindblowD3.js mindblow
D3.js mindblowAnton Katunin
8K views84 slides
HTML5 & CSS3 refresher for mobile apps by
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsIvano Malavolta
1.4K views113 slides
A Quick and Dirty D3.js Tutorial by
A Quick and Dirty D3.js TutorialA Quick and Dirty D3.js Tutorial
A Quick and Dirty D3.js TutorialYoung-Ho Kim
1.7K views131 slides
J query introduction by
J query introductionJ query introduction
J query introductionSMS_VietNam
302 views25 slides
Html interview-questions-and-answers by
Html interview-questions-and-answersHtml interview-questions-and-answers
Html interview-questions-and-answersMohitKumar1985
3.5K views22 slides
Interactive Data Visualization (with D3.js) by
Interactive Data Visualization (with D3.js)Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)Lynn Cherny
13.3K views35 slides

Viewers also liked(12)

HTML5 & CSS3 refresher for mobile apps by Ivano Malavolta
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
Ivano Malavolta1.4K views
A Quick and Dirty D3.js Tutorial by Young-Ho Kim
A Quick and Dirty D3.js TutorialA Quick and Dirty D3.js Tutorial
A Quick and Dirty D3.js Tutorial
Young-Ho Kim1.7K views
J query introduction by SMS_VietNam
J query introductionJ query introduction
J query introduction
SMS_VietNam302 views
Html interview-questions-and-answers by MohitKumar1985
Html interview-questions-and-answersHtml interview-questions-and-answers
Html interview-questions-and-answers
MohitKumar19853.5K views
Interactive Data Visualization (with D3.js) by Lynn Cherny
Interactive Data Visualization (with D3.js)Interactive Data Visualization (with D3.js)
Interactive Data Visualization (with D3.js)
Lynn Cherny13.3K views
Learn D3.js in 90 minutes by Jos Dirksen
Learn D3.js in 90 minutesLearn D3.js in 90 minutes
Learn D3.js in 90 minutes
Jos Dirksen3.8K views
Introduction to data visualisations with d3.js — Data Driven Documents by Michał Oniszczuk
Introduction to data visualisations with d3.js — Data Driven DocumentsIntroduction to data visualisations with d3.js — Data Driven Documents
Introduction to data visualisations with d3.js — Data Driven Documents
Michał Oniszczuk6.1K views
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event by Robert Nyman
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
Robert Nyman15.1K views
D3.jsと学ぶVisualization(可視化)の世界 by AdvancedTechNight
D3.jsと学ぶVisualization(可視化)の世界D3.jsと学ぶVisualization(可視化)の世界
D3.jsと学ぶVisualization(可視化)の世界
AdvancedTechNight9.9K views
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション by Yosuke Onoue
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーションAngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
Yosuke Onoue9.4K views
[朝陽科大] D3.js 資料視覺化入門 by Kuro Hsu
[朝陽科大] D3.js 資料視覺化入門 [朝陽科大] D3.js 資料視覺化入門
[朝陽科大] D3.js 資料視覺化入門
Kuro Hsu7K views

Similar to jQuery (BostonPHP)

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
JavaScript the Smart Way - Getting Started with jQuery by
JavaScript the Smart Way - Getting Started with jQueryJavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuerykatbailey
2.2K views17 slides
jQuery for Seaside by
jQuery for SeasidejQuery for Seaside
jQuery for SeasideLukas Renggli
1.8K views57 slides
jQuery Internals + Cool Stuff by
jQuery Internals + Cool StuffjQuery Internals + Cool Stuff
jQuery Internals + Cool Stuffjeresig
6.1K views37 slides
Introduction to jQuery (Ajax Exp 2006) by
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)jeresig
2.4K views26 slides
Learning jQuery @ MIT by
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MITjeresig
1.5K views31 slides

Similar to jQuery (BostonPHP)(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
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
jQuery Internals + Cool Stuff by jeresig
jQuery Internals + Cool StuffjQuery Internals + Cool Stuff
jQuery Internals + Cool Stuff
jeresig6.1K 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
Learning jQuery @ MIT by jeresig
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
jeresig1.5K 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
State of jQuery and Drupal by jeresig
State of jQuery and DrupalState of jQuery and Drupal
State of jQuery and Drupal
jeresig1.3K views
Learning jQuery in 30 minutes by Simon Willison
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison53.4K views
JQuery In Drupal by katbailey
JQuery In DrupalJQuery In Drupal
JQuery In Drupal
katbailey3.8K 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
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
Jquery presentation by Mevin Mohan
Jquery presentationJquery presentation
Jquery presentation
Mevin Mohan44 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
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
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
Building a JavaScript Library by jeresig
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
jeresig11.7K 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

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
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by
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...TrustArc
10 views29 slides
"Running students' code in isolation. The hard way", Yurii Holiuk by
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk Fwdays
11 views34 slides
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveNetwork Automation Forum
31 views35 slides
Scaling Knowledge Graph Architectures with AI by
Scaling Knowledge Graph Architectures with AIScaling Knowledge Graph Architectures with AI
Scaling Knowledge Graph Architectures with AIEnterprise Knowledge
30 views15 slides
Design Driven Network Assurance by
Design Driven Network AssuranceDesign Driven Network Assurance
Design Driven Network AssuranceNetwork Automation Forum
15 views42 slides

Recently uploaded(20)

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
"Running students' code in isolation. The hard way", Yurii Holiuk by Fwdays
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk
Fwdays11 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker37 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
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
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10248 views
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
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
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

jQuery (BostonPHP)

  • 1. jQuery BostonPHP - June 2008 John Resig (ejohn.org)
  • 2. What is jQuery? ✦ An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
  • 3. The Focus of jQuery Find Some Elements Do something with them { { $(“div”).addClass(“special”); jQuery Object
  • 4. Keep Clean ✦ jQuery can be rename ‘$’: var $jq = jQuery.noConflict(); $jq(“div”).hide(); ✦ jQuery can even rename ‘jQuery’ allowing multiple copies of jQuery to work side-by- side. ✦ var $a = jQuery.noConflict(true); // load other version of jQuery $a(“div”).hide(); // still works!
  • 5. Find Some Elements... ✦ Full CSS Selector 1-3 Support ✦ Better CSS Selector support than most browsers
  • 6. $(“div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 7. $(“#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 8. $(“div.contents p”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 9. $(“#body > div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 10. $(“div[class]”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 11. $(“div:has(div)”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  • 12. Do something with them ✦ DOM Manipulation (append, prepend, remove) ✦ Events (click, hover, toggle) ✦ Effects (hide, show, slideDown, fadeOut) ✦ AJAX (load, get, post)
  • 13. DOM Manipulation ✦ $(“a[target=_blank]”) .append(“ <img src=’new.png’/>”); ✦ $(“#body”).css({ border: “1px solid green”, height: “40px” });
  • 14. Events ✦ $(“form”).submit(function(){ if ( $(“input#name”).val() == “” ) { $(“span.help”).show(); return false; } }); ✦ $(“a#open”).click(function(){ $(“#menu”).show(); return false; });
  • 15. Animations ✦ $(“#menu”).slideDown(“slow”); ✦ Individual properties: $(“div”).animate({ fontSize: “2em”, width: “+=20%”, color: “green” // via plugin }); ✦ Callbacks: $(“div”).hide(500, function(){ // $(this) is an individual <div> element $(this).show(500); });
  • 16. Ajax ✦ $(“#body”).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>”); });
  • 17. Ajax (cont.) ✦ $(“#body”).load(“sample.html div > h1”); ✦ Before: <div id=”body”></div> ✦ After: <div id=”body”> <h1>Hello, world!</h1> </div>
  • 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 .children(“li”) // li .addClass(“open”) // li .end() // ul .find(“a”) .click(function(){ $(this).next().toggle(); return false; }) .end();
  • 20. HTML Selector ✦ $(“<li><a></a></li>”) .find(“a”) .attr(“href ”, “http://ejohn.org/”) .html(“John Resig”) .end() .appendTo(“ul”);
  • 21. liveQuery ✦ Makes jQuery work like CSS ✦ Works on all matches, forever ✦ Simple plugin ✦ $(“a.stop”).livequery(“click”, function(){ $(this).blur(); return false; });
  • 22. Why jQuery? ✦ Fully documented ✦ Great community ✦ Tons of plugins ✦ Small size (15kb) ✦ Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
  • 23. Accordion Menu http://jquery.com/files/apple/ http://jquery.com/files/apple/done.html
  • 24. Plugins ✦ Huge plugin ecosystem ✦ Managed by Plugin tracker - built with Drupal! http://plugins.jquery.com/ ✦ Hundreds in the tracker - even more on the web
  • 25. 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(); }); };
  • 26. Todo List http://jquery.com/files/todo/ http://jquery.com/files/todo/done.php
  • 27. jQuery UI ✦ A complete set of themed, cross-browser, user interface components. ✦ Drag, Drop, Sort, Select, Resize ✦ Accordion, Datepicker, Dialog, Slider, Tabs ✦ More info: http://docs.jquery.com/UI ✦ 1.5 is in beta right now: http://jquery.com/blog/2008/02/12/jquery-ui-15b-new-api-more-features-huge-performance-boost/
  • 28. Accessibility ✦ Keyboard Accessible ✦ Screenreader Accessible ✦ Grant from Mozilla Foundation to implement ARIA
  • 29. Support ✦ Liferay (Java CMS) hired Paul Bakaus, jQuery UI lead to work on it full time. ✦ More support on the way!
  • 30. Who uses jQuery? ✦ Projects: ✦ Wordpress, Drupal, CakePHP, Textpattern, Mozilla ✦ Companies: ✦ Google, IBM, Amazon, Digg, Netflix, Dell, HP, Bank of America, Intel... ✦ NBC, CBS, BBC, Reuters, Newsweek, Boston Globe, and more ✦ 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. Upcoming ✦ New Logo ✦ and New Web Site ✦ jQuery 1.3 ✦ New Selector Engine
  • 34. jquery.com docs.jquery.com - jquery.com/plugins More: ui.jquery.com visualjquery.com learningjquery.com