jQuery Presentation


Published on

Basics about jQuery presented to Ancestry.com

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Talk a little about JavaScriptHow well do you know JavaScript?Do we really understand it?How many have done advanced stuff with javascript?Used in different platformsPdfPhotoshopFireworks
  • Unobtrusive JavaScriptLess code
  • Unobtrusive JavaScriptLess code
  • Best practice to indent your code
  • Does not rely on the browser to match the elementsGood for webforms that does the weird ID thing
  • Cross browser up until ie 6
  • Functions are omnipresent
  • Conducive tothe way web pages work.Events are useful, but rediculously hard to implmeent
  • Conducive tothe way web pages work.Events are useful, but rediculously hard to implmeent
  • jQuery Presentation

    1. 1. jQuery Brownbag<br />Rod Johnson<br />
    2. 2. Checking for Null Values<br />C# Way…<br />JavaScript Way<br />
    3. 3. Setting Default Values<br />C# Way…<br />JavaScript Way<br />
    4. 4. Properties<br />C# Way…<br />JavaScript Way<br />
    5. 5. Why is jQuery Awesome?<br />What jQuery does well:<br />Simplified AJAX<br />DOM Manipulation<br />Event Management<br />Animations<br />Normalizes Browser Differences<br />Why It Is Successful:<br />Well Designed<br />Easy to extend with plugins<br />Great Documentation<br />Large jQuery Community<br />Cross-browser<br />
    6. 6. jQuery Founder<br />
    7. 7. jQuery Philosophy<br />Find some stuff<br />Do something to it<br />
    8. 8. Chaining<br />
    9. 9. Example: Conditional Hide Show<br />
    10. 10. Selecting Elements: Basic CSS Selectors<br />
    11. 11. Selecting Elements: Positional Selectors<br />
    12. 12. Example: Expanding Form<br />
    13. 13. Example: Expanding Form - Continued<br />Iterate through jQuery wrapped set by using the each() method.<br />There are 2 ways to pass in this data.<br />Controls the context. This is consistent.<br />Since this item is added dynamically, you will need to use the live() method instead of bind()<br />You can chain jQuery objects to each other. This makes for really succinct statements.<br />Indent your code so you can easily see what is the current object in the chain<br />Control chaining with the end() method<br />
    14. 14. Events in jQuery<br />Control how this event gets bubbled down the DOM<br />Prevent the default behavior of an element. Useful for buttons and links.<br />Bind an element that is already added to the DOM<br />Bind an element that is not yet added to the DOM. Very useful with Ajax or adding elements dynamically<br />Namespacing works really well when you have multiple listeners attached to the same element.<br />Unbinding events.<br />Opposite of live()<br />
    15. 15. Example: Pager<br />
    16. 16. Example: Pager - Continued<br />Setup event handler<br />Optional second parameter stores your custom data that is passed from the event<br />Events can be triggered by using the trigger() method.<br />Load custom data from the data attribute of the html element<br />Always prevent the default behavior of any hyperlink event you trap.<br />
    17. 17. Example: Default Images<br />Bind default resources on the “error” event.<br />
    18. 18. jQuery in Visual Studio<br />By adding script references to your .js file, you get intellisense… kinda.<br />You will not be able to select any elements until the document is ready.<br />Most if your work will happen here.<br />Good practice to always alias your $ by using Local Scope. This will prevent any collisions with any other library that may use $ variable<br />
    19. 19. Example: Simulated Page Lifecycle<br />By adding script references to your .js file, you get intellisense… kinda.<br />Works good if you have multiple js files that all depend on the document loaded event<br />
    20. 20. Example: Ajax Proxy<br />Very flexible way to pass in parameters to a function.<br />Pass in as many or as few parameters as you need.<br />Alias your functions by using jQuery as $<br />
    21. 21. Example: Ajax Dropdown with ASP.NET MVC<br />
    22. 22. Pattern: Default Values<br />Old way… <br />Doesn’t scale very well at all.<br />Pass in an object hash with as many or as few parameters as you want.<br />jQuery Way…<br />Enumerate any default values<br />Default values will be overwritten by the values you passed in the ‘params’ object.<br />
    23. 23. jQuery Plugins<br />
    24. 24. jQuery UI Plugin<br />
    25. 25. jQuery - BBQ<br />http://benalman.com/projects/jquery-bbq-plugin/<br />Merge query string fragments into the query string#foo=1&bar=2<br />Maintains history with each hash change<br />Great for AJAX history management<br />Paging<br />Tabs<br />
    26. 26. Linq to jQuery<br />Without Linq to jQuery…<br />With Linq to jQuery…<br />
    27. 27. Plugin Authoring<br />Don’t break the chain…<br />Can use as if it were just a regular jQuery method<br />
    28. 28. Learn More About jQuery<br />
    29. 29. jQuery Documentation<br />
    30. 30. Learn More<br />http://jquerylist.com/<br />http://enterprisejquery.com<br />http://jquery.com<br />