jQuery Presentation
Upcoming SlideShare
Loading in...5
×
 

jQuery Presentation

on

  • 3,751 views

Basics about jQuery presented to Ancestry.com

Basics about jQuery presented to Ancestry.com

Statistics

Views

Total Views
3,751
Views on SlideShare
3,722
Embed Views
29

Actions

Likes
1
Downloads
90
Comments
0

3 Embeds 29

http://www.serwis.banasinski.pl 27
http://localhost 1
http://www.docshut.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 jQuery Presentation Presentation Transcript

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