Your SlideShare is downloading. ×
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Tips Tricks Trivia

6,249

Published on

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/

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
  • The samples & links referenced in the presentation are at this link - http://www26.brinkster.com/mvark/jquery/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,249
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
220
Comments
1
Likes
1
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

Transcript

  • 1. jQuery Tips, Tricks & Trivia 'Anil' Radhakrishna Blog: Tech Tips, Tricks & Trivia - http:// mvark .blogspot.com
  • 2. 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
  • 3. 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
    •  
    •  
    •  
    •  
    •  
  • 4. 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
  • 5. 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]')
  • 6. 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] ) 
  • 7. 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
    •  
    •   
    •  
    •  
    •  
    •  
  • 8. 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... });
  • 9. 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 
  • 10. 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 -
  • 11. 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/
  • 12. 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
  • 13. 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.
  • 14. 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
  • 15. 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/
    •  
    •  
    •  
    •  
    •  
  • 16. jQuery - The Write Less, Do More, JavaScript Library
    •  
    •  
    • Q & A

×