• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery Tips Tricks Trivia
 

jQuery Tips Tricks Trivia

on

  • 6,670 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,670
Views on SlideShare
6,629
Embed Views
41

Actions

Likes
1
Downloads
199
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

11 of 1 previous next

  • 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