JQuery

1. JQuery www.jquery.com Playing with DOM is easier with JQuery This presentation is a simple walkthrough of useful JQuery features

2. Explaining the environment for this demo • Using FireBug console • Using GreaseMonkey to add JQuery to any website • Using FireBug console to play with JQuery

3. How does JQuery work • What is the magic $ • $ is a valid Javascript name identifier • What is the JQuery object • JQuery object is a javascript container, constructed with a CSS match pattern, plus helper methods • Chainability • Most JQuery methods returns a JQuery container, allowing for method calls to be chained • $(“.stuff”).do().domore().domore2(); • The JQuery philosophy • Select & do (& do more)

4. CSS selector – JQuery selector • IMPORTANT – learn this, because this is the same as CSS. You learn this you also learn CSS • Examples with input, class, id • $(“input”) • $(“.grid”) • $(“#textbox1”) • $(“input#textbox1”) • $(“table.grid”) • Pseudo classes :checkbox, :hover • $(“input:checkbox”) • $(“a:hover”)

5. More Selector stuff • Select with attribute matching - partial id (useful in ASP.NET where the control id has clientid prefix’ed) • $(“a[@name=top]”) • $(“[@id*=textbox1]”) • Relative selection • var $table = $(“table.mytable”);$(“tr td”, $table);

6. Before we go into methods • By convention Jquery (and Javascript) methods are camelCase • It is common to see $varname as a variable name for JQuery objects • var $table = $(“table.mytable”); • Javascript function syntax • function() { alert(‘hi!’); } • Javascript arrays syntax • [ 1, 2, 3 ] • Javascript associative array (hashtable) syntax • { key1: 1, key2: 2, key3: 3 }

7. Methods - manipulation • attr • $(“a”).attr(“href”) • setter and getter behaves slightly differently • addClass / removeClass • $(“input”).addClass(“emphasis”) • val • $(“input”).val() • $(“select”).val() • $(“input:check”).val() • css • $(“div.my”).css(“border”, “1px”) • $(“div.my”).css( { “border” : “1px”, “background-color” : “cyan” }) • height / width • Will tell you the size of the object (as best as it can)

8. methods - traversing • Navigates the DOM relatively, and returns a JQuery object of the result • children • $(“table.grid”).children(“tr td”) • $(“table.grid tr td”) • parent • $(“td”).parent() • Only 1 level up – sometimes limiting • What is $(“tr”).parent()? Will it be <tbody> or <table>? • parents • $(“a”).parents(“div”) • next / prev • $(“tr”).next().prev() • find • $(“table.grid”).children(“tr td”).find(“a”) • is • $(“input:check”).is(“:checked”) • end • The prevObject • $(“table.grid”).children(“tr td”).dostuff().end()

9. methods – effects • show / hide / toggle • $(“input”).show() • $(“div.menu”).hide() • fadeIn / fadeout • $(“img”).fadeout(5) • slideUp / slideDown • $("div.event:visible:first").slideUp() • $("div.section p").slideUp() • $("div.section p").slideDown() • animate • $(“div.box”).animate(“width”, 5) • $(“div.myguy”).animate( { “width” : “10px”, “height” : “20px”, “left” : “30px” })

10. Fun • $("div.event:visible:first").hide().parents("tr").appendTo( $("div[@id*=upcoming_events] table:last") ).end().show() • Becareful about timing effects such as slide or animate • $("div.section:last").css( {"position":"absolute","width":"256px"} ).animate( {"left": “300px","top":“200px"}, 2000 )

11. More Fun • $("div.section").each( function(){ $(this).css( {"position":"absolute","width":$(this).width()} ).animate( {"left": Math.random()*500 + "px","top":Math.random()*500 + "px"}, 2000 ) })

13. events • ready • $(document).ready( function() { alert(‘hi!’); } ) • Note – hooking into MS AjaxManager for update panels • click • $(“a”).click( function() { alert(‘hi!’); } ) • bind / unbind • $(“a”).bind(“click”, function() { alert(‘hi!’); } ) • Trigger • $(“a”).trigger(“click”)

14. Demo – select-all grid

15. utility • jQuery.Browser • $.browser • $.browser.msie

16. Performance tips • document.getElementByTagName • document.getElementById • Limit down your selection query fast – work with just the objects you need

17. JQuery UI • Corner • http://www.methvin.com/jquery/jq-corner-demo.html • Datepicker • http://docs.jquery.com/UI/Datepicker • Accordion • http://docs.jquery.com/UI/Accordion • Newsticker • http://www.texotela.co.uk/code/jquery/newsticker/

18. JQuery file • 3 versions to choose from • “normal” (good for debugging) • Minified (spaces stripped) • Packed (smallest but requires some computation time to load)

19. Tools - Debugging JQuery • Tip • Create separate javascript file for easier debugging • FireFox • FireBug • Console • IE7 • Visual Studio • Windows Script Editor • http://www.microsoft.com/downloads/results.aspx?freetext=Windows%20Script%205.7&DisplayLang=en • http://www.microsoft.com/downloads/details.aspx?familyid=2f465be0-94fd-4569-b3c4-dffdf19ccd99&displaylang=en

20. Tools – Debugging JQuery • IE8 • Built-in developer toolbar

21. Tools - Others • FireFox • GreaseMonkey • UserScripts.org • http://www.joanpiedra.com/jquery/greasemonkey/jquery.user.js