JQuery

1. JQuery March 09th,2009 homey110@hotmail.comwww.thaiddt.com Create by Kritr@th.venda.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 witheasy-to-use, cross-browser userinterface JavaScript libraries to makeyour 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. Selectors $(“div#contents”) • <div id=”body”> • <h2>Some Header</h2> • <div id=”contents”> • <p>....</p> • <p>....</p> • </div> • </div>

8. Selectors $(“div.contents”) • <div id=”body”> • <h2>Some Header</h2> • <div class=”contents”> • <p>....</p> • <p>....</p> • </div> • </div>

9. Selectors $(“div.contents > div”) • <div id=”body”> • <h2>Some Header</h2> • <div class=”contents”> • <p>....</p> • <p>....</p> • <div>....</div> • </div> • </div>

10. Selectors $(“div#contents > p:first”) • <div id="body"> • <div id="contents"> • <div>.....</div> • <p>.....</p> • <div>.....</div> • <p>.....</p> • </div> • </div>

11. Selectors $(“div#contents > p:last”) • <div id="body"> • <div id="contents"> • <div>.....</div> • <p>.....</p> • <div>.....</div> • <p>.....</p> • </div> • </div>

12. Selectors $(“div#contents > p:even”) • <div id="body"> • <div id="contents"> • <p>.....</p> • <p>.....</p> • <p>.....</p> • <p>.....</p> • </div> • </div>

13. Selectors $(“div#contents > p:odd”) • <div id="body"> • <div id="contents"> • <p>.....</p> • <p>.....</p> • <p>.....</p> • <p>.....</p> • </div> • </div>

14. Selectors $(“div#contents > p:eq(index)”) • <div id="body"> • <div id="contents"> • <p>.....0</p> • <p>.....1</p> • <p>.....2</p> • <p>.....3</p> • </div> • </div>

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 attr(name) $("a").attr("title") <div id="contents"> <a href=“#” title="Buy Now">Buy SKU 001 </a> <p>.....</p> <p>.....</p> <p>.....</p> </div> </div> <script> $(document).ready(function(){ var title= $("a").attr("title"); alert( title + " No.1"); }); </script> Expect result: get value attribute from HTMLequal “Buy Now”

17. Attributes attr(name) $("div#contents > a").attr("title") • <div id="body"> • <div id="contents"> • <a href=“#” title=“Buy Now”>Buy SKU 001 </a> • <p>.....</p> • <p>.....</p> • <p>.....</p> • </div> • </div> <script> $(document).ready(function(){ var title= $("div#contents > a").attr("title"); alert(title); }); </script> Expect result: get value attributes from HTML

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

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

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

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

22. Attributes/addClass $(“p”).hasClass(class) Returns true if the specified class is present on at least one of the set of matched elements. <div> <p>write less , do more :1</p> <p class=“selected”>write less , do more :2</p> <p>write less , do more :3</p> </div><script> $(document).ready(function(){ $(“p:last").hasClass("selected"); }); </script> Expect Result:p last elements has class “selected” return true; 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. Manipulation $(“div.contents”).html(val) <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>....0</p> <p>....1</p> <p>....2</p> <p>....3</p> </div> </div> <script> $(document).ready(function(){ var html_code="<h1>We've have got power</h1>"; $("div.contents").html(html_code); }); </script> Expect Result:InnerHTML to div class=“contents” <h1>We've have got power</h1>

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

26. Manipulation $(“div.contents”).append(val) $("div.contents").append("<h1>Venda Production</h1>"); <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>....0</p> <p>....1</p> <p>....2</p> <p>....3</p> </div> </div> Expect Result:append content in to inside the end elements. <p>....0</p> <p>....1</p> <p>....2</p> <p>....3</p> <h1>Venda Production</h1>

27. Manipulation $(“div.contents”).after(val) $("div.contents").after("<h1>Venda Production</h1>"); <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>....0</p> <p>....1</p> <p>....2</p> <p>....3</p> </div> </div> Expect result:insert content after div class=“content” <div class="contents"> …. ….. </div><h1>Venda Production</h1>

28. Manipulation $(“div.contents”).before(val) $("div.contents").before("<h1>Venda Production</h1>"); <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>....0</p> <p>....1</p> <p>....2</p> <p>....3</p> </div> </div> Expect result:insert content before div class=“content”<h1>Venda Production</h1> <div class="contents"> …. ….. </div>

29. Manipulation $(“div.contents”).remove(val) $("div.contents").remove(); <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>....0</p> <p>....1</p> <p>....2</p> <p>....3</p> </div> </div> Expect result:remove div class=“content” <div id="body"> <h2>Some Header</h2> </div>

30. Manipulation /Traversing/find $(“div.contents”).find(expr) $(“div.contents”). find(“span”).css(‘color’,’red’); <div id=“body”> <div class=“contents”> <p>Write less , do more 1 </p> <span>Jquery Traveling method find</span> </div> </div> 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. CSS $(“div.contents”).css(name) var color= $("div.contents").css("background-color"); <style> div.contents { background:red; font-size:0.8em; } </style> <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>....0</p> <p>....1</p> <p>....2</p> <p>....3</p> </div> </div> Expect result:get value css “background” in div class contents var color= $("div.contents").css("background-color");

33. CSS $(“div.contents”).css(name,value) $("div.contents").css( { 'background-color' : 'yellow'} ); <style> div.contents { background:red; font-size:0.8em; } </style> <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>....0</p> <p>....1</p> <p>....2</p> <p>....3</p> </div> </div> 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. CSS $(“div.contents”).css(properties) $("div.contents").css("background-color","green"); <style> div.contents { background:red; font-size:0.8em; } </style> <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>....0</p> <p>....1</p> <p>....2</p> <p>....3</p> </div> </div> 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. Events/bind $(“p”). bind( type, [data], fn ) Binds a handler to one or more events (like click) for each matched element. Can also bind custom events. <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>....0</p> <p>....1</p> </div> </div><script> $(document).ready(function(){ $("p").bind("click dblclick", function(e){ $(this).toggleClass("over"); }); }); </script> Expect Result:All p elements toggle class “over” and bind events “click” and dblclick.

37. Events/hover $(“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. <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>....0</p> <p>....1</p> </div> </div><script> $(document).ready(function(){ $("p").hover( function(e){ $(this).toggleClass("over"); }); }); </script> Expect Result:All p elements toggle class “over” when mouse on object. on mouse over apply css and on mouse off apply css

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 $(“p”).show() Displays each of the set of matched elements if they are hidden. <style>.hide{display:none;}</style> <div id="body"> <h2>Some Header</h2> <div class="contents"> <p class="hide">....0</p> <p>....1</p> <p>....2</p> <p>....3</p> </div> </div> <script> $(document).ready(function(){ $("div.contents>p:eq(0)").show(); }); </script> Expect Result:p elements index 0 will be display.

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

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

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

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 = “<span>Please select a Colour and Size before adding an item to bag</span> ”; $("div#alertmessage").html(message); $("div#alertmessage").fadeIn("slow"); }

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