jQuery<br />is a new kind of JavaScript Library<br />
jQuery : is a new kind of JavaScript Library<br />jQuery :is a fast and concise JavaScript Library that simplifies HTML do...
Created by John Resig<br />Open source<br />MIT and GPL license<br />Cross-browser compatible<br />Internet Explorer 6+, F...
What jQuery Does<br />Access parts of a page.<br />Modify the appearance of a page.<br />Alter the content of a page.<br /...
Download jQuery<br />http://docs.jquery.com/Downloading_jQuery<br />
jQuery API Reference <br />jQuery Core <br />Selectors <br />Attributes <br />Traversing <br />Manipulation <br />CSS <br ...
jQuery & ASP.NET<br />
Different types of web applications<br />ASP.NET Server-Side<br />Pages are created on the server and updated through post...
jQuery & ASP.NET<br />Microsoft AJAX Content Delivery Network<br />Ajax Control Toolkit<br />
JavaScript: The Good Parts<br />http://docs.jquery.com<br />http://encosia.com<br />
Selectors<br />http://docs.jquery.com/Selectors<br />
Basics:<br />$(“#firstName”)  <br />Selects element with Id firstName<br />$(”*")<br />Select all elements.<br />$(“div,sp...
Basic Filters:<br />$("tr:first")<br />Finds the first table row.<br />$("input:not(:checked) + span")<br />Finds all inpu...
Other  <br />Attribute Filters:<br />$("div[id]")<br />$("input[name='newsletter']")<br />Child Filters:<br />$("div span:...
Effects<br />http://docs.jquery.com/Effects<br />
Basics:<br />show( speed, [callback] ) <br />$("p").show("slow“)<br />hide( speed, [callback] ) <br />$("p").hide("slow");...
Sliding:<br />slideDown( speed, [callback] ) <br />$("div").slideDown("slow"); <br />slideUp( speed, [callback] ) <br />$(...
Fading:<br />fadeIn( speed, [callback] ) <br />$("div").fadeIn("slow"); <br />fadeOut( speed, [callback] ) <br />$("div")....
Events<br />http://docs.jquery.com/Events<br />
ready<br />ready( fn )<br />$(document).ready(function () { $("p").<br />text("The DOM is now loaded and can be manipulate...
Event Handling:<br />bind( type, data, fn )<br />one( type, data, fn )<br />trigger( event, data )<br />triggerHandler( ev...
Interaction Helpers:<br />hover( over, out )<br />toggle( fn, fn2, fn3,fn4,... )<br />
Event Helpers:<br />blur( fn )<br />change( fn )<br />click( fn )<br />dblclick( fn )<br />focus( fn )<br />…………………<br />
live( type, fn )<br />Possible event values:click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, ...
AJAX<br />
jQuery.ajax( options )<br />Options:<br />Success<br />function (data, textStatus) <br />Complete<br />function (XMLHttpRe...
jQuery
Upcoming SlideShare
Loading in …5
×

jQuery

1,058 views
987 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,058
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery

  1. 1. jQuery<br />is a new kind of JavaScript Library<br />
  2. 2. jQuery : is a new kind of JavaScript Library<br />jQuery :is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript<br />
  3. 3. Created by John Resig<br />Open source<br />MIT and GPL license<br />Cross-browser compatible<br />Internet Explorer 6+, Firefox 2+, Opera 9+, and Safari 2+<br />Current Release:<br />V 1.6.1<br />Lightweight Footprint<br />CSS3 Compliant<br />jQuery Overview<br />
  4. 4. What jQuery Does<br />Access parts of a page.<br />Modify the appearance of a page.<br />Alter the content of a page.<br />Respond to a user's interaction with a page.<br />Add animation to a page.<br />Retrieve information from a server without refreshing a page (AJAX).<br />Simplify common JavaScript tasks.<br />
  5. 5. Download jQuery<br />http://docs.jquery.com/Downloading_jQuery<br />
  6. 6. jQuery API Reference <br />jQuery Core <br />Selectors <br />Attributes <br />Traversing <br />Manipulation <br />CSS <br />Events <br />Effects <br />Ajax <br />Utilities <br />jQuery UI<br />
  7. 7. jQuery & ASP.NET<br />
  8. 8. Different types of web applications<br />ASP.NET Server-Side<br />Pages are created on the server and updated through postbacks<br />ASP.NET AJAH<br />Pages created on the server and updated through AJAX requests for HTML <br />ASP.NET AJAX<br />Pages are created on the client and updated through Ajax requests for JSON<br />
  9. 9. jQuery & ASP.NET<br />Microsoft AJAX Content Delivery Network<br />Ajax Control Toolkit<br />
  10. 10. JavaScript: The Good Parts<br />http://docs.jquery.com<br />http://encosia.com<br />
  11. 11. Selectors<br />http://docs.jquery.com/Selectors<br />
  12. 12. Basics:<br />$(“#firstName”) <br />Selects element with Id firstName<br />$(”*")<br />Select all elements.<br />$(“div,span”)<br />Selects Div AND Span element<br />
  13. 13. Basic Filters:<br />$("tr:first")<br />Finds the first table row.<br />$("input:not(:checked) + span")<br />Finds all inputs that are not checked and Select the next sibling span<br />$("tr:even")<br />Finds even table rows <br />
  14. 14. Other <br />Attribute Filters:<br />$("div[id]")<br />$("input[name='newsletter']")<br />Child Filters:<br />$("div span:first-child")<br />Forms:<br />$(":input");<br />Form Filters:<br />$("input:enabled")<br />
  15. 15. Effects<br />http://docs.jquery.com/Effects<br />
  16. 16. Basics:<br />show( speed, [callback] ) <br />$("p").show("slow“)<br />hide( speed, [callback] ) <br />$("p").hide("slow"); <br />toggle( speed, [callback] ) <br />$("p").toggle("slow"); <br />
  17. 17. Sliding:<br />slideDown( speed, [callback] ) <br />$("div").slideDown("slow"); <br />slideUp( speed, [callback] ) <br />$("div").slideUp(); <br />slideToggle( speed, [callback] ) <br />$("p").slideToggle("slow"); <br />
  18. 18. Fading:<br />fadeIn( speed, [callback] ) <br />$("div").fadeIn("slow"); <br />fadeOut( speed, [callback] ) <br />$("div").fadeOut(); <br />fadeTo( speed, opacity, [callback] ) <br />$(this).fadeTo("slow", 0.33); <br />
  19. 19. Events<br />http://docs.jquery.com/Events<br />
  20. 20. ready<br />ready( fn )<br />$(document).ready(function () { $("p").<br />text("The DOM is now loaded and can be manipulated."); <br />});<br />
  21. 21. Event Handling:<br />bind( type, data, fn )<br />one( type, data, fn )<br />trigger( event, data )<br />triggerHandler( event, data )<br />unbind( type, fn )<br />
  22. 22. Interaction Helpers:<br />hover( over, out )<br />toggle( fn, fn2, fn3,fn4,... )<br />
  23. 23. Event Helpers:<br />blur( fn )<br />change( fn )<br />click( fn )<br />dblclick( fn )<br />focus( fn )<br />…………………<br />
  24. 24. live( type, fn )<br />Possible event values:click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup<br />This method works and behaves bind<br />important distinction: When you bind a "live" event it will bind to all current and future elements on the page<br />
  25. 25. AJAX<br />
  26. 26. jQuery.ajax( options )<br />Options:<br />Success<br />function (data, textStatus) <br />Complete<br />function (XMLHttpRequest, textStatus) <br />Data<br />{foo:["bar1", "bar2"]}<br />Error<br />function (XMLHttpRequest, textStatus, errorThrown) <br />

×