1. Presentation On JQuery
Prepared
By
Rahul Jain
Lexcis Solution

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");

5. Document Ready
$(document).ready(function(){
// Your code here
});
jQuery has a simple statement that
checks the
document and waits until it's ready
to be manipulated

6. What’s the problem with
JavaScript?

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

16. Three Major Concepts of jQuery
The $() function
Get > Act
Chainability

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(){…});

21. jQuery’s programming philosophy
is:
GET >> ACT
$(“div”).hide()
$(“<span/>”).appendTo(“body”)
$(“:button”).click()

22. Almost every function returns
jQuery, which provides a fluent
programming interface and
chainability:
$(“div”).show()
.addClass(“main”)
.html(“Hello jQuery”);

23. Overview of jQuery API
 Core
 Selectors
 Attributes
 Traversing
 Manipulation
 CSS
 Events
 Effects
 Ajax
 Utilities

24. Overview of jQuery API
 Core
 Selectors
jQuery()
 Attributes each()
 Traversing map()
size()
 Manipulation length
selector
CSS
context
 index()
get()
 Events
 Effects
 Ajax
 Utilities

25. Overview of jQuery API
 Core
 Selectors jQuery("#nav li.contact")
 Attributes jQuery(":visible")
Traversing
jQuery(":radio:enabled:checked")

jQuery("a[title]")
 Manipulation
jQuery("a[title][href='foo']")
 CSS jQuery("a:first[href*='foo']")
 Events jQuery("#header, #footer")
 Effects jQuery("#header, #footer").filter(":visible")
 Ajax
 Utilities

26. Overview of jQuery API
 Core
 Selectors attr()
removeAttr()
 Attributes addClass()
 Traversing hasClass()
toggleClass()
 Manipulation removeClass()
 CSS val()
 Events
 Effects
 Ajax
 Utilities

27. Overview of jQuery API
 Core
 Selectors add()
children()
eq()
filter()
 Attributes closest()
find()
is()
not()
 Traversing next()
nextAll()
slice()
 Manipulation prev()
prevAll()
 CSS siblings()
 Events parent()
parents()
 Effects
andSelf()
 Ajax end()
 Utilities

28. Overview of jQuery API
 Core
 Selectors html()
text()
replaceWith()
replaceAll()
 Attributes append() empty()
 Traversing appendTo() remove()
prepend()
 Manipulation prependTo() clone()
 CSS after()
insertAfter()
 Events before()
insertBefore()
 Effects
Ajax
wrap()
 wrapAll()
 Utilities wrapInner()

29. Overview of jQuery API
 Core
 Selectors css()
 Attributes offset()
offsetParent()
 Traversing postion()
scrollTop()
 Manipulation scrollLeft()
 CSS height()
width()
 Events innerHeight()
innerWidth()
 Effects outerHeight()
outerWidth()
 Ajax
 Utilities

30. Overview of jQuery API
 Core
 Selectors ready() blur()
change()
 Attributes bind()
one()
click()
dbclick()
Traversing
trigger() error()
 triggerHandler() focus()
unbind() keydown()
 Manipulation keypress()
live() keyup()
 CSS die() mousedown()
mousenter()
 Events hover()
toggle()
mouseleave()
mouseout()
 Effects mouseup()
resize()
 Ajax scroll()
select()
submit()
 Utilities unload()

31. Overview of jQuery API
 Core
 Selectors show()
hide()
 Attributes toggle()
 Traversing slideDown()
slideUp()
 Manipulation slideToggle()
 CSS fadeIn()
fadeOut()
 Events fadeTo()
 Effects animate()
stop()
 Ajax
 Utilities

32. Overview of jQuery API
 Core
Selectors jQuery.ajax() jQuery.ajaxSetup()
 jQuery.get() serialize()
 Attributes jQuery.getJSON()
jQuery,getScript()
serializeArray()
 Traversing jQuery.post()
 Manipulation load()
 CSS ajaxComplete()
ajaxError()
 Events ajaxSend()
ajaxStart()
 Effects ajaxStop()
ajaxSuccess()
 Ajax
 Utilities

33. Overview of jQuery API
 Core
 Selectors jQuery.support
jQuery.boxModel
jQuery.trim()
 Attributes jQuery.each(),
jQuery.param()
 Traversing jQuery.extend(),
jQuery.grep(),
 Manipulation jQuery.makeArray(),
jQuery.map(),
 CSS jQuery.inArray(),
jQuery.merge(),
 Events jQuery.unique()
 Effects jQuery.isArray(),
jQuery,isFunction()
 Ajax
 Utilities

34. A Few Examples
 Forms
 Chatboxes
 Menus
 Dropdowns
 Sliders
 Tabs
 Slideshows
 Games

35. jQuery Enhanced Forms

36. Menus and Dropdowns

37. Sliders and Slideshows

38. Technical Implementation
Building Real-Time Form Validation
Using 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.

42. Thank You