Introduction to jQuery

1,286 views

Published on

My 10 minute presentation on jQuery to ESRI's Dev Meet Up on September 15, 2010

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,286
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to jQuery

  1. 1. Introduction to jQuery<br />James Johnson<br />Founder and President, Inland Empire .NET User’s Group<br />Technical Evangelist, ComponentOne<br />
  2. 2. JavaScript<br />Used to provide interactivity with a web page<br />Enable programmatic access to a web page<br />Dynamic<br />Weakly typed<br />Prototype-based<br />Supports closures and higher order function<br />
  3. 3. JavaScript<br />Not to be confused with Java, it has a similar syntax<br />{} and ;<br />First released as LiveScript in September 1995<br />Renamed to JavaScript in December 1995<br />Easy to write functions, then copy and paste all over<br />Quickly one of the most popular languages for web development <br />But thought of as a kiddy language<br />Advent of Ajax brought JavaScript attention by “professionals”<br />
  4. 4. JavaScript <br />Pros<br />Dynamic<br />Easy to develop with<br />Easy to debug<br />Similar syntax to “real” languages<br />Cons<br />Dynamic<br />Easy to develop with<br />Every browser seems to have it’s own JavaScript engine<br />Difficult to have same behaviours across browsers<br />
  5. 5. JavaScript libraries<br />Pre-written JavaScript controls<br />Easier development<br />Many, many libraries<br />Dojo, Echo, Ext, Google Web Toolkit, jQuery, MochiKit, MooTools, <br />Prototype, qooxdoo, Rico, script.aculo.us, Spry, Yahoo! UI Library<br />
  6. 6. jQuery<br />Released in January 2006 by John Resig<br />BarCamp (an international network of user-generated conferences )<br />Free, open source, dual-licensed under MIT and GNU<br />Syntax is easier to navigate the DOM<br />Handles events<br />Creates animations<br />Ajax grooviness baked in<br />Used by over 39% of the top 10,000 websites<br />Microsoft bundles with ASP.NET Ajax and ASP.NET MVC<br />Full support from Microsoft<br />
  7. 7. jQuery Syntax <br />$(“some element”) or jQuery(“some element”)<br />Can select by ID or className<br />$(“#myElement”) gets the only ID=“myElement” <br />$(“div.myElement”) gets all divs with class=“myElement”<br />Easy to traverse<br />$(“div.mainul li”) – all <li> within div class=“main”<br />$(“div.main”).find(“li”) – same as above<br />$(“div.main”).find(“li:odd”) – same as above but only ODD elements – zero-based<br />http://api.jquery.com/category/selectors/<br />
  8. 8. jQuery Events<br />Two main methods to attach event<br />$(document).ready(function(){ $(“myElement”).click(function() { doSomething(); });});<br />Fired when the DOM is completely loaded<br />$(“myElement”).live(“click”, function() { doSomething(); });<br />Fired when the element is created in the DOM<br />http://api.jquery.com/category/events/<br />
  9. 9. jQuery Chaining<br />Once an element is found, reference is kept<br />Instead of<br />$(“div.myElement”).hide();<br />$(“div.myElement”).html(“hi”);<br />$(“div.myElement”).addClass(“red”);<br />$(“div.myElement”).fadeIn(“slow”);<br />Chain the actions<br />$(“div.myElement”).hide().html(“hi”).addClass(“red”).fadeIn(“slow”);<br />
  10. 10. jQuery stuff you can do<br />Selectors – find elements in the DOM<br />Attributes – get/set attributes of found elements<br />Traversing – moving up/down elements in the DOM<br />Manipulation – get/set contents of found elements<br />CSS – get/set style attributes of found elements<br />Events – fire on click, hover, load, etc. of found elements<br />Effects – fadeIn, fadeOut, slideIn/Out, hide/show<br />Ajax – full Ajax capabilities<br />Utilities – inArray, isArray, makeArray, etc.<br />
  11. 11. jQuery benefits<br />Fast development<br />Solid, standardized library<br />Gracefully fails – no glaring errors or frozen pages<br />Lots and lots and lots of examples<br />Very easy to grok<br />All the cool kids use it<br />
  12. 12. Demo<br />

×