1 / 21

JQuery

JQuery . www.jquery.com Playing with DOM is easier with JQuery This presentation is a simple walkthrough of useful JQuery features . Explaining the environment for this demo. Using FireBug console Using GreaseMonkey to add JQuery to any website Using FireBug console to play with JQuery.

trevet
Télécharger la présentation

JQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 ) })

  12. 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”)

  13. Demo – select-all grid

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

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

  16. 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/

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

  18. 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

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

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

More Related