Embed Size (px)
Citation preview
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.
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();
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.
Who uses jQuery? • IBM • BBC
• Google • SourceForge
• Amazon • Intuit
• AOL • Salesforce
• Technorati • FeedBurner
• Drupal • WB Records
• Wordpress • Linux.com
• Digg • many others...
jQuery API Reference•Selectors •Attributes •Manipulation •CSS •Events •Effects
$(“div#contents”) Selectors
<div id=”body”> <h2>Some Header</h2> <div id=”contents”>
<p>....</p> <p>....</p>
</div> </div>
$(“div.contents”) Selectors
<div id=”body”> <h2>Some Header</h2> <div class=”contents”>
<p>....</p> <p>....</p>
</div> </div>
$(“div.contents > div”) Selectors
<div id=”body”> <h2>Some Header</h2> <div class=”contents”>
<p>....</p> <p>....</p><div>....</div>
</div> </div>
$(“div#contents > p:first”) Selectors
<div id="body"><div id="contents">
<div>.....</div><p>.....</p><div>.....</div><p>.....</p>
</div></div>
$(“div#contents > p:last”) Selectors
<div id="body"><div id="contents">
<div>.....</div><p>.....</p><div>.....</div><p>.....</p>
</div></div>
$(“div#contents > p:even”)
Selectors
<div id="body"><div id="contents">
<p>.....</p><p>.....</p><p>.....</p><p>.....</p>
</div></div>
$(“div#contents > p:odd”)
Selectors
<div id="body"><div id="contents">
<p>.....</p><p>.....</p><p>.....</p><p>.....</p>
</div></div>
$(“div#contents > p:eq(index)”) Selectors
<div id="body"><div id="contents">
<p>.....0</p><p>.....1</p><p>.....2</p><p>.....3</p>
</div></div>
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.
Attributes
<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”
attr(name)$("a").attr("title")
Attributes
<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
attr(name)$("div#contents > a").attr("title")
Attributes
<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”
attr( key, value)$("div#contents > a").attr("title","Add to Basket")
$(“p”).addClass(class)
Attributes/addClass
<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;
Adds the specified class(es) to each of the set of matched elements.
http://docs.jquery.com/Attributes/addClass#class
$(“p”).toggleClass( class )
Attributes/toggleClass
<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;
Adds the specified class if it is not present, removes the specified class if it is present.
http://docs.jquery.com/Attributes/toggleClass#class
$(“p”).removeClass(class)Attributes/removeClass
<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;
Remove the specified class(es) to each of the set of matched elements.
http://docs.jquery.com/Attributes/addClass#class
$(“p”).hasClass(class)
Attributes/addClass
<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;
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
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.
$(“div.contents”).html(val) Manipulation
Expect Result:InnerHTML to div class=“contents”<h1>We've have got power</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><script>$(document).ready(function(){
var html_code="<h1>We've have got power</h1>"; $("div.contents").html(html_code);
}); </script>
$(“div.contents”).html() Manipulation
Expect Result:get InnerHTML class=“contents”
<p>....0</p> <p>....1</p>
<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)
$(“div.contents”).append(val) Manipulation
$("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>
$(“div.contents”).after(val)
Manipulation
$("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>
$(“div.contents”).before(val)
Manipulation
$("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>
$(“div.contents”).remove(val)
Manipulation
<div id="body"> <h2>Some Header</h2> <div class="contents">
<p>....0</p> <p>....1</p> <p>....2</p> <p>....3</p>
</div></div>
$("div.contents").remove();
Expect result:remove div class=“content”<div id="body"> <h2>Some Header</h2></div>
$(“div.contents”).find(expr ) Manipulation /Traversing/find
$(“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 expressionExpect result:Find tag span in div.contents and apply css color.
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.
$(“div.contents”).css(name) CSS
<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>
var color= $("div.contents").css("background-color");
Expect result:get value css “background” in div class contentsvar color= $("div.contents").css("background-color");
$(“div.contents”).css(name,value) CSS
<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>
$("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.
$(“div.contents”).css(properties) CSS
<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>
$("div.contents").css("background-color","green");
Expect result:set value css “background” equal green in div class contents$("div.contents").css("background-color","green");
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)
$(“p”). bind( type, [data], fn )
Events/bind
<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.
Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.
Events/hover
<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
$(“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.
API-Effects• show()• show(speed,callback)• hide() • hide( speed, callback) • toggle() • fadeIn(speed, callback),• fadeOut(speed, callback)• fadeTo( speed, opacity, callback )
Effects/show
<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.
$(“p”).show()Displays each of the set of matched elements if they are hidden.
Effects/show
<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.
$(“p”).hide()Hides each of the set of matched elements if they are shown.
Effects/fadeIn
<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
$(“p”).fadeIn(second)Fade in all matched elements by adjusting their opacity.
Effects/fadeOut
<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
$(“p”).fadeOut(second)Fade out all matched elements by adjusting their opacity.
More info• http://jquery.com
• http://docs.jquery.com/
• http://jquery.com/discuss/
• http://visualjquery.com/
• http://ui.jquery.com/
Plugins • Drag and
Drop •
Sortables •Tabbed Navigation
• Sortable Tables
• And hundreds
more...
•
http://jquery.com/plu
gins
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");
}
jquery.com
Thank You
Comments/Questions are welcome
![jQuery Fundamentals · jQuery Fundamentals Rebecca Murphey [] jQuery Fundamentals Rebecca Murphey [] Copyright © 2010](https://img.pdfslide.us/doc/110x75/5eb897bf41e49d450f44be28/jquery-fundamentals-jquery-fundamentals-rebecca-murphey-jquery-fundamentals.jpg)
![jQuery, eCSStender & you [jQuery Summit 2010]](https://img.pdfslide.us/doc/110x75/54c70c894a7959e62f8b461d/jquery-ecsstender-you-jquery-summit-2010.jpg)
