jQuery Tips Tricks Trivia
Upcoming SlideShare
Loading in...5
×
 

jQuery Tips Tricks Trivia

on

  • 6,880 views

The samples & links referenced in the presentation are at this link - http://www26.brinkster.com/mvark/jquery/

The samples & links referenced in the presentation are at this link - http://www26.brinkster.com/mvark/jquery/

Statistics

Views

Total Views
6,880
Views on SlideShare
6,839
Embed Views
41

Actions

Likes
1
Downloads
211
Comments
1

3 Embeds 41

http://www.slideshare.net 38
http://webcache.googleusercontent.com 2
http://www.techgig.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…
  • The samples & links referenced in the presentation are at this link - http://www26.brinkster.com/mvark/jquery/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Tips Tricks Trivia jQuery Tips Tricks Trivia Presentation Transcript

  • jQuery Tips, Tricks & Trivia 'Anil' Radhakrishna Blog: Tech Tips, Tricks & Trivia - http:// mvark .blogspot.com
  • Popular JavaScript frameworks
      • jQuery
      • Ext JS
      • MooTools
      • Prototype & script.aculo.us
      • YUI
      • Google Web Toolkit
      • Dojo
    • Selection factors - frequent releases, licensing, size, documentation & support, features, browser support
    • Comparison - http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
  • Why should you use jQuery?
      • Cross-browser (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)  - jQuery abstracts away browser quirks.
      • Extensible - 4000+ plugins
      • Based on CSS Selectors
      • "Write less, do more" - Allows multiple actions in one line (Chaining), works with sets using implicit iteration
      • Improved performance - the Minified and Gzipped version of the jQuery library is just 24KB (jQuery v1.4.2) 
      • Simplified Event Handling
      • In September 2008, Microsoft and Nokia adopted jQuery as part of their official application development platform. 
      • jQuery is included in over 21% of the Alexa's top 10,000 web sites.  
      • Track popular sites using jQuery - http://twitter.com/jquerysites
    •  
    •  
    •  
    •  
    •  
  • What jQuery can do
      • DOM selection & manipulation
      • Event-handling
      • Animation effects - show/hide, fading, sliding, custom
      • AJAX - get(), post(), load(), getJSON()
      • Simplify common JavaScript tasks
    •  
    • Trivia: John Resig was 22 when he started jQuery in 2006
  • jQuery Overview
    • Selectors -
      • pattern matching techniques to identify DOM elements in a webpage, pick & manipulate them
      • based on CSS Selector syntax
      • find by Id, Class, Element name, Position
      • ex - $('#some-id'), $('.some-class'), $('p')
    •  
    • Attribute selectors -
      • subset of CSS selectors
      • allow us to specify an element by one of its HTML properties
      • ex - $('img[alt]')
    •  
    • XPath selectors -
      • can be used alongside CSS selectors in jQuery
      • ex - $('a[@title]')
  • jQuery Terminology (continued)
    • Pseudo class - 
      • used to add special effects to some selectors, as in CSS ( ex- a:visited ).
      • further refinement of selection
      • expressions that start with a colon
      •   ex - tr :last ,
    •  
    • Chaining -
      • get multiple sets of elements and do multiple things with them, all within a single line of code. 
      • only works when result of a method is a jQuery object
      • Ex - $('td:contains("Henry")').next().addClass('highlight');
    •              OR also written as:
    •              $('td:contains("Henry")')
    •              .next()
    •              .addClass('highlight');
    • Events -
      • cleanly separated from the markup in jQuery
      • shorthand event methods exist for all standard DOM events Ex -  $('#button1').click( [fn] ) 
  • jQuery Terminology (continued)
    • Compound event handlers -
    • intercept combinations of user actions, and respond to them using more than one function.
    • for convenience and cross-browser optimization.
    • Ex-  .ready(), .toggle() and .hover() event-handling methods
    •  
    •   
    •  
    •  
    •  
    •  
  • Different ways of using .ready() method
    • $(document).ready(function() {   // your code here... });
    • $().ready(function() {  // your code here... });
    • jQuery(function($){   // your code here... });
    • $(function() {   // your code here... });
  • Experiment interactively with Firebug Console & jQuerify Bookmarklet
      • Test jQuery statements with Firebug Console instead of going through the process of editing, saving, reloading 
      • Drag the jQuerify Bookmarklet to the Bookmarks toolbar or Favorites Bar in IE8
      • jQuerify Bookmarklet - http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet
      • Use JS Bin (http://jsbin.com/) and JS Fiddle (http://jsfiddle.net/) for collaborative JavaScript coding 
  • Take advantage of jQuery Intellisense in Visual Studio
      • Add the jQuery IntelliSense documentation file for the specific version you are working with
      • "vsdoc" file available from the jQuery site & Microsoft's Ajax CDN
      • If you're inside an ASPX page, add the following lines of code into the head of your page to trigger Intellisense:
    •  
    •  
    •  
      • To trigger it inside a script -
  • Use jQuery from a CDN
      • Use the jQuery Library from Microsoft or Google's Content Delivery Network to achieve 
        • decreased latency
        • increased parallelism
        • better caching
    •  
      • Microsoft Ajax CDN hosts:
        • jQuery (versions 1.3.2 to 1.4.2)
        • jQuery Validation library (versions 1.5.5 to 1.7)
        • File to reference looks like this - http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js
    •  
      • Google CDN hosts:
        • jQuery (versions 1.2.3 to 1.4.2)
        • jQuery UI (versions 1.5.2 to 1.8.1) 
        • File to reference looks like this - http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
    •  
      • More info:
        • Microsoft Ajax CDN: http://www.asp.net/ajaxlibrary/cdn.ashx
        • Google CDN: http://code.google.com/apis/ajaxlibs/documentation/
  • Leverage jQuery Plugins
      • Package re-usable jQuery code as a plugin
      • Make sure it appears after the main jQuery source file
      • Over 20 categories & 4000+ plugins listed on the official jQuery Plugins site
      • Lightbox - overlay detailed information on top of a page without the use of a popup window
      • jQuery UI is a whole library of plugins.
      • jQuery UI consists of a number of core interaction
      • components and full-fledged themeable widgets to help make the web experience more like that of a desktop application.
      • jQuery UI ThemeRoller - web-based interactive theme engine for UI widgets. 
      • jQuery UI widgets -
        • Accordion
        • Autocomplete
        • Button
        • Datepicker
        • Dialog
        • Progressbar
        • Slider
        • Tabs
  • Screen scrape pages with jQuery, JSONP & YQL
      • JavaScript's "same origin policy" restricts interaction among pages from different domains.
      • JSONP is a cross-domain communication technique that bypasses the same-origin policy limitation.
      • JSONP (JSON with Padding) file format consists of a standard JSON fle that has been wrapped in parentheses and prepended with an arbitrary text string. 
      • YQL is a hosted web service that can scrape HTML for you. It also runs the HTML through HTML Tidy and caches it for you.
      • YQL (Yahoo! Query Language) can act as a facilitator by reaching out for web content and then re-packaging it as JSONP that can be injected into a web page.
  • More tips
      • Write unobtrusive JavaScript. Even if JavaScript is disabled it should degrade gracefully
      • Use IDs instead of classes wherever possible
      • Don’t use jQuery unless there’s a good reason to
      • Place <link rel=&quot;stylesheet&quot;> tags prior to <script> tags within the document's <head> element.
      • Don’t overdo Chaining
      • Don't abuse plug-ins. Choose plug-ins which are supported and maintained.
      • Always use the latest jQuery version
      • Contribute to the jQuery community - report bugs, feedback
      • Follow jQuery on Twitter: @jquery,@jqueryui,@jeresig
  • References
    •  
    • Books :
      • jQuery in Action (Manning)
      • Learning jQuery (Packt)
    •  
    • Videos:
      • jQuery for the ASP.NET Developer - http:// channel9 .msdn.com/posts/matthijs/jQuery-for-the-ASPNET-Developer-by-Scott-Allen/
    •  
    •  
    •  
    •  
    •  
  • jQuery - The Write Less, Do More, JavaScript Library
    •  
    •  
    • Q & A