- Its an open source, lightweight java script library
- Write Less, Do More is official tag line of jQuery, which is accruate and excellent description of jQuery.
- It is a collection of reusable code that handles the most common and most tedious tasks smoothly and easily.
- HTML document manipulation and traversing
- Browser event handling
- AJAX interactions
- Cross-Browser java script development
- Extensive plugin library available
- Great community support
Basic Syntax:
- $(selector).action();
- $("button").click(function() {...}); // selecting the required elements upon which
- $(document).ready() or $();
different selectors in jQuery
- $("*") -All selector - It selects all the html elements including body element
- $("p") -Tag selector - All paragraph elements are slected
- $("button, p") - multiple selector
- $("#btnFirst") - ID selector
- $(".btnclass") - class selector
- $(this) - the current element
Attribute based selectors
- $("[class]") - All the elements that have class attribute
- $("[id=firstDiv]") - Elements that have id attribute as firstDiv value
- $("[id^=firstDiv]") - Elements that have id attribute starts with firstDiv
- $("[id$=firstDiv]") - Elements that have id attribute ends with firstDiv
- $("[id*=first]") - Elements that contains value first in attribute value
- $("[id|=first]") - Attribute value is first OR starts with first-
- $("[id~=first]") - Attribute value is first OR starts with first
Position based selectors: first, last, odd, even
- $("p:first") - First paragraph
- $("p:eq(3)") - 3rd element is selected //lt & gt also can be used
Relation based selectors:
- $("p:first-child") - paragraphs which are first-child of its parent
p:firstchild - All paragraphs which are first child of its parent
span:lastchild - Span that is last child of its parent
$("span:nth-child(2)).hide(2000) - span that is 2nd child of its parent
$("span:nth-last-child(2)).hide(2000) - span that is 2nd child from the last for a parent
$("p:first-of-type") - First paragraph of its parent
$("p:nth-of-type(2)") - First paragraph of its parent
$("p:only-child") - paragraph which is only child of element
$("p:only-of-type") - Element which is only paragraph type child of element
Child and sibling selectors:
_________________________
Child Selectors
Direct child selector -
$("div>span") - Span elements that are direct child of div
$("div span") - Span elements that are direct/indirect child of div
Descendent selector
Sibling selectors
Adjacent sibling selector
$("p+span") - Span elements that are adjacent(sibling) to P element
General sibling selector
$("p~span") - All the span elements that are sibling of P element
Form based selectors
$(":input")- All input type elements
$(":text")- All input type TEXT elements
$(":password")-
$(":input")- All input type elements
State based selectors
$(":hidden").show(2000) - show all hide
$(":visible").hide(2000) -
Similarly :enabled, :disabled, :selected, :checked, :animated
Content based selectors:
$(":contains(First)") - All elements that contain First
$("span:has(div)") - All span elements that has div as child
$(":empty") - Element that doesn't have a child or a Text node
$(":parent") - Elements that have either child or a text node
$(":not(:parent)")
Events
Any action that happens on web page can be considered as Event.
Types of Events:
System initiated event
User initiated event
Mouse Events:
$("#box").click(), $("#box").dblclick()
$("#box").mouseenter(), $("#box").mouseleave()
$("#box").hover(),
$("#box").mousedown(), $("#box").mouseup()
Keyboard events:
$("#txt").keydown(), $("#txt").keyup(),
$("#txt").keydown(), $("#txt").keyup(),
$("#txt").keydown(), $("#txt").keyup(),
$("#txt").keydown(), $("#txt").keyup(),
Form events:
$(":text").focus(), $(":text").blur()
$(":text").focusin(), $(":text").focusout() //when either element or its child gets focus
$("form").submit()
