Jquery

small,fast and feature rich javascript liberary..

included in single .js file
increase propductivity.
jquery have set functions using which you can accomplish tasks.

JQuery features

DOM Selection:selectors --tagname,id ,css class attribute name,value,nth child in

hirarchy..

Dom manipulation:Functions. removing ,adding,modifying html content,css class

Special effects;- Effects on Dom Elements,show,hide,fade-in,fade-out sliding
effect,animation.

Events:Include functions That are equalint to DOM Events.

click,dblclick,mouseenter,mouseleave,blur,keyup,keydown,Events handles auto Cross
Browser support
Ajax. include easy ajax function without reloading page.
Advantages:Easy To Learn
write less do more
cross browser suport,
unrobustive,

Jquery Environment Setup:

use javascript editor or notepad

download jquery from official website

compressed version for production
uncompressed version for development

Start using jquey.

jquery liberary if load successfully--> Adds global function
JQuery()
global means---> scope of the window.
window.jQuery()
Jquery() alias $

window.$=window.jquery=jquery=$

$ takes two parameters---- Selector(css selector tag,name,class, id) and context

(may be reference of another element,another jquery selector-->start searching from
the element from the element specified in the context.)

Write JQuery Code :

almost Jquery Interact with Dom Elements And Perform some operation
-----> Need To Check whether dom is loaded or not.
write hello world to div tag.....> first check dom element is loaded or not.
Jquery include built in function ---------> ready..Check whether particular element
is loaded or not..
document object loads Entire hirarchy of DOM....Check whether

find document object---> use selector document object is global

object.window.document.

$(document).ready()
ready function takes arguments...Callback function..Called once when document is
ready..

$(document).ready(function(){

});

window.onload load when entire window loaded--->dom,images,csss---other required

resource
$(document).ready()... loaded when full dom hirarchy loaded

----------------------------------------------------------------------------------

JQUERY Selectors

-----------------------------------------------------------------------------

Find element ----Selectors

$(selector expressions,context)
specify -----> specify patteren match elemen-----Jquery Selectors uses CSS selector
paateren ...As well as it's pattern ..match elements.

Select Elements By Name:-

$('p') return Arrays of elements....

$('p').append("This is paragraph.");
$('div').append("This is div");

Select Element By ID:-

$("#myDiv")

-----------------------------------------------------------------------------------
-----

JQUERY METHODS:::

-----------------------------------------------
JQuery Selectors Find DOM Elements---Wrap Them JQuery Object
Javascript....Return DOM object...$("#id") will return JQuery Objct..
...We Call Jquery Method ....of jquery obj...Return By JQuery Slector.

JQuery Includes Methods::

DOM Manipulation..changing attributes,style attribute,adding and removing Elements.
i-after(), ii-append() iii. Attr() before()

Traversing,,,help to navigate from one dom element to another.... finding

ancestors,descendents,sibling element of specified element.

CSS.. get or set css related properties of elements

Attributes:use to get and set dom attributes of elements
Events,.....use to handle javascript events or dom---bind(),blur,change
Effects..use to add animations to elements...
Dimmensions...use to get or set css dimensions for properties....
Forms::handle form and their various events...
Ajax:allows ajax function with jquery
Core : core methods in Jquery Api
Miscellaneous: traversing el

Utilities..

----------------------------------
Dom Manipulation Methods:

Jquery provide various methods .....Add edit delete lements .. in html page
Methods
append()...insert content... to the end element...specified by selector.
before() ...insert content before element.. which is specified by selectors.
after() ...insert content after element...specified by selector...
prepend...insert content ...begining of element..
remove...remove element from dom..
replaceAll... replace target element specified element.
wrap() ..wrap html structure....around each element..

$('div').prepend("<p>This isn Prepend</p>");

$('div').append("<p>This is apppend</p>");
$('div').before("This is before");
$('div').after('This is after');

-----------------------------------------------------

Attribute Manipulations
----------------------------------------------------------

get or set attriubte. property,text or html

attr() get or set value of specified attribute ...or target element.

prop.. get or set value of specified property of target element.
html()...get or set html contentfor specified target element..
val() get or set valu property.....target element..

------------------------------------------------------
Dimensions Manipulations::

=------------------------------

methods maniputlate dimmensions of html element..

height,width,offset,possition
Methods to set the dimmensions of html elements

height()::::Get or set height of element

innerheight()...get or set ...padding+elements height
outerheight()get or set height padding+element height+padding
offset()get or set top and left coordinates ..of element
position();get or set...current cor of specified element

width()get or set width of element

innertwidth()+padding +elements width
outerwidht() border+padding+elements width
important dimmensions manipulattion methods ----------> height()
width(),offset(),position()

..............................................
Traversing DOM Elements Using Jquery
include various methods traverse elements in Dom

Children().Get childs-->specified elements

each()...iterate over specified elements...Execute Callback function foreach
element

first()..Get all child elements of each specified element

next()....get immediate siblings specified element
parent()...get parent of specified element
prev()..Get immediate perceeding siblings of Specified element
siblings()...Get Siblings of specified element

Jquery Each Method

each() ////traverse each element and execute call back function
children()..get specified element and get all childs
find() method returns all the matching child elements of specified element///
next() get immediately following siblings
parent()...gets immediate parents of specified elements.
siblings()...Get all sibling of specified element...

-----------------------------------------------------------

CSS Manipulation:
various juquery methods .....manipulate ...style properties..class of Dom elements
css....style properties..get or set
addClass: addclasses to specified elements
hasClass:determine whether have give class or not..
remove class:remove single or multiple classes from specified element
toggleClass...toggle b/w adding or removing classes

Css();/// Get reference of specified element..call css() method..with property

name,,and value
also set multiple properties by json..
$('p').css('background-color:'yellow')
$("#myDiv").css('background-color')....Return value

.addClass...add single or multiple class

.toggleClass toggle b/w add or remove classes..

jquery css manipulation.... manipulate css class or style property...

imp....css(), addClass(),hasClass(),removeClass(),toggleClass()

..........................................

Jquer animations
..................................
.....Jquery Animations....
Include methods ..show,hide,fade in and fade out element
special effect methods..useful for building interactive webpages
animate()...Perform custom animations using..elements style property...
queue(),..show or manipulate queue of functions on specified element
stop()...stop currently running animations..
fadeIn().. display ..specified element by opaque
fadeout()..display ...specified element by making transparent..
fadeTo()...adjust opacity
fadeToggle()display or hide specified element...by animating their opacity..
hide() hide specified element..
show(); display specified element
toggle() hide visible and show unvisiblee
slideUp()display specified element..with sliding motion up
slidedown() display or hide element.
..with sliding mothion

JQuery Animate Method...

perform custom animation using element style..changes existing prop to properties
with motion

get specified element.call animate method with json objct for style
properties,speed of animation and other options,

Apply Animation....

$('#myDiv').animate({
height:'200px',
width:'200px'
});
$('#myDiv').animate({
height:'200px',
width:'200px'
},500);

Two type of easing function....linear,swing..

Callback function on Animation...callbackfunction execute when complete animation

we can specify various options as json
obj....include....duration,easing,queue,step,progress,complete,start,done,always..
JQuery Queue...shows or manipulate queue of special effects functions..executed on
specified element...

FadeIn...display specified element by fading them opaque..

fadeout...hide specified element by fading them to transparent...
hide method hide and show method show the specified element..You can
ad,speed,easing,callbackfunction
Jquery toggle method..hide or show specified eleement//
.........Jquery Animations mehthods...get specified element and apply..manipulation
methods....animate(),queue(),fadeIn(),fadeOut(),hide(),show(),toggle(),slideUp(),sl
ideDown();

.................................................................
JQuery events:
when user click button...click event triggers...click event handler saveData..

Jquer provide methods to handle dom events....

most jquery method corespond native dom events..

First get reference of element....Then call jquery event method

$("#saveBtn").click(function(eventObj){

})
jquery passes event obj to every event handler function.. the event oject includes
important properties, and methods...for cross
browser...target,pageX,pageY,relatedTarget...

this-----> represent in event handler...dom element which raised an event...

Various events..jquery events methods.....mouseenter,

mouseleaver,mousemove,mouseover,mouseout and mouseup

use mouse hover insteat of enter ...mouseenter and mouseleave events separately..

Event Binding using on()

jquery allow to attach one or more event using ..on....on a single element..

internally all methods uses on ....on() gives you more flexibility in event
binding...
on(types,selector,data,fn)
types======> one or more optional...space separated eventtypes.
data===> data to be passed to event handler... when events triggred..
fn..... a function to execute... when event is triggred...

you can also use ...filter descendants of selected elements... that trigger the
event...

$('#myDiv').on('click',':button',function(){
alert('button is clicked');
Binding multiple events....
Separated by spaces..... ,, .on(' mouseleave mouseenter',function(){

})
})
Specify named functions using event handler....
write separate function... use that for handler...use want to use same handle for
different events..or events on different element...
jQuery on() method is replace or live() or delegate()..

-------------------------------------------------
Event bubling:-
events bubbles...upto document level in dom hirarchy....till it finds it's//

--------------------------------------------------------------

Ajax Jquery :...ansync javascript and xml

javascript send async http request using xmlhttprequest obj...
ajax is about using the ability of javascript async...send async request get xml
data as response...
update page without reloading page....

Jquery includes various methods to send ajax request...theses methods use

XMLHttprequest obj...
ajax()...Send asynchoronous request to server...
get()... set httpget request to get data from server...
post().. send httppost request to server ...to submit or load data to server
getJSON...send httpget request load json encoded data from server
getScript() ... send http get req to load javascript file from server then execute
it..
load() sends http request...to load html or txt content from server and add them to
DOM element...

ajaxComplete()...handler function called..ajax request complete

ajaxError()
ajaxSend()
ajaxStart()
ajaxStop()
ajaxSuccess()

advantages jquery ajax...

cross-browser support///// simple to use///ability to get or post request..
Ability to load.. json,xml ,html or scripts..

jQuery ajax()
provide core functionality of ajax using... jquery...$.ajax()....sends http request
to server...

$.ajax(url)
$.ajax(url,[options])
----->url string to which submit or retrieve data...
......>options...configuration options for ajax request...options specified using
json..
this is optional..
...list of options use to configure ajax method...
accept..type of response..
async.. bydefaut all request are synchoronous... but if you set it false then this
is synchronous..
beforesend....callbackfunction executed before ajax request is send...
cache.. indicating browser cache...bydefault it is true..
complete.. callbackfunction executed when req finishes.
contentType..Type of content....
crossDomain... boolean value..indicating whether request cross domain or not..
data...data type send to the server..can be json objct,string, or array..
dataType..dataType you are expecting back from server..
error.. callbackfunction when request is fail..
global..boolean whether trigger global ajax request handler or not by default true.
headers. additional key/value pairs send with request..
isModified..default false....request is successfull only if response is changed..
since last request..This check by only last modified header..
isLocal...allow current environment to be recongnize as local..
jsonp... override the callback function name in jsonprequest..used this value
instead of callback in the callback=? part of query string in url..
jsonpCallback...string containing the callback function name for a JSonp request..
mimeType...string mimetype override mime type XMLHttpRequestmimeType....

$.ajax() sent asynchoronous http request..to submit or retrieve data from server
without reloading page
$.ajax() used to send http get,put ,delete request... it can retrieve any type of
response...
use option parameter to customize ajax request...

...................................................

jQuery get() Methods..get method sends async http get reques to the server...and
retrieve data..
$.get(url,[data],[callback]);
url---url from which you want to get data..
data..sent data to server with http request as query string.
callback().... function to be executed whend request succesds
................................................