1. JQuery March 09 th,2009 Create by Kritr@th.venda.com homey110@hotmail.com www.thaiddt.com

2. What is jQuery ? New type of JavaScript library. jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

3. Why jQuery? Everything works in IE6+, firefox, safari 2+, and opera 9+ CSS 3 compliant Small size (14kb, compressed) 100s of plugins Fully documented Great community Use with other libraries.noConflict();

4. Other Options Script.aculo.us –provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly Prototype –Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. –Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around Google Web Toolkit (GWT) –is an open source Java software development framework that makes writing AJAX applications Yahoo! User Interface Library –The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources.

5. Who uses jQuery? IBM BBC Google SourceForge Amazon Intuit AOL Salesforce Technorati FeedBurner Drupal WB Records Wordpress Linux.com Digg many others...

6. jQuery API Reference Selectors Attributes Manipulation CSS Events Effects

7. $(“div#contents”) Selectors Some Header....

8. $(“div.contents”) Selectors Some Header....

9. $(“div.contents > div”) Selectors Some Header....

10. $(“div#contents > p:first”) Selectors.....

11. $(“div#contents > p:last”) Selectors.....

12. $(“ div#contents > p:even”) Selectors.....

13. $(“ div#contents > p:odd”) Selectors.....

14. $(“ div#contents > p:eq(index)”) Selectors.....0.....1.....2.....3

15. API-Attributes Access a property of matched element –attr(name) Access a property on the first matched element. –attr( key, value ) Set a single property to a value, on all matched elements. –addClass( class ) Adds the specified class(es) to each of the set of matched elements. –toggleClass(class) Adds the specified class if it is not present, removes the specified class if it is present. –removeClass(class) Removes all or the specified class(es) from the set of matched elements. –hasClass(class) Returns true if the specified class is present on at least one of the set of matched elements.

16. Attributes Buy SKU 001..... $(document).ready(function(){ var title= $("a").attr("title"); alert( title + " No.1"); }); Expect result: get value attribute from HTML equal “Buy Now” attr(name) $("a").attr("title")

17. Attributes Buy SKU 001..... $(document).ready(function(){ var title= $("div#contents > a").attr("title"); alert(title); }); Expect result: get value attributes from HTML attr(name) $("div#contents > a").attr("title")

18. Attributes Buy SKU 001..... $(document).ready(function(){ var title= $("div#contents > a").attr("title","Add to Basket"); var after_change =$("div#contents > a").attr("title"); alert(after_change); }); Expect Result: Change title to “Add To Basket” attr( key, value) $("div#contents > a").attr("title","Add to Basket")

19. $(“p”).addClass(class) Attributes/addClass.selected{background:yellow;} write less, do more :1 write less, do more :2 write less, do more :3 $(document).ready(function(){ $(“p:last").addClass("selected"); }); Expect Result: p last elements added class “selected” and background yellow; Adds the specified class(es) to each of the set of matched elements. http://docs.jquery.com/Attributes/addClass#class

20. $(“p”).toggleClass( class ) Attributes/toggleClass.highlight{background:yellow;} write less, do more :1 write less, do more :2 $(document).ready(function(){ $(“p”).click(function () { $(this).toggleClass (“highlight”); }); }); Expect Result: tag p elements toggle class “highlight” and background equal yellow; Adds the specified class if it is not present, removes the specified class if it is present. http:// docs.jquery.com/Attributes/toggleClass#class

21. $(“p”).removeClass(class) Attributes/removeClass.selected{background:yellow;} write less, do more :1 write less, do more :2 write less, do more :3 $(document).ready(function(){ $("p:last").removeClass("selected"); }); Expect Result: p last elements remove class “selected” and background equal none; Remove the specified class(es) to each of the set of matched elements. http://docs.jquery.com/Attributes/addClass#class

22. $(“p”).hasClass(class) Attributes/addClass write less, do more :1 write less, do more :2 write less, do more :3 $(document).ready(function(){ $(“p:last").hasClass("selected"); }); Expect Result: p last elements has class “selected” return true; Returns true if the specified class is present on at least one of the set of matched elements. http://docs.jquery.com/Attributes/hasClass#class

23. API-Manipulation html() Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents). html(val) Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents). append( content ) Append content to the inside of every matched element. after( content ) Insert content after each of the matched elements.

24. $(“div.contents”).html(val) Manipulation Expect Result: InnerHTML to div class=“contents” We've have got power Some Header....0....1....2....3 $(document).ready(function(){ var html_code=" We've have got power "; $("div.contents").html(html_code); });

25. $(“div.contents”).html() Manipulation Expect Result: get InnerHTML class=“contents”....0....1 Some Header....0....1 $(document).ready(function(){ var html_content =$("div.contents").html(); alert(html_content); }); Get the html contents (innerHTML)

26. $(“ div.contents ”).append(val) Manipulation $("div.contents").append(" Venda Production "); Some Header....0....1....2....3 Expect Result: append content in to inside the end elements.....0....1....2....3 Venda Production

27. $(“div.contents”).after(val) Manipulation $("div.contents").after(" Venda Production "); Some Header....0....1....2....3 Expect result: insert content after div class=“content” …. ….. Venda Production

28. $(“div.contents”).before(val) Manipulation $("div.contents").before(" Venda Production "); Some Header....0....1....2....3 Expect result: insert content before div class=“content” Venda Production …. …..

29. $(“div.contents”).remove(val) Manipulation Some Header....0....1....2....3 $("div.contents").remove(); Expect result: remove div class=“content” Some Header

30. $(“div.contents”).find( expr ) Manipulation /Traversing/find $(“div.contents”). find(“span”).css(‘color’,’red’); Write less, do more 1 Jquery Traveling method find Searches for all elements that match the specified expression Expect result: Find tag span in div.contents and apply css color.

31. API-CSS css( name ) return a style property on the first matched element. css(properties) Set a key/value object as style properties to all matched elements. css(name,value) Set a single style property to a value on all matched elements.

32. $(“div.contents”).css(name) CSS div.contents { background:red; font-size:0.8em; } Some Header....0....1....2....3 var color= $("div.contents").css("background-color"); Expect result: get value css “background” in div class contents var color= $("div.contents").css("background- color");

33. $(“div.contents”).css(name,value) CSS div.contents { background:red; font-size:0.8em; } Some Header....0....1....2....3 $("div.contents").css( { 'background-color' : 'yellow'} ); Expect result: set value css “background” equal yellow in div class contents $("div.contents").css( { 'background-color' : 'yellow'} ); tip.. Can set one more properties in use once.

34. $(“div.contents”).css(properties) CSS div.contents { background:red; font-size:0.8em; } Some Header....0....1....2....3 $("div.contents").css("background-color","green"); Expect result: set value css “background” equal green in div class contents $("div.contents").css("background- color","green");

35. API-Events bind( type, data, fn ) Binds a handler to one or more events (like click) for each matched element. Can also bind custom events. Possible event values: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,mouseleave,change,select,submit, keydown, keypress, keyup, error hover( over, out ) Simulates hovering (moving the mouse on, and off, an object)

36. $(“p”). bind( type, [data], fn ) Events/bind Some Header....0....1 $(document).ready(function(){ $("p").bind("click dblclick", function(e){ $(this).toggleClass("over"); }); Expect Result: All p elements toggle class “over” and bind events “click” and dblclick. Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.

37. Events/hover Some Header....0....1 $(document).ready(function(){ $("p").hover( function(e){ $(this).toggleClass("over"); }); Expect Result: All p elements toggle class “over” when mouse on object. on mouse over apply css and on mouse off apply css $(“p”).hover ( type, [data], fn ) Simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.

38. API-Effects show() show(speed,callback) hide() hide( speed, callback) toggle() fadeIn(speed, callback), fadeOut(speed, callback) fadeTo( speed, opacity, callback )

39. Effects/show.hide{display:none;} Some Header....0....1....2....3 $(document).ready(function(){ $("div.contents>p:eq(0)").show(); }); Expect Result: p elements index 0 will be display. $(“p”).show() Displays each of the set of matched elements if they are hidden.

40. Effects/show.hide{display:none;} Some Header....0....1....2....3 $(document).ready(function(){ $("div.contents>p:eq(0)").hide(); }); Expect Result: p elements index 0 will be hide. $(“p”).hide() Hides each of the set of matched elements if they are shown.

41. Effects/fadeIn....0....1....2....3 Click.... 4 $(document).ready(function(){ $("div.contents>p:eq(4)").click( function(){ $("div.contents>p:eq(0)").fadeIn("slow"); }); }); Expect Result: p elements index 0 will be fade in $(“p”).fadeIn(second) Fade in all matched elements by adjusting their opacity.

42. Effects/fadeOut....0....1....2....3 Click.... 4 $(document).ready(function(){ $("div.contents>p:eq(4)").click( function(){ $("div.contents>p:eq(0)").fadeOut("slow"); }); Expect Result: p elements index 0 will be fade out $(“p”).fadeOut(second) Fade out all matched elements by adjusting their opacity.

43. More info http://jquery.com http://docs.jquery.com/ http:// jquery.com/discuss / http://visualjquery.com/ http://ui.jquery.com/

44. Plugins Drag and Drop Sortables Tabbed Navigation Sortable Tables And hundreds more... http://jquery.com/plugins

45. Javascript Venda Styles Venda.Ebiz.Productdetail.messagefadein = function(){ var message = “ Please select a Colour and Size before adding an item to bag ”; $("div#alertmessage").html(message); $("div#alertmessage").fadeIn("slow"); }

46. jquery.com Thank You Comments/Questions are welcome