2. Agenda
• Basics of Jquery
• Javascript vs Jquery
• Why to use Jquery
• Concept of Jquery
• Overview of jquery API
• Jquery pros and cons
• Jquery programs
• Conclusion
3. What exactly is jQuery
jQuery is a JavaScript Library!
• Dealing with the DOM
• JavaScript Events
• Animations
• Ajax interactions
4. jQuery Basics
jQuery()
This function is the heart of the jQuery library
You use this function to fetch elements using CSS
selectors
and wrap them in jQuery objects so we can
manipulate
them
There’s a shorter version of the jQuery() function: $()
$("h1");
$(".important");
7. JavaScript is a weakly typed,
classless, prototype based OO
language, that can also be used
outside the browser. It is not a
browser DOM.
8. It means no more of this
var tables = document.getElementsByTagName("table");
for (vart = 0; t<tables.length; t++) {
var rows = tables[t].getElementsByTagName("tr");
for (vari = 1; i<rows.length; i += 2) {
if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
rows[i].className += " odd";
}
}
};
9. Using jQuery we can do this
$("tabletr:nth-child(odd)").addClass("odd");
10. Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery function
11. Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery Selector (CSS expression)
jQuery function
12. Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery Selector (CSS expression)
jQuery function
jQuery Wrapper Set
13. Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery Selector (CSS expression)
jQuery function
jQuery Wrapper Set jQuery Method
14. It really is the
“write less, do more”
JavaScript Library!
15. Why use jQuery
• Helps us to simplify and speed up web
development
• Allows us to avoid common headaches
associated with browser development
• Provides a large pool of plugins
• Large and active community
• Tested on 50 browsers, 11 platforms
• Its for both coders and designers
17. The Magic $() function
var el = $(“<div/>”)
Create HTML elements on the fly
18. The Magic $() function
$(window).width()
Manipulate existing DOM elements
19. The Magic $() function
$(“div”).hide();
$(“div”, $(“p”)).hide();
Selects document elements
(more in a moment…)
20. The Magic $() function
$(function(){…});
Fired when the document is ready for
programming.
Better use the full syntax:
$(document).ready(function(){…});
22. Almost every function returns
jQuery, which provides a fluent
programming interface and
chainability:
$(“div”).show()
.addClass(“main”)
.html(“Hello jQuery”);
39. Pros:
• Large Community
• Ease of use
• Large library
• Strong opensource community. (Several
jQuery plugins available)
• Great documentation and tutorials
• Ajax support
40. Cons:
• Regular updates that change existing behaviour
• Overhead of adding extra javascript to page
• Learning curve may not be short for some developers
Conclusions:
• Conclusion In the end, jquery is popular for a reason. It will
make your website easier to control and to access through any
browser.
• By using this library, you can create or include complex plug-
ins in a matter of minutes. This will make your website easier to
use and as long as you have imagination, the possibilities are
endless.