jQuery (Write Less, Do More)

• 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()