Published on

Make website More impressive and effective with jquery. Easy to use, fast and effective

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 2. What is jQuery <ul><li>JQuery is great library for developing ajax based application. jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications. You can use jQuery to develop cool web 2.0 applications. jQuery helps the programmers to keep code simple and concise. The jQuery library is designed to keep the things very simple and reusable. </li></ul><ul><li>JQuery library simplifies the process of traversal of HTML DOM tree. You can use jQuery to handle events, perform animation, and add the ajax support into your web applications with ease. </li></ul>
  2. 3. Why jQuery? <ul><li>You can use simple JavaScript to perform all the functions that jQuery provides. Then why jQuery? The jQuery library is providing many easy to use functions and methods to make rich applications. These functions are very easy to learn. Due to these features jQuery is very popular and in high demand among the developers. You can use jQuery in all the web based applications irrespective of the technology. </li></ul>
  3. 4. Here are the features of jQuery <ul><li>Supports All Versions of CSS </li></ul><ul><li>Supports Events and Utilities </li></ul><ul><li>Works with Ajax </li></ul><ul><li>Creates Usability, Effects and Animations </li></ul><ul><li>Works in all Popular Internet Browsers </li></ul><ul><li>Small File Size </li></ul><ul><li>Can combine with Prototype </li></ul><ul><li>Can work with Other Coding Languges </li></ul>
  4. 5. What can you do with jQuery? <ul><li>jQuery makes it easy to write powerful JavaScript apps and create eye-catching animated effects rivalling those of Flash movies. Amongst other things, jQuery is great for: </li></ul><ul><li>Adding animated effects to elements. jQuery lets you easily add effects such as fading in/out, sliding in/out, and expanding/contracting. </li></ul><ul><li>Making XML (Ajax) requests. These use JavaScript to request additional data from the Web server without having to reload the page. </li></ul><ul><li>Continue…. </li></ul>
  5. 6. <ul><li>Manipulating the DOM . You can easily add, remove, and reorder content in the Web page using just a couple of lines of code. </li></ul><ul><li>Creating image slideshows. You can use jQuery effects to build nice animated slideshows and lightboxes. </li></ul><ul><li>Making drop-down menus. jQuery makes it easy to create multi-level dropdowns with animations. </li></ul><ul><li>Creating drag-and-drop interfaces. Use jQuery to build a page with elements that can be repositioned or reordered simply by dragging and dropping. </li></ul><ul><li>Adding power to forms. With jQuery you can easily add complex client-side form validation, create auto-complete Ajax text fields that pull data from a server-side database, and so on. </li></ul>
  6. 7. It’s just a single line in jQuery $(“#content”).load(“page.html #content”);
  7. 8. Who’s using jQuery? http:// docs.jquery.com/Sites_Using_jQuery
  8. 9. Embed in you page <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script src=“ path/to/jquery-x.x.js &quot;></script> </li></ul><ul><li></head> </li></ul><ul><li><body> … </body> </li></ul><ul><li></html> </li></ul>
  9. 10. Embed in you page <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script src=&quot; path/to/jquery-x.x.js &quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>// Start here </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> … </body> </li></ul><ul><li></html> </li></ul>
  10. 11. jQuery Plugins <ul><li>jQuery lightBox </li></ul>
  11. 12. jQuery Plugins <ul><li>Slider Plugins </li></ul>
  12. 13. A Navigation Menu Unordered List with anchors and nested lists, also demonstrates how to add a second level list.
  13. 14. Tab Container Theme JQuery style fade animation that runs as the user navigates between selected tabs.
  14. 15. Live Examples http:// www.resumeparser.us http:// www.eginni.com / http://www.3dlogoonline.com/
  15. 16. THANK YOU Payal Gupta web designer