SlideShare a Scribd company logo
1 of 12
Download to read offline
Get going with
          George.Adamson@SoftwareUnity.com
          www.SoftwareUnity.com UX, UI, IA, Usabiity, Accessibility, jQuery, JS, CSS, AJAX




                      jQuery simplifies how we manipulate DOM
                      elements, handle events, ajax and animations
Friday, 22 May 2009
Find stuff... then do something with it

               $(“DIV”).fadeOut(“slow”)


                                                    “jQuery changes the way
                                                       we write JavaScript”




Friday, 22 May 2009
the old way...
                      <body onload=”do stuff”>

          the new way...
                      $(function(){
                          do stuff
                      })


          Shorthand for:
                      jQuery(document).ready(function(){
                          do stuff
                      });

          You can still do $(document.body).load(function(){ do stuff });
          Or $(document.body).bind(“load”, function(){ do stuff });
Friday, 22 May 2009
Find stuff...

         $(“#invoiceTable TR:odd”)

         $(“DIV.searchBar :checkbox”)

         $(“IMG[src $= ‘.png’]”)                              DIV>UL
                                                    [attr*=value] [attr]
         $(“LI:nth-child(2)”)
                                                     .class :nth-child(n)
                                                      :first :nth(n)
                                                      :not(selector)
       No more getElementById() or document.all[]
                  or document.layers[]
                                                    :hidden :radio
           and a bunch of for loops and if              :has(selector)
                                                     :disabled :checked
              statements for good measure
Friday, 22 May 2009
Find stuff... then do something with it

              $(“#invoiceTable TR:odd”)
                .addClass(“rowStripe”)

              $(“DIV.searchBar :checkbox”)
                .removeAttr(“checked”)
                                             .toggleClass()   .text()
              $(“IMG[src $= ‘.png’]”)
                .slideDown(“fast”)               .attr()     .filter()
                                                .val() .css()
              $(“LI:nth-child(2)”)                .siblings()
                .css({ color:”#000”,          .prev() .find()
                       left:”50%” })               .appendTo()
                                               :remove() :wrap()
Friday, 22 May 2009
Chaining...
                      $(“TABLE TR.answers”)
                        .hide()
                        .prevAll()
                        .filter(“:odd”)
                        .addClass(“oddRow”)




Friday, 22 May 2009
Traversing and filtering...
     $(“INPUT:checked”)
       .parents(“DIV.content”)
       .find(“.results :button”)
       .trigger(“focus”)




Friday, 22 May 2009
Events...

 $(“A”)
   .click(function(){
     do stuff
     return false;
   });

 $(“INPUT:text”)
     .bind(“keydown”, function(e){
        alert(e.keyCode);
     });                                              .bind(“click”,fn)
                                                       .ready(fn)
                                                                   .one(fn)
                                                   .trigger(type)
         No more         Encourages Unobtrusive
  addEventListener()    JavaScript and Progressive       .unbind(type,fn)
  or attachEvent() etc.     Enhancement (PE)
                                                     .live(fn) .hover(fn,fn)
Friday, 22 May 2009
Effects...

       $(“A”)
         .click(function(){
           $(this).fadeOut(“fast”);
           return false;
         });

       $(“LI:gt(3)”)
         .animate({                   .slideDown() .hide()
           width: quot;70%quot;,               .toggle() .animate()
           opacity: 0.4,
                                       .show() .fadeIn()
           marginLeft: quot;0.6inquot;,
           fontSize: quot;3emquot;,               .slideToggle()
           borderWidth: quot;10pxquot;          .stop() .fadeTo()
       }, 2000);
Friday, 22 May 2009
AJAX...
        $(quot;#twitterquot;)
          .load(quot;myTweets.aspxquot;);


        $.getJSON(tweetUrl, function(data){
          $.each(data, function(i, item){
            $(quot;<p/>quot;)
                .html(item.text)
                .prependTo(quot;#tweetquot;);
          });
        });
                                              .getJSON() .load()
                                                       :nth(n)
                                              .post() .getScript()
        With the jQuery forms plugin:
                                               .get()
        $(quot;#myFormquot;).ajaxForm(function(){
          alert(quot;Form submitted!quot;);              .serialize()
        });                                       ajax events
Friday, 22 May 2009
Write a plugin...
            $.fn.myPlugin = function(options){
              do stuff
            }

         Call it...
            $(“DIV.special”).myPlugin()




                                    No more browser sniffing
                                  (well, not so much, anyway)

Friday, 22 May 2009
http://docs.jquery.com

          http://ui.jquery.com

          http://www.learningjquery.com



                                    George.Adamson@SoftwareUnity.com
                      www.SoftwareUnity.com UX, UI, IA, Usabiity, Accessibility, jQuery, JS, CSS, AJAX




                 Special offer for DDD South West attendees:
        £350 off trips booked with Steppes Travel in June ‘09

Friday, 22 May 2009

More Related Content

Recently uploaded

الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهMohamed Sweelam
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfdanishmna97
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)Samir Dash
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....rightmanforbloodline
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityVictorSzoltysek
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaWSO2
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard37
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptxFIDO Alliance
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 

Recently uploaded (20)

الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهله
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Get going with jQuery (by George Adamson at DDD South West)

  • 1. Get going with George.Adamson@SoftwareUnity.com www.SoftwareUnity.com UX, UI, IA, Usabiity, Accessibility, jQuery, JS, CSS, AJAX jQuery simplifies how we manipulate DOM elements, handle events, ajax and animations Friday, 22 May 2009
  • 2. Find stuff... then do something with it $(“DIV”).fadeOut(“slow”) “jQuery changes the way we write JavaScript” Friday, 22 May 2009
  • 3. the old way... <body onload=”do stuff”> the new way... $(function(){ do stuff }) Shorthand for: jQuery(document).ready(function(){ do stuff }); You can still do $(document.body).load(function(){ do stuff }); Or $(document.body).bind(“load”, function(){ do stuff }); Friday, 22 May 2009
  • 4. Find stuff... $(“#invoiceTable TR:odd”) $(“DIV.searchBar :checkbox”) $(“IMG[src $= ‘.png’]”) DIV>UL [attr*=value] [attr] $(“LI:nth-child(2)”) .class :nth-child(n) :first :nth(n) :not(selector) No more getElementById() or document.all[] or document.layers[] :hidden :radio and a bunch of for loops and if :has(selector) :disabled :checked statements for good measure Friday, 22 May 2009
  • 5. Find stuff... then do something with it $(“#invoiceTable TR:odd”) .addClass(“rowStripe”) $(“DIV.searchBar :checkbox”) .removeAttr(“checked”) .toggleClass() .text() $(“IMG[src $= ‘.png’]”) .slideDown(“fast”) .attr() .filter() .val() .css() $(“LI:nth-child(2)”) .siblings() .css({ color:”#000”, .prev() .find() left:”50%” }) .appendTo() :remove() :wrap() Friday, 22 May 2009
  • 6. Chaining... $(“TABLE TR.answers”) .hide() .prevAll() .filter(“:odd”) .addClass(“oddRow”) Friday, 22 May 2009
  • 7. Traversing and filtering... $(“INPUT:checked”) .parents(“DIV.content”) .find(“.results :button”) .trigger(“focus”) Friday, 22 May 2009
  • 8. Events... $(“A”) .click(function(){ do stuff return false; }); $(“INPUT:text”) .bind(“keydown”, function(e){ alert(e.keyCode); }); .bind(“click”,fn) .ready(fn) .one(fn) .trigger(type) No more Encourages Unobtrusive addEventListener() JavaScript and Progressive .unbind(type,fn) or attachEvent() etc. Enhancement (PE) .live(fn) .hover(fn,fn) Friday, 22 May 2009
  • 9. Effects... $(“A”) .click(function(){ $(this).fadeOut(“fast”); return false; }); $(“LI:gt(3)”) .animate({ .slideDown() .hide() width: quot;70%quot;, .toggle() .animate() opacity: 0.4, .show() .fadeIn() marginLeft: quot;0.6inquot;, fontSize: quot;3emquot;, .slideToggle() borderWidth: quot;10pxquot; .stop() .fadeTo() }, 2000); Friday, 22 May 2009
  • 10. AJAX... $(quot;#twitterquot;) .load(quot;myTweets.aspxquot;); $.getJSON(tweetUrl, function(data){ $.each(data, function(i, item){ $(quot;<p/>quot;) .html(item.text) .prependTo(quot;#tweetquot;); }); }); .getJSON() .load() :nth(n) .post() .getScript() With the jQuery forms plugin: .get() $(quot;#myFormquot;).ajaxForm(function(){ alert(quot;Form submitted!quot;); .serialize() }); ajax events Friday, 22 May 2009
  • 11. Write a plugin... $.fn.myPlugin = function(options){ do stuff } Call it... $(“DIV.special”).myPlugin() No more browser sniffing (well, not so much, anyway) Friday, 22 May 2009
  • 12. http://docs.jquery.com http://ui.jquery.com http://www.learningjquery.com George.Adamson@SoftwareUnity.com www.SoftwareUnity.com UX, UI, IA, Usabiity, Accessibility, jQuery, JS, CSS, AJAX Special offer for DDD South West attendees: £350 off trips booked with Steppes Travel in June ‘09 Friday, 22 May 2009