Docstoc

jQuery Presentation

Document Sample
jQuery Presentation Powered By Docstoc
					Jax Code Camp 2010
      Good morning
        iPhone Dev


• How to develop for the iOS 4
jQuery 1.4 and
  ASP.NET
  Jax Code Camp 2010
          About Me
• David Fekke
• Software Engineer
• Lender Processing Services
• Fekke L.L.C.
• iPhone, iPad and Android Apps
• ASP.NET and ColdFusion
Douglas Crockford
  “Good architecture is necessary to give
programs enough structure to be able to
grow large without collapsing into a puddle
of confusion.”
John Resig
“The DOM is a mess!”
             jQuery
• Javascript Framework
• 2006
• Included with Visual Studio
• 20% of all websites
• 31% of top 10,000 websites
          Licensing

• FREE
• MIT License
• Included with Visual Studio
• Tell the lawyers to relax
    jQuery features

• Do a lot with very little code
• Chain multiple commands together
• AJAX Library
• UI Library
           Sample jQuery

$(“div.myClass”).fadeOut().addClass(“myNewClass”);
  Microsoft Support

• Microsoft on JQuery Board
• Supported since Visual Studio 2008 sp1
• Intellisense support
• Libraries come included in certain
  projects
     Getting Started

• Download from jquery.com
• Can use a CDN such as Google
• Include jQuery library in your html
 <script src="scripts/jquery.js"
type="text/javascript"></script>
<script
type="text/javascript">
   jQuery();
</script>
<script
type="text/javascript">
   $();
</script>
        jQuery plays
         with others

• $ is an Alias of jQuery
• jQuery.noConflict(); will turn off $ alias
• Must be run in document ready()
         Page Load

• onload can be used, but not preferred
• $(document).ready() same as onload
• $() will work as a shortcut
     Sizzle Selector
         Library
• Selector Library now its own project
• Core to how jQuery works
• CSS 1-3 selectors for matching
  elements
 Querying in jQuery
• select any DOM element
• $(document); // Document object
• $(p); // all paragraph elements
• $(tr:nth-child(1)); // first row of each
  table
• $(p > a); // all anchors inside paragraph
  tags
     Trigger Events

• $(a#home).bind(“click”,fn);
• $(a#home).click(fn);
• $(a#home).live(“click”,fn);
     Utility functions

• $.trim(someString);
• $.makeArray(obj);
• $.unique(array)
         Traversing
• next(expr)
• previous(expr)
• parents(expr)
• siblings(expr)
• children(expr)
               Chaining


• $(‘p’).next().css(‘font’,’Times’).append(‘<br/>’
  );
      Use Each with
      Wrapped Sets

• $(a) returns array
• var single_item = $(a)[0];
• Each(function(){ //do something })
             AJAX


• jQuery.getJSON();
• jQuery.ajax();
{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}
   jQuery and .NET
• Use REST over SOAP
• Try to use JSON over XML if possible
• WCF can output JSON
• var svc = new
  Sys.Data.DataService("j.svc")
• ASP.NET MVC can handle JSON
  actions
            Plugins

• jQuery is extensible
• Write your own
• jQuery.fn.mypluginname = fn()
• Huge Ecosystem of Plugins
          New to 1.4

• $().live(“eventType”, fn);
• $().closest(“eventType”, fn);
• $().proxy(fn, context);
Demo
         Resources

• jQuery.com
• http://jqueryui.com
• http://jquery14.com
• http://www.manning.com/bibeault/
   ?
Questions
   ?
 How to Contact me

• davidfekke @ gmail dot com
• twitter @davidfekke
• Blog at http://www.fekke.com/blog/

				
DOCUMENT INFO
Categories:
Tags:
Stats:
views:8
posted:3/31/2012
language:English
pages:33