1 / 46

JQuery

JQuery. March 09 th ,2009. homey110@hotmail.com www.thaiddt.com. Create by Kritr@th.venda.com. What is jQuery ?. New type of JavaScript library.

rhonda
Download Presentation

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

More Related