Uploaded on

Understand what the jQuery library is and the benefits it has for Web development. …

Understand what the jQuery library is and the benefits it has for Web development.

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
460
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • \n
  • \n
  • \n
  • DEMO: all of jQuery Selector Test Page section\n
  • DEMO: all of jQuery Selector Test Page section\n
  • DEMO: all of jQuery Selector Test Page section\n
  • DEMO: all of jQuery Selector Test Page section\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO: rest of section, Selecting by id and class Attributes, More Complex Selectors, Attribute Selectors, \n
  • DEMO: rest of section, Selecting by id and class Attributes, More Complex Selectors, Attribute Selectors, \n
  • DEMO: rest of section, Selecting by id and class Attributes, More Complex Selectors, Attribute Selectors, \n
  • DEMO: rest of section, Selector Context\n
  • DEMO: rest of section, Selector Context\n
  • DEMO: rest of section, Basic Filters, Form Filters\n
  • DEMO: rest of section, Basic Filters, Form Filters\n
  • DEMO: rest of section, Basic Filters, Form Filters\n
  • DEMO: rest of section, Basic Filters, Form Filters\n
  • DEMO: rest of section, Basic Filters, Form Filters\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO: rest of section\n

Transcript

  • 1. The jQuery Library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 2. Objectives Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 3. Objectives• Understand what the jQuery library is and the benefits it has for Web development Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 4. Objectives• Understand what the jQuery library is and the benefits it has for Web development• Learn how to use jQuery and understand how it works Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 5. Objectives• Understand what the jQuery library is and the benefits it has for Web development• Learn how to use jQuery and understand how it works• See how to use selectors to create wrapped sets that methods can take action on Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 6. Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 7. Agenda• jQuery for the ASP.NET Developer Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 8. Agenda• jQuery for the ASP.NET Developer• Using jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 9. Agenda• jQuery for the ASP.NET Developer• Using jQuery• Selectors, Wrapped Sets, and Chains Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 10. jQuery for the ASP.NET Developer Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 11. jQuery for the ASP.NET Developer • JavaScript had long been a second class citizen of Web development Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 12. jQuery for the ASP.NET Developer • JavaScript had long been a second class citizen of Web development  But is a common automation feature in browsers Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 13. jQuery for the ASP.NET Developer • JavaScript had long been a second class citizen of Web development  But is a common automation feature in browsers  Lacks strong types Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 14. jQuery for the ASP.NET Developer • JavaScript had long been a second class citizen of Web development  But is a common automation feature in browsers  Lacks strong types  Interpreted, when that wasn’t cool Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 15. jQuery for the ASP.NET Developer • JavaScript had long been a second class citizen of Web development  But is a common automation feature in browsers  Lacks strong types  Interpreted, when that wasn’t cool  Hard to debug with poor tools Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 16. jQuery for the ASP.NET Developer • JavaScript had long been a second class citizen of Web development  But is a common automation feature in browsers  Lacks strong types  Interpreted, when that wasn’t cool  Hard to debug with poor tools  Never lived up to its Java namesake Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 17. jQuery for the ASP.NET Developer • JavaScript had long been a second class citizen of Web development  But is a common automation feature in browsers  Lacks strong types  Interpreted, when that wasn’t cool  Hard to debug with poor tools  Never lived up to its Java namesake  Stagnating Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 18. jQuery for the ASP.NET Developer • JavaScript had long been a second class citizen of Web development  But is a common automation feature in browsers  Lacks strong types  Interpreted, when that wasn’t cool  Hard to debug with poor tools  Never lived up to its Java namesake  Stagnating • But then Web 2.0 happened Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 19. jQuery for the ASP.NET Developer • JavaScript had long been a second class citizen of Web development  But is a common automation feature in browsers  Lacks strong types  Interpreted, when that wasn’t cool  Hard to debug with poor tools  Never lived up to its Java namesake  Stagnating • But then Web 2.0 happened  Requires a lot of JavaScript to implement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 20. jQuery for the ASP.NET Developer • JavaScript had long been a second class citizen of Web development  But is a common automation feature in browsers  Lacks strong types  Interpreted, when that wasn’t cool  Hard to debug with poor tools  Never lived up to its Java namesake  Stagnating • But then Web 2.0 happened  Requires a lot of JavaScript to implement  Programmer’s solution: build libraries! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 21. jQuery Dominates Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 22. jQuery Dominates• Simple, robust JavaScript library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 23. jQuery Dominates• Simple, robust JavaScript library  Relative newcomer, introduced in 2006 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 24. jQuery Dominates• Simple, robust JavaScript library  Relative newcomer, introduced in 2006• What is Microsoft’s story in this space? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 25. jQuery Dominates• Simple, robust JavaScript library  Relative newcomer, introduced in 2006• What is Microsoft’s story in this space?  After all, produces widely-used ASP.NET for Web Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 26. jQuery Dominates• Simple, robust JavaScript library  Relative newcomer, introduced in 2006• What is Microsoft’s story in this space?  After all, produces widely-used ASP.NET for Web  Now supports jQuery in favor of own library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 27. The Microsoft Ajax Library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 28. The Microsoft Ajax Library• Initially released to support Ajax for Web forms Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 29. The Microsoft Ajax Library• Initially released to support Ajax for Web forms• Robust, relatively lightweight, general-purpose JavaScript library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 30. The Microsoft Ajax Library• Initially released to support Ajax for Web forms• Robust, relatively lightweight, general-purpose JavaScript library• Pure JavaScript, so use anywhere Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 31. The Microsoft Ajax Library• Initially released to support Ajax for Web forms• Robust, relatively lightweight, general-purpose JavaScript library• Pure JavaScript, so use anywhere• Created it for ASP.NET developers Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 32. The Microsoft Ajax Library• Initially released to support Ajax for Web forms• Robust, relatively lightweight, general-purpose JavaScript library• Pure JavaScript, so use anywhere• Created it for ASP.NET developers  Feels and acts like the .NET Framework Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 33. The Microsoft Ajax Library• Initially released to support Ajax for Web forms• Robust, relatively lightweight, general-purpose JavaScript library• Pure JavaScript, so use anywhere• Created it for ASP.NET developers  Feels and acts like the .NET Framework  Similar to writing C# or VB code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 34. The Microsoft Ajax Library• Initially released to support Ajax for Web forms• Robust, relatively lightweight, general-purpose JavaScript library• Pure JavaScript, so use anywhere• Created it for ASP.NET developers  Feels and acts like the .NET Framework  Similar to writing C# or VB code  Adds an object-oriented nature to JavaScript code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 35. The Microsoft Ajax Library• Initially released to support Ajax for Web forms• Robust, relatively lightweight, general-purpose JavaScript library• Pure JavaScript, so use anywhere• Created it for ASP.NET developers  Feels and acts like the .NET Framework  Similar to writing C# or VB code  Adds an object-oriented nature to JavaScript code• Minimized version is only 98KB Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 36. The Microsoft Ajax Library• Initially released to support Ajax for Web forms• Robust, relatively lightweight, general-purpose JavaScript library• Pure JavaScript, so use anywhere• Created it for ASP.NET developers  Feels and acts like the .NET Framework  Similar to writing C# or VB code  Adds an object-oriented nature to JavaScript code• Minimized version is only 98KB  Debug version is 304KB, but isn’t for production Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 37. Ajax Library Components Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 38. Ajax Library Components• Three files: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 39. Ajax Library Components• Three files:  MicrosoftAjax.js Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 40. Ajax Library Components• Three files:  MicrosoftAjax.js  MicrosoftMvcAjax.js Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 41. Ajax Library Components• Three files:  MicrosoftAjax.js  MicrosoftMvcAjax.js  MicrosoftMvcValidation.js Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 42. Ajax Library Components• Three files:  MicrosoftAjax.js  MicrosoftMvcAjax.js  MicrosoftMvcValidation.js• Supports client-side controls in the Ajax Control Toolkit Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 43. Ajax Library Components• Three files:  MicrosoftAjax.js  MicrosoftMvcAjax.js  MicrosoftMvcValidation.js• Supports client-side controls in the Ajax Control Toolkit• Everything changed in late 2010 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 44. Ajax Library Components• Three files:  MicrosoftAjax.js  MicrosoftMvcAjax.js  MicrosoftMvcValidation.js• Supports client-side controls in the Ajax Control Toolkit• Everything changed in late 2010  Embracing jQuery in favor of Ajax Library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 45. Ajax Library Components• Three files:  MicrosoftAjax.js  MicrosoftMvcAjax.js  MicrosoftMvcValidation.js• Supports client-side controls in the Ajax Control Toolkit• Everything changed in late 2010  Embracing jQuery in favor of Ajax Library  Now available only as part of the Ajax Control Toolkit Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 46. Ajax Library Components• Three files:  MicrosoftAjax.js  MicrosoftMvcAjax.js  MicrosoftMvcValidation.js• Supports client-side controls in the Ajax Control Toolkit• Everything changed in late 2010  Embracing jQuery in favor of Ajax Library  Now available only as part of the Ajax Control Toolkit• The Age of jQuery has begun! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 47. The jQuery Library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 48. The jQuery Library• 3rd party, open source library by John Resig Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 49. The jQuery Library• 3rd party, open source library by John Resig• Core library is lightweight Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 50. The jQuery Library• 3rd party, open source library by John Resig• Core library is lightweight  Only 83KB in the minified version Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 51. The jQuery Library• 3rd party, open source library by John Resig• Core library is lightweight  Only 83KB in the minified version  Stays focused on core features Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 52. The jQuery Library• 3rd party, open source library by John Resig• Core library is lightweight  Only 83KB in the minified version  Stays focused on core features  Provides a rich plug-in model Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 53. The jQuery Library• 3rd party, open source library by John Resig• Core library is lightweight  Only 83KB in the minified version  Stays focused on core features  Provides a rich plug-in model  Non-essential features kept out of core Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 54. The jQuery Library• 3rd party, open source library by John Resig• Core library is lightweight  Only 83KB in the minified version  Stays focused on core features  Provides a rich plug-in model  Non-essential features kept out of core• In 2008, Microsoft announced it would include jQuery with MVC Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 55. The jQuery Library• 3rd party, open source library by John Resig• Core library is lightweight  Only 83KB in the minified version  Stays focused on core features  Provides a rich plug-in model  Non-essential features kept out of core• In 2008, Microsoft announced it would include jQuery with MVC  Going forward, would include with Visual Studio Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 56. The jQuery Library• 3rd party, open source library by John Resig• Core library is lightweight  Only 83KB in the minified version  Stays focused on core features  Provides a rich plug-in model  Non-essential features kept out of core• In 2008, Microsoft announced it would include jQuery with MVC  Going forward, would include with Visual Studio  Microsoft fully supports jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 57. The jQuery Library• 3rd party, open source library by John Resig• Core library is lightweight  Only 83KB in the minified version  Stays focused on core features  Provides a rich plug-in model  Non-essential features kept out of core• In 2008, Microsoft announced it would include jQuery with MVC  Going forward, would include with Visual Studio  Microsoft fully supports jQuery  MVC 2 and 3, and other project types, include jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 58. Benefits of jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 59. Benefits of jQuery• Makes using the DOM extremely easy Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 60. Benefits of jQuery• Makes using the DOM extremely easy• Benefits: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 61. Benefits of jQuery• Makes using the DOM extremely easy• Benefits:  Lean and mean Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 62. Benefits of jQuery• Makes using the DOM extremely easy• Benefits:  Lean and mean  Handles cross-browser issues Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 63. Benefits of jQuery• Makes using the DOM extremely easy• Benefits:  Lean and mean  Handles cross-browser issues  Simple, clean, powerful syntax Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 64. Benefits of jQuery• Makes using the DOM extremely easy• Benefits:  Lean and mean  Handles cross-browser issues  Simple, clean, powerful syntax  Highly extensible Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 65. Benefits of jQuery• Makes using the DOM extremely easy• Benefits:  Lean and mean  Handles cross-browser issues  Simple, clean, powerful syntax  Highly extensible  Supports unobtrusive JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 66. Benefits of jQuery• Makes using the DOM extremely easy• Benefits:  Lean and mean  Handles cross-browser issues  Simple, clean, powerful syntax  Highly extensible  Supports unobtrusive JavaScript  Includes many utility functions Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 67. Benefits of jQuery• Makes using the DOM extremely easy• Benefits:  Lean and mean  Handles cross-browser issues  Simple, clean, powerful syntax  Highly extensible  Supports unobtrusive JavaScript  Includes many utility functions  Widely used Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 68. Benefits of jQuery• Makes using the DOM extremely easy• Benefits:  Lean and mean  Handles cross-browser issues  Simple, clean, powerful syntax  Highly extensible  Supports unobtrusive JavaScript  Includes many utility functions  Widely used• Makes for a strong contender as a library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 69. Which Version? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 70. Which Version?• Course is based on jQuery version 1.5 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 71. Which Version?• Course is based on jQuery version 1.5  Good chance that new versions are available Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 72. Which Version?• Course is based on jQuery version 1.5  Good chance that new versions are available  Monthly minor releases (e.g., 1.5.1) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 73. Which Version?• Course is based on jQuery version 1.5  Good chance that new versions are available  Monthly minor releases (e.g., 1.5.1)  Annual major release (e.g., 1.5) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 74. Which Version?• Course is based on jQuery version 1.5  Good chance that new versions are available  Monthly minor releases (e.g., 1.5.1)  Annual major release (e.g., 1.5)• Visual Studio 2010 includes version 1.4.1 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 75. Which Version?• Course is based on jQuery version 1.5  Good chance that new versions are available  Monthly minor releases (e.g., 1.5.1)  Annual major release (e.g., 1.5)• Visual Studio 2010 includes version 1.4.1• Availability of vsdoc file lags jQuery release Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 76. Which Version?• Course is based on jQuery version 1.5  Good chance that new versions are available  Monthly minor releases (e.g., 1.5.1)  Annual major release (e.g., 1.5)• Visual Studio 2010 includes version 1.4.1• Availability of vsdoc file lags jQuery release• Damian Edwards’ vsdoc File Generator utility Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 77. Which Version?• Course is based on jQuery version 1.5  Good chance that new versions are available  Monthly minor releases (e.g., 1.5.1)  Annual major release (e.g., 1.5)• Visual Studio 2010 includes version 1.4.1• Availability of vsdoc file lags jQuery release• Damian Edwards’ vsdoc File Generator utility  Blog is at https://damianedwards.wordpress.com Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 78. Which Version?• Course is based on jQuery version 1.5  Good chance that new versions are available  Monthly minor releases (e.g., 1.5.1)  Annual major release (e.g., 1.5)• Visual Studio 2010 includes version 1.4.1• Availability of vsdoc file lags jQuery release• Damian Edwards’ vsdoc File Generator utility  Blog is at https://damianedwards.wordpress.com  Grab latest version there Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 79. Which Version?• Course is based on jQuery version 1.5  Good chance that new versions are available  Monthly minor releases (e.g., 1.5.1)  Annual major release (e.g., 1.5)• Visual Studio 2010 includes version 1.4.1• Availability of vsdoc file lags jQuery release• Damian Edwards’ vsdoc File Generator utility  Blog is at https://damianedwards.wordpress.com  Grab latest version there  Or use the utility to build your own Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 80. Progressive Enhancement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 81. Progressive Enhancement• Problem: older browsers don’t support JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 82. Progressive Enhancement• Problem: older browsers don’t support JavaScript  And other users can turn it off Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 83. Progressive Enhancement• Problem: older browsers don’t support JavaScript  And other users can turn it off• Page must work in a minimal fashion for all Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 84. Progressive Enhancement• Problem: older browsers don’t support JavaScript  And other users can turn it off• Page must work in a minimal fashion for all• Historically, two options: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 85. Progressive Enhancement• Problem: older browsers don’t support JavaScript  And other users can turn it off• Page must work in a minimal fashion for all• Historically, two options:  Graceful degradation Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 86. Progressive Enhancement• Problem: older browsers don’t support JavaScript  And other users can turn it off• Page must work in a minimal fashion for all• Historically, two options:  Graceful degradation  Progressive enhancement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 87. Progressive Enhancement• Problem: older browsers don’t support JavaScript  And other users can turn it off• Page must work in a minimal fashion for all• Historically, two options:  Graceful degradation  Progressive enhancement• Key assumption of graceful degradation flawed Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 88. Progressive Enhancement• Problem: older browsers don’t support JavaScript  And other users can turn it off• Page must work in a minimal fashion for all• Historically, two options:  Graceful degradation  Progressive enhancement• Key assumption of graceful degradation flawed• Unless have control over browsers, always design with progressive enhancement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 89. Delivering jQuery to the Browser Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 90. Delivering jQuery to the Browser • Can always download latest version for development at jquery.com Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 91. Delivering jQuery to the Browser • Can always download latest version for development at jquery.com • Include in Web pages using <script> element Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 92. Delivering jQuery to the Browser • Can always download latest version for development at jquery.com • Include in Web pages using <script> element  Implemented as regular .js file Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 93. Delivering jQuery to the Browser • Can always download latest version for development at jquery.com • Include in Web pages using <script> element  Implemented as regular .js file  <script src="/Scripts/jquery-1.5.min.js" type="text/javascript"></script> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 94. Delivering jQuery to the Browser • Can always download latest version for development at jquery.com • Include in Web pages using <script> element  Implemented as regular .js file  <script src="/Scripts/jquery-1.5.min.js" type="text/javascript"></script> • But where do you host it? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 95. Hosted On Your Site Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 96. Hosted On Your Site• When you use a relative path, jQuery file has to be in that location…of course! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 97. Hosted On Your Site• When you use a relative path, jQuery file has to be in that location…of course!• Drawbacks Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 98. Hosted On Your Site• When you use a relative path, jQuery file has to be in that location…of course!• Drawbacks  You must provide bandwidth Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 99. Hosted On Your Site• When you use a relative path, jQuery file has to be in that location…of course!• Drawbacks  You must provide bandwidth  Browser caches the file but only for your site Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 100. Hosted On Your Site• When you use a relative path, jQuery file has to be in that location…of course!• Drawbacks  You must provide bandwidth  Browser caches the file but only for your site  May be significant network latency Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 101. Use a Content Delivery Network Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 102. Use a Content Delivery Network• Geographically distributed set of servers that host and deliver content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 103. Use a Content Delivery Network• Geographically distributed set of servers that host and deliver content• Biggest are Google and Microsoft Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 104. Use a Content Delivery Network• Geographically distributed set of servers that host and deliver content• Biggest are Google and Microsoft• Benefits Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 105. Use a Content Delivery Network• Geographically distributed set of servers that host and deliver content• Biggest are Google and Microsoft• Benefits  CDN provides the bandwidth Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 106. Use a Content Delivery Network• Geographically distributed set of servers that host and deliver content• Biggest are Google and Microsoft• Benefits  CDN provides the bandwidth  Browser can cache files for use across sites Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 107. Use a Content Delivery Network• Geographically distributed set of servers that host and deliver content• Biggest are Google and Microsoft• Benefits  CDN provides the bandwidth  Browser can cache files for use across sites  CDN is geographically dispersed, to reduce latency Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 108. Use a Content Delivery Network• Geographically distributed set of servers that host and deliver content• Biggest are Google and Microsoft• Benefits  CDN provides the bandwidth  Browser can cache files for use across sites  CDN is geographically dispersed, to reduce latency  Take advantage of CDN’s network Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 109. Use a Content Delivery Network• Geographically distributed set of servers that host and deliver content• Biggest are Google and Microsoft• Benefits  CDN provides the bandwidth  Browser can cache files for use across sites  CDN is geographically dispersed, to reduce latency  Take advantage of CDN’s network• Both CDNs host latest and some prior versions Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 110. Using a CDN Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 111. Using a CDN• Microsoft Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 112. Using a CDN• Microsoft  <script src="http://ajax.aspnetcdn.com/ajax/ jQuery/jquery-1.5.min.js" type="text/ javascript"></script> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 113. Using a CDN• Microsoft  <script src="http://ajax.aspnetcdn.com/ajax/ jQuery/jquery-1.5.min.js" type="text/ javascript"></script>• Google Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 114. Using a CDN• Microsoft  <script src="http://ajax.aspnetcdn.com/ajax/ jQuery/jquery-1.5.min.js" type="text/ javascript"></script>• Google  <script src="https://ajax.googleapis.com/ajax/ libs/ jquery/1.5.0/jquery.min.js" type="text/ javascript"></script> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 115. Using a CDN• Microsoft  <script src="http://ajax.aspnetcdn.com/ajax/ jQuery/jquery-1.5.min.js" type="text/ javascript"></script>• Google  <script src="https://ajax.googleapis.com/ajax/ libs/ jquery/1.5.0/jquery.min.js" type="text/ javascript"></script>  Also can use a google.load() call Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 116. Using a CDN• Microsoft  <script src="http://ajax.aspnetcdn.com/ajax/ jQuery/jquery-1.5.min.js" type="text/ javascript"></script>• Google  <script src="https://ajax.googleapis.com/ajax/ libs/ jquery/1.5.0/jquery.min.js" type="text/ javascript"></script>  Also can use a google.load() call• Files hosted differ Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 117. Using a CDN• Microsoft  <script src="http://ajax.aspnetcdn.com/ajax/ jQuery/jquery-1.5.min.js" type="text/ javascript"></script>• Google  <script src="https://ajax.googleapis.com/ajax/ libs/ jquery/1.5.0/jquery.min.js" type="text/ javascript"></script>  Also can use a google.load() call• Files hosted differ• Don’t always immediately upload latest version Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 118. Compressed and Uncompressed Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 119. Compressed and Uncompressed• Two versions of the core library are available Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 120. Compressed and Uncompressed• Two versions of the core library are available Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 121. Compressed and Uncompressed• Two versions of the core library are available  Can also download earlier versions Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 122. Compressed and Uncompressed• Two versions of the core library are available  Can also download earlier versions  Development version with comments and whitespace Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 123. Compressed and Uncompressed• Two versions of the core library are available  Can also download earlier versions  Development version with comments and whitespace  Production version that is minified Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 124. Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 125. Agenda• jQuery for the ASP.NET Developer Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 126. Agenda• jQuery for the ASP.NET Developer• Using jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 127. Agenda• jQuery for the ASP.NET Developer• Using jQuery• Selectors, Wrapped Sets, and Chains Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 128. Using jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 129. Using jQuery• If you know basics of JavaScript, learning basic jQuery is easy Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 130. Using jQuery• If you know basics of JavaScript, learning basic jQuery is easy• Start by looking at a couple of simple examples Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 131. A jQuery Statement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 132. A jQuery Statement jQuery(p).text(jQuery is cool!); Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 133. A jQuery Statement jQuery(p).text(jQuery is cool!); jQuery function• jQuery is entrée to the library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 134. A jQuery Statement jQuery(p).text(jQuery is cool!); jQuery Selector function• jQuery is entrée to the library• Selector selects one or more elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 135. A jQuery Statement jQuery(p).text(jQuery is cool!); jQuery Selector Method function• jQuery is entrée to the library• Selector selects one or more elements• Method is a JavaScript function that takes action Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 136. A jQuery Statement jQuery(p).text(jQuery is cool!); jQuery Selector Method Parameter(s) function• jQuery is entrée to the library• Selector selects one or more elements• Method is a JavaScript function that takes action• Optional parameters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 137. The jQuery Function Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 138. The jQuery Function• Start all jQuery statements with this Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 139. The jQuery Function• Start all jQuery statements with this• Sort of a namespace Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 140. The jQuery Function• Start all jQuery statements with this• Sort of a namespace  Almost eliminates chance of naming conflicts Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 141. The jQuery Function• Start all jQuery statements with this• Sort of a namespace  Almost eliminates chance of naming conflicts  Sometimes called the jQuery Namespace Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 142. The jQuery Function• Start all jQuery statements with this• Sort of a namespace  Almost eliminates chance of naming conflicts  Sometimes called the jQuery Namespace• Could create your own custom jQuery function Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 143. The jQuery Function• Start all jQuery statements with this• Sort of a namespace  Almost eliminates chance of naming conflicts  Sometimes called the jQuery Namespace• Could create your own custom jQuery function• Typically used a lot in a page Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 144. The jQuery Function• Start all jQuery statements with this• Sort of a namespace  Almost eliminates chance of naming conflicts  Sometimes called the jQuery Namespace• Could create your own custom jQuery function• Typically used a lot in a page  Alias: $ Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 145. The jQuery Function• Start all jQuery statements with this• Sort of a namespace  Almost eliminates chance of naming conflicts  Sometimes called the jQuery Namespace• Could create your own custom jQuery function• Typically used a lot in a page  Alias: $• Equivalent statements: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 146. The jQuery Function• Start all jQuery statements with this• Sort of a namespace  Almost eliminates chance of naming conflicts  Sometimes called the jQuery Namespace• Could create your own custom jQuery function• Typically used a lot in a page  Alias: $• Equivalent statements:  jQuery(p).text(jQuery is cool!); $(p).text(jQuery is cool!); Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 147. Waiting for the Page to Load Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 148. Waiting for the Page to Load• Samples have shown script blocks that wire up events and change content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 149. Waiting for the Page to Load• Samples have shown script blocks that wire up events and change content  Placed at the end of the Web page Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 150. Waiting for the Page to Load• Samples have shown script blocks that wire up events and change content  Placed at the end of the Web page  DOM had to already be loaded Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 151. Waiting for the Page to Load• Samples have shown script blocks that wire up events and change content  Placed at the end of the Web page  DOM had to already be loaded  Otherwise get null references or errors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 152. Waiting for the Page to Load• Samples have shown script blocks that wire up events and change content  Placed at the end of the Web page  DOM had to already be loaded  Otherwise get null references or errors• Ideally, put all code in head section under separation of functionality principle Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 153. Waiting for the Page to Load• Samples have shown script blocks that wire up events and change content  Placed at the end of the Web page  DOM had to already be loaded  Otherwise get null references or errors• Ideally, put all code in head section under separation of functionality principle  But then runs before DOM is loaded Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 154. Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 155. Agenda• jQuery for the ASP.NET Developer Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 156. Agenda• jQuery for the ASP.NET Developer• Using jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 157. Agenda• jQuery for the ASP.NET Developer• Using jQuery• Selectors, Wrapped Sets, and Chains Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 158. Selectors, Wrapped Sets, and Chains Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 159. Selectors, Wrapped Sets, and Chains • jQuery lets you build powerful statements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 160. Selectors, Wrapped Sets, and Chains • jQuery lets you build powerful statements • Selects elements, take action Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 161. Selectors, Wrapped Sets, and Chains • jQuery lets you build powerful statements • Selects elements, take action • Now it’s time to explore how jQuery does this Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 162. Selectors, Wrapped Sets, and Chains • jQuery lets you build powerful statements • Selects elements, take action • Now it’s time to explore how jQuery does this • jQuery Selector Test Page Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 163. Using jQuery Selectors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 164. Using jQuery Selectors• Selector is a string that identifies elements to match Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 165. Using jQuery Selectors• Selector is a string that identifies elements to match  Add to wrapped set Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 166. Using jQuery Selectors• Selector is a string that identifies elements to match  Add to wrapped set• Sometimes simple, like all images on the page Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 167. Using jQuery Selectors• Selector is a string that identifies elements to match  Add to wrapped set• Sometimes simple, like all images on the page• Sometimes complex, based on content and structure of the page Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 168. Using jQuery Selectors• Selector is a string that identifies elements to match  Add to wrapped set• Sometimes simple, like all images on the page• Sometimes complex, based on content and structure of the page• Selector syntax is based on CSS 3 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 169. Using jQuery Selectors• Selector is a string that identifies elements to match  Add to wrapped set• Sometimes simple, like all images on the page• Sometimes complex, based on content and structure of the page• Selector syntax is based on CSS 3  Subset and superset Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 170. Using jQuery Selectors• Selector is a string that identifies elements to match  Add to wrapped set• Sometimes simple, like all images on the page• Sometimes complex, based on content and structure of the page• Selector syntax is based on CSS 3  Subset and superset  Doesn’t depend on browser’s support for CSS 3 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 171. Simple Selectors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 172. Simple Selectors• Easiest way to define a selector is to use the HTML element name Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 173. Simple Selectors• Easiest way to define a selector is to use the HTML element name  img, tr, a, input, etc. Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 174. Simple Selectors• Easiest way to define a selector is to use the HTML element name  img, tr, a, input, etc.  Selects all elements of that type Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 175. Attribute Value Selectors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 176. Attribute Value Selectors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 177. Selector Description Attribute Value Selectorselem[attr |= value] The attribute value is either equal to the specified value or starts with that value followed by a hypen. This is referred to as a prefix selector.elem[attr *= value] The attribute value contains the specified value.elem[attr ~= value] The attribute value contains the specified value as a word delimited by spaces. In other words, The selector matches if the specified value is exactlyelem[attr $= value] equal to any of the ends withthe attribute value. The attribute value words in the specified value. This is referred to as a word selector.elem[attr != value] The element either doesn’t have the specified attribute or the attribute value doesn’t match the specified value.elem[attr ^= value] The attribute value begins with the specified value. Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 178. jQuery Filters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 179. jQuery Filters• So far, techniques are too blunt a tool Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 180. jQuery Filters• So far, techniques are too blunt a tool  e.g., no easy way to select alternating rows in a table Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 181. jQuery Filters• So far, techniques are too blunt a tool  e.g., no easy way to select alternating rows in a table• Need a filter Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 182. jQuery Filters• So far, techniques are too blunt a tool  e.g., no easy way to select alternating rows in a table• Need a filter  Takes selected elements and filters them down further Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 183. jQuery Filters• So far, techniques are too blunt a tool  e.g., no easy way to select alternating rows in a table• Need a filter  Takes selected elements and filters them down further  Based on criteria you select Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 184. Other Filters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 185. Other Filters• Filters provide power and finesse! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 186. Other Filters• Filters provide power and finesse!• There’s more: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 187. Other Filters• Filters provide power and finesse!• There’s more:  Content filters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 188. Other Filters• Filters provide power and finesse!• There’s more:  Content filters  Visibility filters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 189. Other Filters• Filters provide power and finesse!• There’s more:  Content filters  Visibility filters  Hierarchy filters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 190. Other Filters• Filters provide power and finesse!• There’s more:  Content filters  Visibility filters  Hierarchy filters  Child filters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 191. Other Filters• Filters provide power and finesse!• There’s more:  Content filters  Visibility filters  Hierarchy filters  Child filters• nth-child filter is an anomaly: one-based Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 192. Wrapped Sets and Chaining Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 193. Wrapped Sets and Chaining• Selectors produce wrapped sets Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 194. Wrapped Sets and Chaining• Selectors produce wrapped sets  Wrapper methods can perform actions Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 195. Wrapped Sets and Chaining• Selectors produce wrapped sets  Wrapper methods can perform actions  No need to write tedious looping code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 196. Wrapped Sets and Chaining• Selectors produce wrapped sets  Wrapper methods can perform actions  No need to write tedious looping code  Wrapper methods do that internally for you Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 197. Wrapped Sets and Chaining• Selectors produce wrapped sets  Wrapper methods can perform actions  No need to write tedious looping code  Wrapper methods do that internally for you• Two wrapper methods Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 198. Wrapped Sets and Chaining• Selectors produce wrapped sets  Wrapper methods can perform actions  No need to write tedious looping code  Wrapper methods do that internally for you• Two wrapper methods  $(img, input[type = text], #sampleHTML).addClass(wrappedSet); Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 199. Wrapped Sets and Chaining• Selectors produce wrapped sets  Wrapper methods can perform actions  No need to write tedious looping code  Wrapper methods do that internally for you• Two wrapper methods  $(img, input[type = text], #sampleHTML).addClass(wrappedSet);• Methods to manage the wrapped set Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 200. Wrapped Sets and Chaining• Selectors produce wrapped sets  Wrapper methods can perform actions  No need to write tedious looping code  Wrapper methods do that internally for you• Two wrapper methods  $(img, input[type = text], #sampleHTML).addClass(wrappedSet);• Methods to manage the wrapped set  var wrappedSet = $(selector, #sampleHTML).addClass(wrappedSet); $(#elementCount).html(wrappedSet.length); Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 201. Learn More! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  • 202. Learn More!• This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company