SlideShare a Scribd company logo
1 of 31
Download to read offline
jQuery: Nuts, Bolts and Bling
Doug Neiner
  doug@dougneiner.com

           dougneiner

             dcneiner

          Doug Neiner
My Family
Crystal
Ruby, Olivia, Cody

Not pictured:
Ditto the cat
Iamateam
                                     memberhere
Iamasenior
designerhere
Audience
This presentation was crafted specifically for delivery at the Front End Design
Conference in St. Petersburg, FL. The audience consisted of designers who have
never used jQuery through developers who use jQuery regularly.

The slide portion of this presentation has a lot of getting started information, as
well as some tricks you may or may not know. The live coding portion (available on
Github) contains some more advanced techniques.

If you have any questions after watching this presentation and looking at the code,
please let me know: doug@dougneiner.com (Be sure to reference this presentation
when emailing!)

                                                    D
                                                 AN
jQuery: Nuts, Bolts and Bling
Write working code
Ugly, working code always trumps pretty, broken code




                                  D
                               AN
basics

       D
    AN
Writing the name

     A. Jquery                                                                             C. jquery

     B. JQuery                                                                              D. jQuery
       *It’soktowriteitinallcapswhenthe
           restofthecontextisallcapsaswell.
                                                                                            D
                                                                                         AN
adding scripts
div	
  id=dan	
  I	
  am	
  Dan	
  /div                                              HTML
style
#dan	
  {	
  display:	
  none;	
  }
                                                           Youobviously
/style                                                  wouldn’tdothis
div	
  id=cherrie	
  I	
  am	
  Cherrie	
  /div
style
#cherrie	
  {	
  background:	
  red;	
  }
/style

                                                      D
                                                   AN
adding scripts
div	
  id=dan	
  I	
  am	
  Dan	
  /div                                             HTML
script
$(	
  #dan	
  ).hide();
/script
                                                          Sopleasedon’t
                                                                     dothis
div	
  id=cherrie	
  I	
  am	
  Cherrie	
  /div
script
$(	
  #cherrie	
  ).hide().fadeIn(	
  500	
  );
/script

                                                      D
                                                   AN
adding scripts
	
  	
  div	
  id=dan	
  I	
  am	
  Dan	
  /div
	
  	
  div	
  id=cherrie	
  I	
  am	
  Cherrie	
  /div
                                                                                                           HTML
	
  	
  script	
  src=//ajax.googleapis.com/ajax/                       Better,butnow
libs/jquery/1.6.2/jquery.min.js/script                              #danand#cherrie
	
  	
  script	
  src=js/site.js/script                          blinkonforasplit-
/body                                                                secondbeforehiding

$(	
  #dan	
  ).hide();
$(	
  #cherrie	
  ).hide().fadeIn(	
  500	
  );
                                                                                                                    JS
                                                                   D
                                                                AN
adding scripts
html	
  class=no-­‐js
head                                            NowthetwoelementsarehiddenbyCSS,                     HTML
	
  	
  	
  ...                                    butonlywhenweknowJSisworking
	
  	
  	
  script
	
  	
  	
  	
  	
  	
  document.documentElement.className	
  =	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  document.documentElement.className.replace(	
  no-­‐js,	
  js	
  );
	
  	
  	
  /script
	
  	
  	
  link	
  rel=stylesheet	
  href=css/layout.css	
  /                        IfyouareusingModernizr,it
                                                                                                                           alreadydoesthis,andyou
                                                                                                                              don'tneedthiscode


.js	
  #dan,	
  .js	
  #cherrie	
  {	
  display:	
  none;	
  }                                                                                                                 CSS
                                                                                                   D
                                                                                                AN
adding scripts
	
  	
  div	
  id=dan	
  I	
  am	
  Dan	
  /div
	
  	
  div	
  id=cherrie	
  I	
  am	
  Cherrie	
  /div
                                                                                                           HTML
	
  	
  script	
  src=//ajax.googleapis.com/ajax/                      Nowwecanremove
libs/jquery/1.6.2/jquery.min.js/script                                     thetwo.hide()
	
  	
  script	
  src=js/site.js/script                           statementsandjust
/body                                                                runfadeInon#cherrie

$(	
  #cherrie	
  ).fadeIn(	
  500	
  );                                                                         JS
                                                                   D
                                                                AN
Adding scripts
•   Use at least one external script file for your site, not tons of in-page script
    blocks spread throughout your app.

•   Include references to jQuery and your script just before the closing body tag

    •   Primarily on web sites (on JS-required apps inside head may be ok)

    •   Use no-js and js classes to provide styling until the script loads




                                                      D
                                                   AN
File layout
jQuery(	
  document	
  ).ready(	
  function	
  ()	
  {                                                     JS
	
  	
  jQuery(	
  div	
  ).each(	
  function	
  ()	
  {
	
  	
  	
  	
  jQuery(	
  this	
  ).hide();
	
  	
  });
                                                                             Too…⋯Much…⋯
                                                                               jQuery…⋯
	
  	
  jQuery.getJSON(	
  ...,	
  function	
  (	
  data	
  )	
  {
	
  	
  	
  	
  jQuery.each(	
  data,	
  function	
  ()	
  {	
  ...	
  });
	
  	
  });
});



                                                                D
                                                             AN
File layout
(function	
  (	
  $	
  )	
  {                                           JS
var	
  sample	
  =	
  {	
  sample:	
  true	
  };
//	
  DOM	
  may	
  not	
  be	
  complete

$(	
  document	
  ).ready(	
  function	
  ()	
  {
	
  	
  //	
  DOM	
  is	
  ready.	
  Come	
  and	
  get	
  it!
});

}(	
  jQuery	
  ));

                                                                    D
                                                                 AN
File layout
(function	
  (	
  $	
  )	
  {                                                                                         JS
var	
  sample	
  =	
  {	
  sample:	
  true	
  };
//	
  DOM	
  may	
  not	
  be	
  complete                                 Thisiscalledan
                                                                            Immediately
                                                                         InvokingFunction
$(	
  document	
  ).ready(	
  function	
  ()	
  {                       ExpressionorIIFE.
	
  	
  //	
  DOM	
  is	
  ready.	
  Come	
  and	
  get	
  it!
});

}(	
  jQuery	
  ));

                                                                    D
                                                                 AN
File layout (Alt)
jQuery(	
  document	
  ).ready(	
  function	
  (	
  $	
  )	
  {                                                                    JS
	
  	
  //	
  DOM	
  is	
  ready.	
  Come	
  and	
  get	
  it!
});
                                             Youcansupplyaparameterforthe
                                             anonymousfunctioncallback,andit
                                                          willreferencejQuery.
                                            Usethisasashortcutwhenallyour
                                             codemustrunondocument.ready.

                                                                  D
                                                               AN
CONCEPTS

        D
     AN
Iteration
//	
  Explicit,	
  you	
  realize	
  this	
  is	
  looping	
  over	
  items        JS
$(	
  div	
  ).each(function	
  ()	
  {	
  ...	
  });

//	
  Implicit,	
  you	
  may	
  not	
  realize	
  each	
  call	
  is	
  looping
$(	
  div	
  )
	
  	
  .attr(	
  data-­‐group,	
  doug	
  )
	
  	
  .addClass(	
  dougsGroup	
  )
	
  	
  .hide();



                                                          D
                                                       AN
CSS vs. Class
$(	
  div	
  ).css({                                                                                             JS
	
  	
  	
  width:	
  20,                               Use.css()whenthe
	
  	
  	
  height:	
  500                            valuesmustbedynamic
});
                                                   Useclasseswhenyouknow
//	
  Or:                                           thevaluesaheadoftime.
$(	
  div	
  ).addClass(	
  tall	
  );


.tall	
  {	
  width:	
  20px;	
  height:	
  500px;	
  }                                                            CSS
                                                           D
                                                        AN
Toggle Methods
var	
  div	
  =	
  $(	
  div	
  );                      JS
if	
  (	
  div.hasClass(	
  frontendrocks	
  )	
  {
	
  	
  div.addClass(	
  frontendrocks	
  );
}	
  else	
  {
	
  	
  div.removeClass(	
  frontendrocks	
  );
}

//	
  A	
  better	
  way	
  to	
  write	
  it
div.toggleClass(	
  frontendrocks	
  );

                                                      D
                                                   AN
Toggle Methods
//	
  If	
  you	
  need	
  it	
  to	
  match	
  up	
  to	
  a	
  variable               JS
var	
  something	
  =	
  true,	
  div	
  =	
  $(	
  div	
  );

//	
  This	
  forces	
  the	
  class	
  on	
  or	
  off	
  based	
  on	
  `something`
div.toggleClass(	
  frontendrocks,	
  something	
  );

//	
  Other	
  methods	
  support	
  this	
  too,	
  check	
  the	
  API
div.slideToggle(	
  200,	
  something	
  );
div.toggle(	
  something	
  );

                                                                 D
                                                              AN
updating values
var	
  div	
  =	
  $(	
  div	
  );
//	
  Setting	
  a	
  single	
  key/value
div.attr(	
  key,	
  value	
  );

//	
  Setting	
  more	
  than	
  one	
  key/value	
  at	
  once
div.attr(	
  {	
  key:	
  	
  value,	
  key2:	
  value2	
  });

//	
  Setting	
  the	
  value	
  using	
  a	
  callback	
  function
div.attr(	
  key	
  ,	
  function	
  (i,	
  oldValue	
  )	
  {
	
  	
  return	
  newvalue;
});

                                                                    D
                                                                 AN
updating values
//	
  Other	
  methods	
  support	
  it	
  too,	
  check	
  the	
  API
div.addClass(	
  function	
  (i,	
  val)	
  {

	
  	
  //	
  This	
  returns	
  an	
  incremental	
  class	
  to	
  add	
  for	
  each
	
  	
  //	
  item	
  in	
  the	
  result	
  set
	
  	
  return	
  awesome-­‐	
  +	
  i;
});




                                                                  D
                                                               AN
Asynchronous code
var	
  loaded	
  =	
  false;

$.get(	
  http://url.com,	
  function	
  (	
  data	
  )	
  {
	
  	
  	
  loaded	
  =	
  true;
});                                                 Thismethodwillrunat
                                                                          somepointinthefuture
if	
  (	
  loaded	
  ===	
  true	
  )	
  {
                                                              Thisrunsrightaway,and
	
  	
  //	
  Never	
  runs                                    willexecutebeforethe
}                                                              callbackfor$.getfires.
                                                                      D
                                                                   AN
Asynchronous code
var	
  loaded	
  =	
  false;

$.get(	
  http://url.com,	
  function	
  (	
  data	
  )	
  {
	
  	
  	
  loaded	
  =	
  data.loaded;
	
  	
  	
  if	
  (	
  loaded	
  ===	
  true	
  )	
  {
	
  	
  	
  	
  	
  //	
  This	
  runs	
  when	
  loaded	
  is	
  true
	
  	
  	
  }                                                           Putlogicthatdependson
});                                                                    asynchronouscodeeitherin
                                                                             thecallbackorinafunction
                                                                            youexecutefromthecallback
                                                                                D
                                                                             AN
Lets Code!
          Code is available here:
https://github.com/dcneiner/jquery-bling



                             D
                          AN
Links
•   jQuery Tmpl
    https://github.com/jquery/jquery-tmpl

•   jQuery MockJax
    http://code.appendto.com/plugins/jquery-mockjax

•   jQuery doTimeout
    http://benalman.com/projects/jquery-dotimeout-plugin/

•   Alternate jQuery API
    http://jqapi.com/

                                                  D
                                               AN
Doug Neiner
  doug@dougneiner.com

           dougneiner

             dcneiner

          Doug Neiner

More Related Content

What's hot

jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoiddmethvin
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009Remy Sharp
 
OOCSS for JavaScript Pirates jQcon Boston
OOCSS for JavaScript Pirates jQcon BostonOOCSS for JavaScript Pirates jQcon Boston
OOCSS for JavaScript Pirates jQcon BostonJohn Hann
 
Stack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for DevelopersStack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for DevelopersJonathan Sharp
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery EssentialsMark Rackley
 
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)jeresig
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery PresentationRod Johnson
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQueryZeeshan Khan
 
A Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETA Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETJames Johnson
 
A Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETA Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETJames Johnson
 

What's hot (20)

jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoid
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
Jquery
JqueryJquery
Jquery
 
OOCSS for JavaScript Pirates jQcon Boston
OOCSS for JavaScript Pirates jQcon BostonOOCSS for JavaScript Pirates jQcon Boston
OOCSS for JavaScript Pirates jQcon Boston
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
 
jQuery
jQueryjQuery
jQuery
 
Stack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for DevelopersStack Overflow Austin - jQuery for Developers
Stack Overflow Austin - jQuery for Developers
 
Jquery ui
Jquery uiJquery ui
Jquery ui
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
 
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
 
jQuery
jQueryjQuery
jQuery
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
A Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETA Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NET
 
The jQuery Library
The  jQuery LibraryThe  jQuery Library
The jQuery Library
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
A Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETA Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NET
 
jQuery
jQueryjQuery
jQuery
 

Viewers also liked

Linked In Features Technical
Linked In Features TechnicalLinked In Features Technical
Linked In Features Technicalchomas kandar
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for youSimon Willison
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?Simon Willison
 
Web App Security Horror Stories
Web App Security Horror StoriesWeb App Security Horror Stories
Web App Security Horror StoriesSimon Willison
 
Rediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The LibrariesRediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The LibrariesSimon Willison
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureSimon Willison
 
When Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentalsWhen Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentalsSimon Willison
 
DOM ( Document Object Model )
DOM ( Document Object Model )DOM ( Document Object Model )
DOM ( Document Object Model )ITSTB
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Modelchomas kandar
 
Introduction to Browser Internals
Introduction to Browser InternalsIntroduction to Browser Internals
Introduction to Browser InternalsSiva Arunachalam
 
Introduction to Browser DOM
Introduction to Browser DOMIntroduction to Browser DOM
Introduction to Browser DOMSiva Arunachalam
 
Simplify AJAX using jQuery
Simplify AJAX using jQuerySimplify AJAX using jQuery
Simplify AJAX using jQuerySiva Arunachalam
 
Introduction to EDI(Electronic Data Interchange)
Introduction to EDI(Electronic Data Interchange)Introduction to EDI(Electronic Data Interchange)
Introduction to EDI(Electronic Data Interchange)Siva Arunachalam
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutesSimon Willison
 
Unobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQueryUnobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQuerySimon Willison
 

Viewers also liked (19)

Linked In Features Technical
Linked In Features TechnicalLinked In Features Technical
Linked In Features Technical
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?
 
Web App Security Horror Stories
Web App Security Horror StoriesWeb App Security Horror Stories
Web App Security Horror Stories
 
Rediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The LibrariesRediscovering JavaScript: The Language Behind The Libraries
Rediscovering JavaScript: The Language Behind The Libraries
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
jQuery for web development
jQuery for web developmentjQuery for web development
jQuery for web development
 
When Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentalsWhen Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentals
 
DOM ( Document Object Model )
DOM ( Document Object Model )DOM ( Document Object Model )
DOM ( Document Object Model )
 
How Lanyrd does Geo
How Lanyrd does GeoHow Lanyrd does Geo
How Lanyrd does Geo
 
Javascript and DOM
Javascript and DOMJavascript and DOM
Javascript and DOM
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Introduction to Browser Internals
Introduction to Browser InternalsIntroduction to Browser Internals
Introduction to Browser Internals
 
Introduction to Browser DOM
Introduction to Browser DOMIntroduction to Browser DOM
Introduction to Browser DOM
 
Simplify AJAX using jQuery
Simplify AJAX using jQuerySimplify AJAX using jQuery
Simplify AJAX using jQuery
 
Introduction to EDI(Electronic Data Interchange)
Introduction to EDI(Electronic Data Interchange)Introduction to EDI(Electronic Data Interchange)
Introduction to EDI(Electronic Data Interchange)
 
jQuery and Ajax
jQuery and AjaxjQuery and Ajax
jQuery and Ajax
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
Unobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQueryUnobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQuery
 

Similar to jQuery: Nuts, Bolts and Bling

J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012ghnash
 
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)David Giard
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentationMevin Mohan
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQueryRemy Sharp
 
jQuery (MeshU)
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)jeresig
 
jQuery Has Coding Standards
jQuery Has Coding StandardsjQuery Has Coding Standards
jQuery Has Coding StandardsRJ Bruneel
 
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQueryJavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuerykatbailey
 
Guia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceGuia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceLeonardo Balter
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptGuy Royse
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScriptbensmithett
 
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 JavascriptjQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 JavascriptDarren Mothersele
 
Game jump: frontend introduction #1
Game jump: frontend introduction #1Game jump: frontend introduction #1
Game jump: frontend introduction #1Sebastian Pożoga
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)jeresig
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVCAlive Kuo
 

Similar to jQuery: Nuts, Bolts and Bling (20)

Jquery
JqueryJquery
Jquery
 
J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012
 
bcgr3-jquery
bcgr3-jquerybcgr3-jquery
bcgr3-jquery
 
bcgr3-jquery
bcgr3-jquerybcgr3-jquery
bcgr3-jquery
 
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentation
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
jQuery (MeshU)
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)
 
jQuery Has Coding Standards
jQuery Has Coding StandardsjQuery Has Coding Standards
jQuery Has Coding Standards
 
jquery.ppt
jquery.pptjquery.ppt
jquery.ppt
 
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQueryJavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
 
Guia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceGuia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open Source
 
Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News Packages
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
 
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 JavascriptjQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
 
Game jump: frontend introduction #1
Game jump: frontend introduction #1Game jump: frontend introduction #1
Game jump: frontend introduction #1
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 

Recently uploaded

Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
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
 
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
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
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
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
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
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 

Recently uploaded (20)

Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
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
 
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
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
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.
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
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
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 

jQuery: Nuts, Bolts and Bling

  • 2. Doug Neiner doug@dougneiner.com dougneiner dcneiner Doug Neiner
  • 3. My Family Crystal Ruby, Olivia, Cody Not pictured: Ditto the cat
  • 4. Iamateam memberhere Iamasenior designerhere
  • 5. Audience This presentation was crafted specifically for delivery at the Front End Design Conference in St. Petersburg, FL. The audience consisted of designers who have never used jQuery through developers who use jQuery regularly. The slide portion of this presentation has a lot of getting started information, as well as some tricks you may or may not know. The live coding portion (available on Github) contains some more advanced techniques. If you have any questions after watching this presentation and looking at the code, please let me know: doug@dougneiner.com (Be sure to reference this presentation when emailing!) D AN
  • 7. Write working code Ugly, working code always trumps pretty, broken code D AN
  • 8. basics D AN
  • 9. Writing the name A. Jquery C. jquery B. JQuery D. jQuery *It’soktowriteitinallcapswhenthe restofthecontextisallcapsaswell. D AN
  • 10. adding scripts div  id=dan  I  am  Dan  /div HTML style #dan  {  display:  none;  } Youobviously /style wouldn’tdothis div  id=cherrie  I  am  Cherrie  /div style #cherrie  {  background:  red;  } /style D AN
  • 11. adding scripts div  id=dan  I  am  Dan  /div HTML script $(  #dan  ).hide(); /script Sopleasedon’t dothis div  id=cherrie  I  am  Cherrie  /div script $(  #cherrie  ).hide().fadeIn(  500  ); /script D AN
  • 12. adding scripts    div  id=dan  I  am  Dan  /div    div  id=cherrie  I  am  Cherrie  /div HTML    script  src=//ajax.googleapis.com/ajax/ Better,butnow libs/jquery/1.6.2/jquery.min.js/script #danand#cherrie    script  src=js/site.js/script blinkonforasplit- /body secondbeforehiding $(  #dan  ).hide(); $(  #cherrie  ).hide().fadeIn(  500  ); JS D AN
  • 13. adding scripts html  class=no-­‐js head NowthetwoelementsarehiddenbyCSS, HTML      ... butonlywhenweknowJSisworking      script            document.documentElement.className  =                    document.documentElement.className.replace(  no-­‐js,  js  );      /script      link  rel=stylesheet  href=css/layout.css  / IfyouareusingModernizr,it alreadydoesthis,andyou don'tneedthiscode .js  #dan,  .js  #cherrie  {  display:  none;  } CSS D AN
  • 14. adding scripts    div  id=dan  I  am  Dan  /div    div  id=cherrie  I  am  Cherrie  /div HTML    script  src=//ajax.googleapis.com/ajax/ Nowwecanremove libs/jquery/1.6.2/jquery.min.js/script thetwo.hide()    script  src=js/site.js/script statementsandjust /body runfadeInon#cherrie $(  #cherrie  ).fadeIn(  500  ); JS D AN
  • 15. Adding scripts • Use at least one external script file for your site, not tons of in-page script blocks spread throughout your app. • Include references to jQuery and your script just before the closing body tag • Primarily on web sites (on JS-required apps inside head may be ok) • Use no-js and js classes to provide styling until the script loads D AN
  • 16. File layout jQuery(  document  ).ready(  function  ()  { JS    jQuery(  div  ).each(  function  ()  {        jQuery(  this  ).hide();    }); Too…⋯Much…⋯ jQuery…⋯    jQuery.getJSON(  ...,  function  (  data  )  {        jQuery.each(  data,  function  ()  {  ...  });    }); }); D AN
  • 17. File layout (function  (  $  )  { JS var  sample  =  {  sample:  true  }; //  DOM  may  not  be  complete $(  document  ).ready(  function  ()  {    //  DOM  is  ready.  Come  and  get  it! }); }(  jQuery  )); D AN
  • 18. File layout (function  (  $  )  { JS var  sample  =  {  sample:  true  }; //  DOM  may  not  be  complete Thisiscalledan Immediately InvokingFunction $(  document  ).ready(  function  ()  { ExpressionorIIFE.    //  DOM  is  ready.  Come  and  get  it! }); }(  jQuery  )); D AN
  • 19. File layout (Alt) jQuery(  document  ).ready(  function  (  $  )  { JS    //  DOM  is  ready.  Come  and  get  it! }); Youcansupplyaparameterforthe anonymousfunctioncallback,andit willreferencejQuery. Usethisasashortcutwhenallyour codemustrunondocument.ready. D AN
  • 20. CONCEPTS D AN
  • 21. Iteration //  Explicit,  you  realize  this  is  looping  over  items JS $(  div  ).each(function  ()  {  ...  }); //  Implicit,  you  may  not  realize  each  call  is  looping $(  div  )    .attr(  data-­‐group,  doug  )    .addClass(  dougsGroup  )    .hide(); D AN
  • 22. CSS vs. Class $(  div  ).css({ JS      width:  20, Use.css()whenthe      height:  500 valuesmustbedynamic }); Useclasseswhenyouknow //  Or: thevaluesaheadoftime. $(  div  ).addClass(  tall  ); .tall  {  width:  20px;  height:  500px;  } CSS D AN
  • 23. Toggle Methods var  div  =  $(  div  ); JS if  (  div.hasClass(  frontendrocks  )  {    div.addClass(  frontendrocks  ); }  else  {    div.removeClass(  frontendrocks  ); } //  A  better  way  to  write  it div.toggleClass(  frontendrocks  ); D AN
  • 24. Toggle Methods //  If  you  need  it  to  match  up  to  a  variable JS var  something  =  true,  div  =  $(  div  ); //  This  forces  the  class  on  or  off  based  on  `something` div.toggleClass(  frontendrocks,  something  ); //  Other  methods  support  this  too,  check  the  API div.slideToggle(  200,  something  ); div.toggle(  something  ); D AN
  • 25. updating values var  div  =  $(  div  ); //  Setting  a  single  key/value div.attr(  key,  value  ); //  Setting  more  than  one  key/value  at  once div.attr(  {  key:    value,  key2:  value2  }); //  Setting  the  value  using  a  callback  function div.attr(  key  ,  function  (i,  oldValue  )  {    return  newvalue; }); D AN
  • 26. updating values //  Other  methods  support  it  too,  check  the  API div.addClass(  function  (i,  val)  {    //  This  returns  an  incremental  class  to  add  for  each    //  item  in  the  result  set    return  awesome-­‐  +  i; }); D AN
  • 27. Asynchronous code var  loaded  =  false; $.get(  http://url.com,  function  (  data  )  {      loaded  =  true; }); Thismethodwillrunat somepointinthefuture if  (  loaded  ===  true  )  { Thisrunsrightaway,and    //  Never  runs willexecutebeforethe } callbackfor$.getfires. D AN
  • 28. Asynchronous code var  loaded  =  false; $.get(  http://url.com,  function  (  data  )  {      loaded  =  data.loaded;      if  (  loaded  ===  true  )  {          //  This  runs  when  loaded  is  true      } Putlogicthatdependson }); asynchronouscodeeitherin thecallbackorinafunction youexecutefromthecallback D AN
  • 29. Lets Code! Code is available here: https://github.com/dcneiner/jquery-bling D AN
  • 30. Links • jQuery Tmpl https://github.com/jquery/jquery-tmpl • jQuery MockJax http://code.appendto.com/plugins/jquery-mockjax • jQuery doTimeout http://benalman.com/projects/jquery-dotimeout-plugin/ • Alternate jQuery API http://jqapi.com/ D AN
  • 31. Doug Neiner doug@dougneiner.com dougneiner dcneiner Doug Neiner