ajax y jquery manual.docx

7/25/2019 AJAX y JQUERY manual.docx

1/143

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new

technique for creating better, faster, and ore interactive web app!ications

with the he!p of XML, "#ML, $SS, and Java Script.

A%a& uses X"#ML for content, $SS for presentation, a!ong with 'ocuent

(b%ect Mode! and JavaScript for dynaic content disp!ay.

$onventiona! web app!ications transit inforation to and fro the server

using synchronous requests. )t eans you fi!! out a for, hit subit, and get

directed to a new page with new inforation fro the server.

With AJAX, when you hit subit, JavaScript wi!! a*e a request to the

server, interpret the resu!ts, and update the current screen. )n the purest

sense, the user wou!d never *now that anything was even transitted to the

server.

XML is coon!y used as the forat for receiving server data, a!though

any forat, inc!uding p!ain te&t, can be used.

AJAX is a web browser techno!ogy independent of web server software.

A user can continue to use the app!ication whi!e the c!ient progra requests

inforation fro the server in the bac*ground.

)ntuitive and natura! user interaction. $!ic*ing is not required, ouse

oveent is a sufficient event trigger.

'ata+driven as opposed to page+driven.

ich )nternet App!ication #echno!ogyAJAX is the ost viab!e ich )nternet App!ication -)A techno!ogy

so far. )t is getting treendous industry oentu and severa! too! *it

and fraewor*s are eerging. /ut at the sae tie, AJAX has browser

incopatibi!ity and it is supported by JavaScript, which is hard to

aintain and debug.


2/143

AJAX is /ased on (pen StandardsAJAX is based on the fo!!owing open standards0

/rowser+based presentation using "#ML and $ascading Sty!e Sheets -$SS.

'ata is stored in XML forat and fetched fro the server.

/ehind+the+scenes data fetches using XML"ttpequest ob%ects in the

browser.

JavaScript to a*e everything happen.

AJAX cannot wor* independent!y. )t is used in cobination with other

techno!ogies to create interactive webpages.

JavaScript

Loose!y typed scripting !anguage.

JavaScript function is ca!!ed when an event occurs in a page.

1!ue for the who!e AJAX operation.

'(M A2) for accessing and anipu!ating structured docuents.

epresents the structure of XML and "#ML docuents.

$SS

A!!ows for a c!ear separation of the presentation sty!e fro the content and

ay be changed prograatica!!y by JavaScript.

XML"ttpequest

JavaScript ob%ect that perfors asynchronous interaction with the server.

"ere is a !ist of soe faous web app!ications that a*e use of AJAX.


3/143

'ifference in AJAX and $onventiona! $1)2rogra#ry these two e&ap!es one by one and you wi!! fee! the difference.

Whi!e trying AJAX e&ap!e, there is not discontinuity and you get theresponse very quic*!y, but when you try the standard 1$) e&ap!e, you

wou!d have to wait for the response and your page a!so gets refreshed.

AJAX Example:

3 4

Standard Example:

3 4

NOTE0 We have given a ore cop!e& e&ap!e in AJAX 'atabase

A!! the avai!ab!e browsers cannot support AJAX. "ere is a !ist of a%or

browsers, that support AJAX.

Mo5i!!a 6irefo& 7.8 and above.

9etscape version :.7 and above.

App!e Safari 7.; and above.

Microsoft )nternet onqueror.

(pera :. and above.

When you write your ne&t app!ication, do consider the browsers that donot support AJAX.

NOTE0 When we say that a browser does not support AJAX, it sip!y

eans that the browser does not support creation of Javascript ob%ect

XML"ttpequest ob%ect.

AJAX

0 0 0 Standard
http://www.tutorialspoint.com/ajax/ajax_database.htmhttp://www.tutorialspoint.com/ajax/ajax_database.htm


4/143

Writing /rowser Specific $ode#he Sip!est way to a*e your source code copatib!e with a browser

is to use try...catchb!oc*s in your JavaScript.


5/143

ame?

*ime?

)n the above JavaScript code, we try three ties to a*e our

XML"ttpequest ob%ect. (ur first attept0

ajaxRequest = new XMLHttpRequest();

)t is for (pera @.8, 6irefo&, and Safari browsers. )f it fai!s, we try two

ore ties to a*e the correct ob%ect for an )nternet


6/143

An XML"ttpequest ob%ect is created.

#he XML"ttpequest ob%ect is configured.

#he XML"ttpequest ob%ect a*es an asynchronous request to the

Webserver.

#he Webserver returns the resu!t containing XML docuent.

#he XML"ttpequest ob%ect ca!!s the ca!!bac*- function and processes the

resu!t.

#he "#ML '(M is updated.

Let us ta*e these steps one by one.

A $!ient


7/143

7catch$e%&

try&

ajax'e(uest =new,ctive3bject$"4icrosot3456**;"%)

7catch$e%&

// omething went wrong

alert$"our browser bro+e!"%)

returnalse)

7

7

7

7

#he XML"ttpequest (b%ect is $onfigured)n this step, we wi!! write a function that wi!! be triggered by the c!ient

event and a ca!!bac* function processequest- wi!! be registered.

unctionvalidate@ser8d$%&

ajax#unction$%)

// 6ere process'e(uest$% is the callbac+ unction

ajax'e(uestonreadystatechange =process'e(uest)

i$!target%target =documentget9lementBy8d$"userid"%)

varurl ="validateAid="1escape$targetvalue%)

ajax'e(uestopen$"9*"2url2true%)

ajax'e(uestsend$null%)

7

Ma*ing Asynchronous equest to the

Webserver


8/143

Source code is avai!ab!e in the above piece of code. $ode written in

bo!d typeface is responsib!e to a*e a request to the webserver. #his is

a!! being done using the XML"ttpequest ob%ect ajaxRequest.

unctionvalidate@ser8d$%& ajax#unction$%)

// 6ere process'e(uest$% is the callbac+ unction

ajax'e(uestonreadystatechange =process'e(uest)

if(!target)target =document.getElementById("userid");

varurl ="validate?id="+escape(target.value);

aae#uest.open("$E%"&url&true);

aae#uest.send(null);

7

Assue you enter ,arain the userid bo&, then in the above request,

the EL is set to Dva!idate?id4HaraD.

Webserver eturns the esu!t $ontainingXML 'ocuentIou can ip!eent your server+side script in any !anguage, however its

!ogic shou!d be as fo!!ows.

1et a request fro the c!ient.

2arse the input fro the c!ient.

'o required processing.

Send the output to the c!ient.

)f we assue that you are going to write a serv!et, then here is the

piece of code.


9/143

publicvoiddoet$6ttpervlet'e(uestre(uest26ttpervlet'esponseresponse%throws89xception2ervlet9xception

&

tringtarget8d =re(uestget;arameter$"id"%)

i$$target8d !=null%CC!accountscontainsDey$target8dtrim$%%%

&

responsesetontent*ype$"text/xml"%)

responseset6eader$"ache-ontrol"2"no-cache"%)

responsegetEriter$%write$"true"%)

7

else

&

responsesetontent*ype$"text/xml"%)

responseset6eader$"ache-ontrol"2"no-cache"%)

responsegetEriter$%write$"alse"%)

7

7

$a!!bac* 6unction processequest- is $a!!ed#he XML"ttpequest ob%ect was configured to ca!! the processequest-

function when there is a state change to the reay-tateof

theXMLHttpRequestob%ect. 9ow this function wi!! receive the resu!t

fro the server and wi!! do the required processing. As in the fo!!owing

e&ap!e, it sets a variab!e essage on true or fa!se based on the

returned va!ue fro the Webserver.

unctionprocess'e(uest$%&

i$re(readytate ==F%&

i$re(status ==:00%&

varmessage =)

7


10/143

#he "#ML '(M is Epdated#his is the fina! step and in this step, your "#ML page wi!! be updated.

)t happens in the fo!!owing way0

JavaScript gets a reference to any e!eent in a page using '(M A2).

#he recoended way to gain a reference to an e!eent is to ca!!.

documentget9lementBy8d$"user8d4essage"%2

// where "user8d4essage" is the 8G attribute

// o an element appearing in the 6*45 document

JavaScript ay now be used to odify the e!eentBs attributesF odify the

e!eentBs sty!e propertiesF or add, reove, or odify the chi!d e!eents."ere is an e&ap!e0


11/143

// replace it otherwise append the new element

i$user4essage9lementchildodesI0J%&

user4essage9lementreplacehild$messageBody2user4essage9lementchildodesI0J%)

7

else

&

user4essage9lementappendhild$messageBody%)

7

7

-->

)f you have understood the above+entioned seven steps, then you are

a!ost done with AJAX. )n the ne&t chapter, we wi!!

seeXMLHttpRequestob%ect in ore detai!.

#he XML"ttpequest ob%ect is the *ey to AJAX. )t has been avai!ab!e

ever since )nternet


12/143

Listed be!ow is !isted are soe of the ethods and properties that you

have to get fai!iar with.

XML"ttpequest Methods

abort()

$ance!s the current request.

getAllResponseHeaders()

eturns the cop!ete set of "##2 headers as a string.

getResponseHeader( headerName )

eturns the va!ue of the specified "##2 header.

open( method, UR )

open( method, UR, as!n" )

open( method, UR, as!n", #serName )

open( method, UR, as!n", #serName, pass$ord )

Specifies the ethod, EL, and other optiona! attributes of a request.

#he ethod paraeter can have a va!ue of D1


13/143

XML"ttpequest 2roperties

onread!state"hange

An event hand!er for an event that fires at every state change.

read!State

#he readyState property defines the current state of the XML"ttpequest

ob%ect.

#he fo!!owing tab!e provides a !ist of the possib!e va!ues for the readyState

property0

State Description

0 The request is not initialized.

1 The request has been set up.

2 The request has been sent.

3 The request is in process.

4 The request is completed.

read!State ' After you have created the XML"ttpequest ob%ect, but

before you have ca!!ed the open- ethod.

read!State ' After you have ca!!ed the open- ethod, but before you

have ca!!ed send-.

read!State ' *After you have ca!!ed send-.

read!State ' +After the browser has estab!ished a counication with

the server, but before the server has cop!eted the response.


14/143

read!State ' After the request has been cop!eted, and the response

data has been cop!ete!y received fro the server.

responseText

eturns the response as a string.

responseX-

eturns the response as XML. #his property returns an XML docuent

ob%ect, which can be e&ained and parsed using the W$ '(M node tree

ethods and properties.

stat#s

eturns the status as a nuber -e.g., 8 for D9ot 6oundD and ;88 for

D(>D.

stat#sText

eturns the status as a string -e.g., D9ot 6oundD or D(>D.

#o c!ear!y i!!ustrate how easy it is to access inforation fro a database

using AJAX, we are going to bui!d MySNL queries on the f!y and disp!ay

the resu!ts on Da%a&.ht!D. /ut before we proceed, !et us do the ground

wor*. $reate a tab!e using the fo!!owing coand.

NOTE0 We are assuing you have sufficient privi!ege to perfor the

fo!!owing MySNL operations

'9,*9 *,B59 ajaxKexample $

name varchar$L0% * @552

age int$MM% * @552

sex varchar$M% * @552

wpm int$MM% * @552 ;'84,' D9 $name%

%

9ow dup the fo!!owing data into this tab!e using the fo!!owing SNL

stateents0


15/143

89'* 8* ajaxKexample H,5@9 $Nerry2 M:02 m2 :0%)

89'* 8* ajaxKexample H,5@9 $'egis2 OL2 m2 FF%)

89'* 8* ajaxKexample H,5@9 $#ran+2 FL2 m2 .O%)

89'* 8* ajaxKexample H,5@9 $Nill2 ::2 2 O:%)

89'* 8* ajaxKexample H,5@9 $*racy2 :O2 2 0%)

89'* 8* ajaxKexample H,5@9 $Nulie2 PL2 2 Q0%)

$!ient Side "#ML 6i!e

9ow !et us have our c!ient side "#ML fi!e, which is a%a&.ht!, and it wi!!

have the fo!!owing code0


16/143

// omething went wrong

alert$"our browser bro+e!"%)

returnalse)

7

7

7

// reate a unction that will receive data

// sent rom the server and will update

// div section in the same page

ajax'e(uestonreadystatechange =unction$%&

i$ajax'e(uestreadytate ==F%&

varajaxGisplay =documentget9lementBy8d$ajaxGiv%)

ajaxGisplayinner6*45 =ajax'e(uestresponse*ext)

7

7

// ow get the value rom user and pass it to

// server script

varage =documentget9lementBy8d$age%value)

varwpm =documentget9lementBy8d$wpm%value)

varsex =documentget9lementBy8d$sex%value)

var(uerytring ="Aage="1age )

(uerytring 1= "Cwpm="1wpm 1"Csex="1sex)

ajax'e(uestopen$"9*"2"ajax-examplephp"1(uerytring2true%)

ajax'e(uestsend$null%)7

//-->


17/143

4ax ,ge?

4ax E;4?

ex?

m

our result will display here

NOTE0 #he way of passing variab!es in the Nuery is according to "##2

standard and have forA.

@'5AvariableM=valueM)Cvariable:=value:)

#he above code wi!! give you a screen as given be!ow0

NOTE0 #his is duy screen and wou!d not wor*

Ma& Age0

Ma& W2M0

Se&0

Iour resu!t wi!! disp!ay here in this section after you have ade your

entry.


18/143

NOTE0 #his is a duy screen.

Server Side 2"2 6i!e

Iour c!ient+side script is ready. 9ow, we have to write our server+sidescript, which wi!! fetch age, wp, and se& fro the database and wi!!

send it bac* to the c!ient. 2ut the fo!!owing code into the fi!e Da%a&+

e&ap!e.phpD.


19/143

i$isKnumeric$Sage%%

S(uery =" ,G age


20/143

9ow try by entering a va!id va!ue -e.g., 7;8 in Max Aeor any other

bo& and then c!ic* Nuery MySNL button.

Ma& Age0

Ma& W2M0

Se&0

Iour resu!t wi!! disp!ay here in this section after you have ade your entry.

)f you have successfu!!y cop!eted this !esson, then you *now how to

use MySNL, 2"2, "#ML, and Javascript in tande to write AJAX

app!ications.

AJAX Security0 Server Side

AJAX+based Web app!ications use the sae server+side security schees of

regu!ar Web app!ications.

Iou specify authentication, authori5ation, and data protection requireents

in your web.&! fi!e -dec!arative or in your progra -prograatic.

AJAX+based Web app!ications are sub%ect to the sae security threats as

regu!ar Web app!ications.

AJAX Security0 $!ient Side

JavaScript code is visib!e to a userKhac*er. "ac*er can use JavaScript code

for inferring server+side wea*nesses.

JavaScript code is down!oaded fro the server and e&ecuted -Deva!D at the

c!ient and can coproise the c!ient by a!+intended code.


21/143

'own!oaded JavaScript code is constrained by the sand+bo& security ode!

and can be re!a&ed for signed JavaScript.

AJAX is growing very fast and that is the reason that it contains any

issues with it. We hope with the passes of tie, they wi!! be reso!vedand AJAX wi!! becoe idea! for web app!ications. We are !isting down a

few issues that AJAX current!y suffers fro.

.omplex/t! /s /n"reased

Server+side deve!opers wi!! need to understand that presentation !ogic wi!!

be required in the "#ML c!ient pages as we!! as in the server+side !ogic.

2age deve!opers ust have JavaScript techno!ogy s*i!!s.

AJAX0based appl/"at/ons "an be d/11/"#lt to deb#g, test, and

ma/nta/n

JavaScript is hard to test + autoatic testing is hard.

Wea* odu!arity in JavaScript.

Lac* of design patterns or best practice guide!ines yet.

Tool2/ts34rame$or2s are not mat#re !et

Most of the are in beta phase.

No standard/5at/on o1 the X-HttpRe%#est !et

6uture version of )< wi!! address this.

No s#pport o1 X-HttpRe%#est /n old bro$sers

)frae wi!! he!p.

Ja&aS"r/pt te"hnolog! dependen"! and /n"ompat/b/l/t!

Must be enab!ed for app!ications to function.

Sti!! soe browser incopatibi!ities e&ist.

Ja&aS"r/pt "ode /s &/s/ble to a ha"2er


22/143

2oor!y designed JavaScript code can invite security prob!es.

%Nuery + A%a&

Advertiseents

2revious 2age

9e&t 2age

AJAX is an acrony standing for Asynchronous JavaScript and XML andthis techno!ogy he!p us to !oad data fro the server without a browser

page refresh.

)f you are new with AJAX, ) wou!d recoend you go through our A%a&

#utoria!before proceeding further.

JNuery is a great too! which provides a rich set of AJAX ethods to

deve!op ne&t generation web app!ication.

Loading sip!e data

#his is very easy to !oad any static or dynaic data using JNuery AJAX.

JNuery provides load()ethod to do the %ob O

Synta&

"ere is the sip!e synta& for load()ethod O

'selector.load$ @'52 IdataJ2 Icallbac+J %)

"ere is the description of a!! the paraeters O
http://www.tutorialspoint.com/jquery/jquery-events.htmhttp://www.tutorialspoint.com/jquery/jquery-effects.htmhttp://www.tutorialspoint.com/ajax/index.htmhttp://www.tutorialspoint.com/ajax/index.htmhttp://www.tutorialspoint.com/jquery/jquery-events.htmhttp://www.tutorialspoint.com/jquery/jquery-effects.htmhttp://www.tutorialspoint.com/ajax/index.htmhttp://www.tutorialspoint.com/ajax/index.htm


23/143

URO #he EL of the server+side resource to which the request is sent. )t

cou!d be a $1), AS2, JS2, or 2"2 script which generates data dynaica!!y or

out of a database.

dataO #his optiona! paraeter represents an ob%ect whose properties areseria!i5ed into proper!y encoded paraeters to be passed to the request. )f

specified, the request is ade using the 6OSTethod. )f oitted,

the 7ETethod is used.

"allba"2O A ca!!bac* function invo*ed after the response data has been

!oaded into the e!eents of the atched set. #he first paraeter passed to

this function is the response te&t received fro the server and second

paraeter is the status code.


24/143

lic+ on the button to load /j(uery/resulthtml Vle W

*,9

"ere load()initiates an A%a& request to the specified

EL38%#er!3res#lt9htmlfi!e. After !oading this fi!e, a!! the content

wou!d be popu!ated inside CdivG tagged with )' stae. Assuing,

our K%queryKresu!t.ht! fi!e has %ust one "#ML !ine O

*68 8 '9@5*

When you c!ic* the given button, then resu!t.ht! fi!e gets !oaded.

1etting JS(9 data

#here wou!d be a situation when server wou!d return JS(9 string

against your request. JNuery uti!ity function getJSON()parses the

returned JS(9 string and a*es the resu!ting string avai!ab!e to the

ca!!bac* function as first paraeter to ta*e further action.

Synta&

"ere is the sip!e synta& for getJSON()ethod O

'selector.getN$ @'52 IdataJ2 Icallbac+J %)


25/143


URO #he EL of the server+side resource contacted via the 1


26/143

lic+ on the button to load resultjson Vle W

*,9

"ere JNuery uti!ity ethod getJSON()initiates an A%a& request to the

specified EL res#lt98sonfi!e. After !oading this fi!e, a!! the content

wou!d be passed to the ca!!bac* function which fina!!y wou!d be

popu!ated inside CdivG tagged with )' stae. Assuing, our resu!t.%sonfi!e has fo!!owing %son foratted content O

&

"name"? "Xara ,li"2

"age" ? "YO"2

"sex"? "emale"

7

When you c!ic* the given button, then resu!t.%son fi!e gets !oaded.

2assing data to the Server

Many ties you co!!ect input fro the user and you pass that input to

the server for further processing. JNuery AJAX ade it easy enough to


27/143

pass co!!ected data to the server using dataparaeter of any avai!ab!e

A%a& ethod.


28/143

"ere is the code written in res#lt9phpscript O

9ow you can enter any te&t in the given input bo& and then c!ic* DShow

esu!tD button to see what you have entered in the input bo&.

JNuery AJAX Methods

Iou have seen basic concept of AJAX using JNuery. 6o!!owing tab!e !ists

down a!! iportant JNuery AJAX ethods which you can use based your

prograing need O

S9N

9

-ethods ;es"r/pt/on

7 8


29/143

Setup g!oba! settings for AJAX requests.

8, ="allba"2>, =t!pe> )

Load a reote page using an "##2 1 )

Load JS(9 data using an "##2 1 )

Load a reote page using an "##2 2(S# request.

: load( #rl, =data>, ="allba"2> )

Load "#ML fro a reote fi!e and in%ect it into the '(M.

@ ser/al/5e( )

Seria!i5es a set of input e!eents into a string of data.

P ser/al/5eArra!( )

Seria!i5es a!! fors and for e!eents !i*e the .seria!i5e- ethod but

returns a JS(9 data structure for you to wor* with.

JNuery AJAX


30/143

Iou can ca!! various JNuery ethods during the !ife cyc!e of AJAX ca!!

progress. /ased on different eventsKstages fo!!owing ethods are

avai!ab!e O

Iou can go through a!! the AJAX


31/143

%Nuery provides a trivia!!y sip!e interface for doing various *ind of

aa5ing effects. %Nuery ethods a!!ow us to quic*!y app!y coon!y

used effects with a iniu configuration.

#his tutoria! covers a!! the iportant %Nuery ethods to create visua!effects.

Showing and "iding e!eents

#he coands for showing and hiding e!eents are pretty uch what

we wou!d e&pect O sho$() to show the e!eents in a wrapped set

and h/de()to hide the.

Synta&

"ere is the sip!e synta& for sho$()ethod O

'selector.show$ speed2 Icallbac+J %)


speedO A string representing one of the three predefined speeds -Ds!owD,

Dnora!D, or DfastD or the nuber of i!!iseconds to run the aniation

-e.g. 7888.

"allba"2O #his optiona! paraeter represents a function to be e&ecuted

whenever the aniation cop!etesF e&ecutes once for each e!eent

aniated against.

6o!!owing is the sip!e synta& for h/de()ethod O

'selector.hide$ speed2 Icallbac+J %)



32/143



-e.g. 7888.

"allba"2O #his optiona! paraeter represents a function to be e&ecutedwhenever the aniation cop!etesF e&ecutes once for each e!eent

aniated against.


33/143

mydiv&margin?M0px)padding?M:px)border?:pxsolid UYYY) width?M00px)height?M00px)7

*his is a R@,'9

#his wi!! produce fo!!owing resu!t O

#ogg!ing the e!eents%Nuery provides ethods to togg!e the disp!ay state of e!eents

between revea!ed or hidden. )f the e!eent is initia!!y disp!ayed, it wi!!

be hiddenF if hidden, it wi!! be shown.

Synta&

"ere is the sip!e synta& for one of the toggle()ethods O

'selector.toggle$IspeedJI2 callbac+J%)



34/143



-e.g. 7888.

"allba"2O #his optiona! paraeter represents a function to be e&ecutedwhenever the aniation cop!etesF e&ecutes once for each e!eent

aniated against.


35/143

lic+ 4e

#his wi!! produce fo!!owing resu!t O

JNuery


36/143

optiona! ca!!bac* after cop!etion.

1adeO#t( speed, ="allba"2> )

6ade out a!! atched e!eents by ad%usting their opacity to 8, then setting

disp!ay to DnoneD and firing an optiona! ca!!bac* after cop!etion.

1adeTo( speed, opa"/t!, "allba"2 )

6ade the opacity of a!! atched e!eents to a specified opacity and firing

an optiona! ca!!bac* after cop!etion.

= h/de( )

"ides each of the set of atched e!eents if they are shown.

h/de( speed, ="allba"2> )

"ide a!! atched e!eents using a gracefu! aniation and firing an


: sho$( )

'isp!ays each of the set of atched e!eents if they are hidden.

@ sho$( speed, ="allba"2> )

Show a!! atched e!eents using a gracefu! aniation and firing an


P sl/de;o$n( speed, ="allba"2> )

evea! a!! atched e!eents by ad%usting their height and firing an

http://www.tutorialspoint.com/jquery/effect-fadeout.htmhttp://www.tutorialspoint.com/jquery/effect-fadeto.htmhttp://www.tutorialspoint.com/jquery/effect-hide.htmhttp://www.tutorialspoint.com/jquery/effect-hide-speed.htmhttp://www.tutorialspoint.com/jquery/effect-show.htmhttp://www.tutorialspoint.com/jquery/effect-show-speed.htmhttp://www.tutorialspoint.com/jquery/effect-slidedown.htmhttp://www.tutorialspoint.com/jquery/effect-fadeout.htmhttp://www.tutorialspoint.com/jquery/effect-fadeto.htmhttp://www.tutorialspoint.com/jquery/effect-hide.htmhttp://www.tutorialspoint.com/jquery/effect-hide-speed.htmhttp://www.tutorialspoint.com/jquery/effect-show.htmhttp://www.tutorialspoint.com/jquery/effect-show-speed.htmhttp://www.tutorialspoint.com/jquery/effect-slidedown.htm


37/143

78 sl/deToggle( speed, ="allba"2> )

#ogg!e the visibi!ity of a!! atched e!eents by ad%usting their height and

firing an optiona! ca!!bac* after cop!etion.

77 sl/deUp( speed, ="allba"2> )

"ide a!! atched e!eents by ad%usting their height and firing an optiona!

ca!!bac* after cop!etion.

7; stop( ="lear)

Stops a!! the current!y running aniations on a!! the specified e!eents.

7 toggle( )

#ogg!e disp!aying each of the set of atched e!eents.

7 toggle( speed, ="allba"2> )

#ogg!e disp!aying each of the set of atched e!eents using a gracefu!

aniation and firing an optiona! ca!!bac* after cop!etion.

7= toggle( s$/t"h )

#ogg!e disp!aying each of the set of atched e!eents based upon the

switch -true shows a!! e!eents, fa!se hides a!! e!eents.

7 8


38/143

#o use these effects you can either down!oad !atest %Nuery E)

Library8%#er!0#/0999"#stom95/pfro%Nuery E) Libraryor use

1oog!e $'9 to use it in the sii!ar way as we have done for %Nuery.

We have used 1oog!e $'9 for %Nuery E) using fo!!owing code snippet inthe "#ML page so we can use %Nuery E) O

S9N9 -ethods ;es"r/pt/on

7 @l/nd

/!inds the e!eent away or shows it by b!inding it in.

; @o#n"e

/ounces the e!eent vertica!!y or hori5onta!!y n+ties.

.l/p

$!ips the e!eent on or off, vertica!!y or hori5onta!!y.

;rop

'rops the e!eent away or shows it by dropping it in.

= Explode


39/143

6o!ds the e!eent !i*e a piece of paper.

: H/ghl/ght

"igh!ights the bac*ground with a defined co!or.

@ 6#11

Sca!e and fade out aniations create the puff effect.

P 6#lsate

2u!sates the opacity of the e!eent u!tip!e ties.

78 S"ale

Shrin* or grow an e!eent by a percentage factor.

77 Sha2e

Sha*es the e!eent vertica!!y or hori5onta!!y n+ties.

7; S/5e

esi5e an e!eent to a specified width and height.

7 Sl/de

S!ides the e!eent out of the viewport.

7 Trans1er

#ransfers the out!ine of an e!eent to another.
http://www.tutorialspoint.com/jquery/effect-highlight.htmhttp://www.tutorialspoint.com/jquery/effect-puff.htmhttp://www.tutorialspoint.com/jquery/effect-pulsate.htmhttp://www.tutorialspoint.com/jquery/effect-scale.htmhttp://www.tutorialspoint.com/jquery/effect-shake.htmhttp://www.tutorialspoint.com/jquery/effect-size.htmhttp://www.tutorialspoint.com/jquery/effect-slide.htmhttp://www.tutorialspoint.com/jquery/effect-transfer.htmhttp://www.tutorialspoint.com/jquery/effect-highlight.htmhttp://www.tutorialspoint.com/jquery/effect-puff.htmhttp://www.tutorialspoint.com/jquery/effect-pulsate.htmhttp://www.tutorialspoint.com/jquery/effect-scale.htmhttp://www.tutorialspoint.com/jquery/effect-shake.htmhttp://www.tutorialspoint.com/jquery/effect-size.htmhttp://www.tutorialspoint.com/jquery/effect-slide.htmhttp://www.tutorialspoint.com/jquery/effect-transfer.htm


40/143

)nteractions cou!d be added basic ouse+based behaviours to any

e!eent. Esing with interactions, We can create sortab!e !ists,

resi5eab!e e!eents, drag Q drop behaviours.)nteractions a!so a*e

great bui!ding b!oc*s for ore cop!e& widgets and app!ications.

S9N9 ?ntera"t/ons ;es"r/pt/on

7 ;rag able


41/143

; A#to"omplete


42/143

Jquery has two different sty!ing thees as A And /.

*utorials ;oint

*ext lin+

, tandard *ext 5in+


43/143

5in+ Button

, 5ist Hiew?

,ndroid

8

8nput #ield?

*oggle witch?

n

\

*utorials point

#his shou!d produce fo!!owing resu!t O

A Sip!e of / theing


44/143

*utorials ;oint

*ext lin+

, tandard *ext 5in+

5in+ Button

, 5ist Hiew?

,ndroid

8

8nput #ield?


45/143

*oggle witch?

n

\

*utorials point


Jquery provides servera! uti!ities in the forate of R-nae space.

#hese ethods are he!pfu! to cop!ete the prograing tas*s.a few of

the uti!ity ethods are as show be!ow.

R.tri-

R.tri- is used to eoves !eading and trai!ing whitespace

Strim$ " lots o extra whitespace " %)

R.each-


46/143

R.each- is used to )terates over arrays and ob%ects

Seach$I"oo"2"bar"2"baZ"J2unction$idx2val %&

consolelog$"element "1idx 1" is "1val %)

7%)

Seach$&oo?"bar"2baZ?"bim"72unction$+2v %&

consolelog$+ 1" ? "1v %)

7%)

.each- can be ca!!ed on a se!ection to iterate over the e!eents

contained in the se!ection. .each-, not R.each-, shou!d be used for

iterating over e!eents in a se!ection.

R.inArray-

R.inArray- is used to eturns a va!ueBs inde& in an array, or +7 if the

va!ue is not in the array.

varmy,rray =IM2:2P2LJ)

i$Sin,rray$F2my,rray %!==-M%&

consolelog$"ound it!"%)

7

R.e&tend-

R.e&tend- is used to $hanges the properties of the first ob%ect using

the properties of subsequent ob%ects.

var Vrstbject = & oo? "bar"2 a? "b" 7)

var secondbject = & oo? "baZ" 7)

var newbject = Sextend$ Vrstbject2 secondbject %)


47/143

consolelog$ Vrstbjectoo %)

consolelog$ newbjectoo %)

R.pro&y-

R.pro&y- is used to eturns a function that wi!! a!ways run in the

provided scope that is, sets the eaning of this inside the passed

function to the second arguent

varmy#unction =unction$%&

consolelog$this%)

7)

varmybject =&

oo?"bar"

7)

my#unction$%)// window

varmy;roxy#unction =Sproxy$my#unction2mybject %)

my;roxy#unction$%)

R.browser

R.browser is used to give the inforation about browsers

jRueryeach$jRuerybrowser2unction$i2val %&

S$""1i 1" ? "1val 1""%

append*o$documentbody %)

7%)

R.contains-


48/143

R.contains- is used to returns true if the '(M e!eent provided by the

second arguent is a descendant of the '(M e!eent provided by the

first arguent, whether it is a direct chi!d or nested ore deep!y.

Scontains$ documentdocument9lement2 documentbody %)

Scontains$ documentbody2 documentdocument9lement %)

R.data-

R.data- is used to give the inforation about data

jRuerydata demo

*he values stored were

and

vardiv =S$"div"%I0J)

jRuerydata$div2"test"2& Vrst?:L2

last?"tutorials"

7%)

S$"span?Vrst"%text$jRuerydata$div2"test"%Vrst %)


49/143

S$"span?last"%text$jRuerydata$div2"test"%last %)

An output wou!d be as fo!!ows

*he values stored were :L and tutorials

R.fn.e&tend-

R.fn.e&tend- is used to e&tends the %Nuery prototype

,ndroid

8

jRuerynextend$&

chec+?unction$%&

returnthiseach$unction$%&

thischec+ed =true)

7%)


50/143

72

unchec+?unction$%&


thischec+ed =alse)

7%)

7

7%)

// @se the newly created chec+$% method

S$"inputItype = chec+boxJ"%chec+$%)

)t provides the output as shown be!ow O

R.isWindow-

R.isWindow- is used to recognise the window

jRueryisEindow demo


51/143

8s window a windowA

S$"b"%append$""1SisEindow$window %%)


R.now-

)t returns a nuber which is representing the current tie

$new Gate%get*ime$%

R.isXML'oc-R.isXML'oc- chec*s whether a fi!e is an &! of not

jRueryis345Goc$ document %

jRueryis345Goc$ documentbody %

R.g!oba!


52/143

test$%)

R.dequeue-

R.dequeue- is used to e&ecute the ne&t function in the queue

jRueryde(ueue demo

div &

margin?Ppx)

width?L0px)

position?absolute)

height?L0px)

let?M0px)

top?P0px)

bac+ground-color?green)

border-radius?L0px)

7

divred &

bac+ground-color?blue)

7


53/143

tart

S$"button"%clic+$unction$%&

S$"div"%

animate$&let?1 = F00px72:000%

animate$&top?0px72Y00%

(ueue$unction$%&

S$this%togglelass$"red"%)

Sde(ueue$this%)

7%

animate$&let?M0px2top?P0px72O00%)

7%)


A p!ug+in is piece of code written in a standard JavaScript fi!e. #hese

fi!es provide usefu! %Nuery ethods which can be used a!ong with

%Nuery !ibrary ethods.


54/143

#here are p!enty of %Nuery p!ug+in avai!ab!e which you can down!oad

fro repository !in* at http0KK%query.coKp!ugins.

"ow to use 2!ugins

#o a*e a p!ug+inBs ethods avai!ab!e to us, we inc!ude p!ug+in fi!e very

sii!ar to %Nuery !ibrary fi!e in the CheadG of the docuent.

We ust ensure that it appears after the ain %Nuery source fi!e, and

before our custo JavaScript code.

6o!!owing e&ap!e shows how to inc!ude8%#er!9pl#g0/n98sp!ugin O

*he jRuery 9xample

S$document%ready$unction$%&

your custom code

7%)
http://jquery.com/pluginshttp://jquery.com/plugins


55/143

"ow to deve!op a 2!ug+in

#his is very sip!e to write your own p!ug+in. 6o!!owing is the synta& to

create a a ethod O

jRuerynmethodame = methodGeVnition)

"ere !eth&/a!eMis the nae of new ethodand !eth&0e'initi&nis actua! ethod definition.

#he guide!ine recoended by the %Nuery tea is as fo!!ows O

Any ethods or functions you attach ust have a seico!on -F at the end.

Iour ethod ust return the %Nuery ob%ect, un!ess e&p!icity noted

otherwise.

Iou shou!d use this.each to iterate over the current set of atched

e!eents + it produces c!ean and copatib!e code that way.

2refi& the fi!enae with %query, fo!!ow that with the nae of the p!ugin and

conc!ude with .%s.

A!ways attach the p!ugin to %Nuery direct!y instead of R, so users can use a

custo a!ias via no$onf!ict- ethod.

6or e&ap!e, if we write a p!ugin that we want to nae ebu, our

JavaScript fi!enae for this p!ugin is O

j(uerydebugjs


56/143

#he use of the8%#er!9prefi& e!iinates any possib!e nae co!!isions

with fi!es intended for use with other !ibraries.

eep this code injquery.ebu.jsfi!e O

jRuerynwarning =unction$%&


alert$*ag ame?"1S$this%prop$"tagame"%1"%)

7%)

7)

"ere is the e&ap!e showing usage of warning- ethod. Assuing we

putjquery.ebu.jsfi!e in sae directory of ht! page.

*he jRuery 9xample


S$"div"%warning$%)

S$"p"%warning$%)

7%)


57/143

*his is paragraph

*his is division

#his wou!d a!ert you with fo!!owing resu!t O

*his is paragraph

*his is division

page2i!ing.%s is a %Nuery p!ug+in for Bpi!ingB your !ayout sections over

one another and accessing the by scro!!ing.

A Sip!e of theing e&ap!e as shown be!ow


58/143

S$document%ready$unction$% &

S$Upagepiling%pagepiling$&

menu? Umenu2

anchors? IpageM2 page:2 pageP2 pageFJ2

sectionsolor? IUbda002 U:ebe:M2 U:P9L02 ULMbecFJ2

navigation? &

position? right2

tooltips? I;age M2 ;age :2 ;age P2 ;gae FJ

72

ater'ender? unction$%&

//playing the video

S$video%get$0%play$%)

7 7%)

7%)

section &

text-align?center)

7

UmyHideo &

position? absolute)


59/143

Z-index? F)

right? 0)

bottom? 0)

top?0)

right?0)

width? M00])

height? M00])

bac+ground-siZe? M00] M00])

bac+ground-color? blac+) /T in case the video doesnt Vt the whole pageT/

bac+ground-image? /T our video T/)

bac+ground-position? center center)

bac+ground-siZe? contain)

object-Vt? cover) /Tcover video bac+ground T/

7

UsectionM layer &

position? absolute) Z-index? L)

width? M00])

let? 0)

top? FP])

height? M00])

7

UsectionM hM &

color?U\)

7

Uino4enu li a &

color? U\)


60/143

7

;age M

;age :

;age P

o limits

,nything is possible with *utorialspoint


61/143

imple 9asy 5earning


6!ic*erp!ate is a %Nuery p!ugin for creating a s!ider which a!!ows you

cyc!e through iages with aniated arrows and dots navigation.

A Sip!e of f!ic*erp!ate e&ap!e as shown be!ow O


62/143

S$unction$%&

S$îc+er-example%îc+erplate$&

autoKîc+ ?true2

autoKîc+Kdelay ?.2 îc+Kanimation ?transorm-slide

7%)

7%)


63/143

4ohtashim 4

4ohtashim is an 4, rom ,4@ $,ligarah% and a ;roject

4anagement ;roessional 6e has more than MO years o

experience in *elecom and Gatacom industries covering

complete G5 6e is managing in-house innovations2

business planning2 implementation2 Vnance and the overall

business development o *utorials ;oint

opal D Herma


64/143

opal is an 4, rom N@ $6isar% and a isco ertiVed etwor+

;roessional 6e has more than MM years o experience in core

data networ+ing and telecommunications 6e develops contents

or omputer cience related subjects 6e is also involved in

developing ,pps or various 4obile devices


65/143

u!tiscro!!.%s is a %Nuery p!ugin for creating sp!it pages with two vertica!

scro!!ing pane!s.

A Sip!e of u!tiscro!! e&ap!e as shown be!ow

multiscrolljs - split multi-scrolling pages plugin


S$Umyontainer%multiscroll$&

sectionsolor?IUMbbcQb2UFBB#P2UOB,,B9J2

anchors?IVrst2second2thirdJ2


66/143

menu?Umenu2

navigation?true2

navigation*ooltips?Ine2*wo2*hreeJ2

loopBottom?true2

loop*op?true

7%)

7%)

#irst slide

econd slide

*hird slide

5et M

5et :

5et P


67/143

'ight M

'ight :

'ight P


$!ic* hereS!idebars is a %Nuery p!ugin for quic*!y and easi!y ip!eenting

app sty!e off+canvas enus and sidebars into your website.

A Sip!e of s!idebar e&ap!e as shown be!ow
http://www.tutorialspoint.com/jquery/src/multiscroller/index.htmhttp://www.tutorialspoint.com/jquery/src/multiscroller/index.htm


68/143

lidebars ,nimation tyles

*utorilaspoint

lidebars is a jRuery plugin or (uic+ly and easily

implementing app style o\-canvas menus and sidebars into your website

lic+ here or slider

,ndroid

Nava

;6;


69/143

$unction$S%&


Sslidebars$%)

7%)

7%$jRuery%)


$!ic* hereowgrid.%s is a %Nuery p!ugin for showing iages in a row.

A Sip!e of rowgrid e&ap!e as shown be!ow

container?beore2

container?ater &

content?"")

display?table)
http://www.tutorialspoint.com/jquery/src/slider/index.htmhttp://www.tutorialspoint.com/jquery/src/slider/index.htm


70/143

7

container?ater &

clear?both)

7

item &

^oat?let)

margin-bottom?MLpx)

7

item img &

max-width?M00])

max-height?M00])

vertical-align?bottom)

7

Vrst-item &

clear?both)

7

last-row2last-row `item &

margin-bottom?0)

7



71/143

S$"container"%rowrid$&itemelector?"item"2

min4argin?M02max4argin?:L2Vrst8temlass?"Vrst-item"7%)

7%)


72/143


73/143



74/143

$!ic* hereA!ertify.%s is a %Nuery p!ugin for showing a!ert essages in

different forat

A Sip!e of a!ertify e&ap!e as shown be!ow

alertiyjs - example page

alertiy-log-custom &

bac+ground?blue)

7

Gialogs

,lert Gialog

onVrm Gialog

;rompt Gialog

ustom 5abels

Button #ocus

Button rder

,jax
http://www.tutorialspoint.com/jquery/src/rowgrid/index.htmhttp://www.tutorialspoint.com/jquery/src/rowgrid/index.htm


75/143

,jax - 4ultiple Gialog

5ogs

tandard 5og

uccess 5og

9rror 5og

ustom 5og

6ide in M0 seconds

;ersistent 5og

*hemes

Bootstrap *heme

unctionreset $%&

S$"Utoggle"%attr$"hre"2"alertiydeaultcss"%)

alertiyset$&

labels ?&

o+ ?"D"2

cancel ?"ancel"

72

delay ?L0002

button'everse ?alse2

button#ocus ?"o+"

7%)

7


76/143

S$"Ualert"%on$clic+2unction$%&

reset$%)

alertiyalert$"*his is an alert dialog"%)

returnalse)

7%)

S$"UconVrm"%on$clic+2unction$%&

reset$%)

alertiyconVrm$"*his is a conVrm dialog"2unction$e%&

i$e%&

alertiysuccess$"ouve clic+ed D"%)

7else&

alertiyerror$"ouve clic+ed ancel"%)

7

7%)

returnalse)

7%)

S$"Uprompt"%on$clic+2unction$%&

reset$%)

alertiyprompt$"*his is a prompt dialog"2unction$e2str%&

i$e%&

alertiysuccess$"ouve clic+ed D and typed? "1str%)

7else&


7

72"Geault Halue"%)

returnalse)


77/143

7%)

S$"Uajax"%on$"clic+"2unction$%&

reset$%)

alertiyconVrm$"onVrmA"2unction$e%&

i$e%&

alertiyalert$"uccessul ,N,3 ater D"%)

7else&

alertiyalert$"uccessul ,N,3 ater ancel"%)

7

7%)

7%)

S$"UnotiVcation"%on$clic+2unction$%&

reset$%)

alertiylog$"tandard log message"%)

returnalse)

7%)

S$"Usuccess"%on$clic+2unction$%&

reset$%)

alertiysuccess$"uccess log message"%)

returnalse)

7%)

S$"Uerror"%on$clic+2unction$%&

reset$%)

alertiyerror$"9rror log message"%)

returnalse)

7%)


78/143

S$"Udelay"%on$clic+2unction$%&

reset$%)

alertiyset$&delay?M00007%)

alertiylog$"6iding in M0 seconds"%)

returnalse)

7%)

S$"Uorever"%on$clic+2unction$%&

reset$%)

alertiylog$"Eill stay until clic+ed"2""20%)

returnalse)

7%)

S$"Ulabels"%on$clic+2unction$%&

reset$%)

alertiyset$&labels?&o+?",ccept"2cancel?"Geny"77%)

alertiyconVrm$"onVrm dialog with custom button labels"2unction$e%&

i$e%&

alertiysuccess$"ouve clic+ed D"%) 7else&


7

7%)

returnalse)

7%)

S$"Uocus"%on$clic+2unction$%&

reset$%)

alertiyset$&button#ocus?"cancel"7%)

alertiyconVrm$"onVrm dialog with cancel button ocused"2unction$e%&


79/143

i$e%&


7else&


7

7%)

returnalse)

7%)

S$"Uorder"%on$clic+2unction$%&

reset$%)

alertiyset$&button'everse?true7%)

alertiyconVrm$"onVrm dialog with reversed button order"2unction$e%&

i$e%&


7else&


7 7%)

returnalse)

7%)

S$"Ucustom"%on$clic+2unction$%&

reset$%)

alertiycustom =alertiyextend$"custom"%)

alertiycustom$"8m a custom log message"%)

returnalse)

7%)

S$"Ubootstrap"%on$clic+2unction$%&


80/143

reset$%)

S$"Utoggle"%attr$"hre"2"alertiybootstrapcss"%)

alertiyprompt$";rompt dialog with bootstrap theme"2unction$e%&

i$e%&


7else&


7

72"Geault Halue"%)

returnalse)

7%)


$!ic* here2rogressbar.%s is a %Nuery p!ugin for showing progress bar

A Sip!e of progressbar e&ap!e as shown be!ow
http://www.tutorialspoint.com/jquery/src/alertify/index.htmhttp://www.tutorialspoint.com/jquery/src/alertify/index.htm


81/143

S$"progress-bar"%loading$%)

S$input%on$clic+2unction$%&

S$"progress-bar"%loading$%)

7%)



82/143

$!ic* hereS!ideshow.%s is a %Nuery p!ugin for quic*!y and easi!y

ip!eenting s!ide show of iages or videos into your website.

A Sip!e of s!ide show e&ap!e as shown be!ow

jRuery$unction$S%&

SsupersiZed$&

slideshow ? M2

autoplay ? M2

startKslide ? M2

stopKloop ? 02

random ? 02

slideKinterval ? P0002

transition ? Y2

transitionKspeed ? M0002

newKwindow ? M2

pauseKhover ? 02
http://www.tutorialspoint.com/jquery/src/progressbar/index.htmhttp://www.tutorialspoint.com/jquery/src/progressbar/index.htm


83/143

+eyboardKnav ? M2

perormance ? M2

imageKprotect ? M2

minKwidth ? 02

minKheight ? 02

verticalKcenter ? M2

horiZontalKcenter? M2

VtKalways ? 02

VtKportrait ? M2

VtKlandscape ? 02

slideKlin+s ? blan+2

thumbKlin+s ? M2

thumbnailKnavigation? 02

slides ? I&image ?

http?//buildinternetsPamaZonawscom/projects/supersiZed/P:/sli

des/+aZvan-Mjpg2

title ?ample demo2thumb ?

http?//buildinternetsPamaZonawscom/projects/supersiZed/P:/thu

mbs/+aZvan-Mjpg2

url ?http?//wwwtutorialspointcom 72

&image ?

http?//buildinternetsPamaZonawscom/projects/supersiZed/P:/sli

des/+aZvan-Pjpg2


http?//buildinternetsPamaZonawscom/projects/supersiZed/P:/

thumbs/+aZvan-Pjpg2


&image ?


84/143


slides/wojno-Mjpg2



thumbs/wojno-Mjpg2


&image ?


slides/wojno-:jpg2



thumbs/wojno-:jpg2


&image ?


slides/wojno-Pjpg2



thumbs/wojno-Pjpg2 url ? http?//wwwtutorialspointcom72

J2

progressKbar ? M2

mouseKscrub ? 0

7%)

7%)


85/143

ulUdemo-bloc+& margin?0 MLpx MLpx MLpx) 7

ulUdemo-bloc+ li& margin?0 0 M0px 0) padding?M0px) display?inline) oat?let)

clear?both)color?Uaaa)bac+ground?url$img/bg-blac+png%)

ont?MMpx6elvetica2,rial2sans-seri)7

ulUdemo-bloc+ li a& color?Ueee) ont-weight?bold) 7


86/143

src="img/pausepng"/>

/


$!ic* here'rawsvg.%s is a %Nuery p!ugin to draw svg iages

A Sip!e of drawsvg e&ap!e as shown be!ow


87/143

hre="https?//ontsgoogleapiscom/cssAamily=pen1ans?F002Y00">

jRuery GrawH ample


88/143

PYMOO-PYFQP PYMOO-:0ML

0-PYFQ-MY:-PYFQ-PYMOO 0-MQQ.

MYPF-PYMOO PYFQ-PYMOO :0MLL 0

PYFQF MY: PYFQF PYMO.Z"/>


89/143

:0L YPFQY :0L FMY.: M.OLPO :F MYLQQ.

:F MFFFLL :F M:O FMY.: M:O YPFQYZ"/>


90/143


91/143


92/143

YPYF-YPO PLMY 0 YPYY :.L.

YPYY YPOZ"/>


93/143

S$unction$%&

varSdoc =S$document%2

Swin =S$window%)

varSintro =S$intro%2

Sitems =SintroVnd$item%2

items5en =Sitemslength2

svgs =SintroVnd$svg%drawsvg$&

callbac+?animate8ntro2

easing?easeutRuart

7%2

curr8tem =0)

unctionanimate8ntro$%&

Sitemsremovelass$active%e($curr8tem11]items5en

%addlass$active%Vnd$svg%drawsvg$animate%)

7

animate8ntro$%)

varSheader =S$header%2

header\*op =Sheadero\set$%top2


94/143

is#ixed =alse)

unctionmenu$%&

i$Swinscroll*op$%>=header\*op %&

i$!is#ixed %&

is#ixed =true)

Sheaderaddlass$ax%)

7

7elsei$is#ixed %&

is#ixed =alse)

Sheaderremovelass$ax%)

7

7

Swinon$scroll2menu%)

menu$%)

Sheaderon$clic+2aIhre="U"J2unction$e%&

epreventGeault$%)

varhash =thishash2

o\set =S$hash%o\set$%top)

S$body2 html%animate$&

scroll*op?o\set

72Y002ease8nutRuart2unction$%&

documentlocationhash =hash)

7%) 7%)

7%)


95/143


#agsort.is a %Nuery p!ugin for showing tags.

A Sip!e of tagsort

*agsort Gemo

html2body &

margin?0)

padding?0) 7

body &

bac+ground-color?U###)

ont-amily?"6elveticaeue-5ight"2"6elvetica eue 5ight"2

"6elvetica eue"26elvetica2,rial2"5ucida rande"2sans-seri)

ont-weight?P00)

7

container &

width?.0])

margin?0auto)


96/143

7

hM >small a &

color?U,,,)

text-decoration?none)

ont-siZe?O0])

margin-let?M0px)

7

hM >small a?hover &

color?U000)

7

item &

box-siZing?border-box)

^oat?let)

position?relative)

min-height?Mpx)

padding-let?MLpx)

padding-right?MLpx) width?:0])

margin-bottom?F0px)

height?PY0px)

max-height?PY0px)

over^ow?hidden)

7

item wrapper &

bac+ground-color?UFFF)

padding?.px)

height?M00])

7


97/143

item wrapper img &

width?M00])

7

item wrapper item-tags &

color?U,,,)

ont-siZe?M:px)

line-height?M.)

7

tagsort-tags-container &

margin?F0px0)

7

S$unction$%&

S$divtags-container%tagort$&selector?item2tagErapper?span2

displayelector?item-tags2displayeperator? / 2inclusive?

alse2ade*ime?:007%)

7%)


98/143

#aceboo+

*witter

et^ix


99/143

@ber

Gropbox

potiy


100/143

Dic+starter

Gigitalcean

*umblr

hopiy


101/143

data-item-tags="Navacript2jRuery2'edis2Nava2o2assandra29*">

tac+ 9xchange

Deen 8


$!ic* hereLogosdistort.%s is a %Nuery p!ugin for quic*!y and easi!y

ip!eenting of ouse over effect on iages

A Sip!e of !ogosdistort e&ap!e as shown be!ow
http://www.tutorialspoint.com/jquery/src/tagsort/index.htmhttp://www.tutorialspoint.com/jquery/src/tagsort/index.htm


102/143

varparticles =true2

particleGensity2

options =&

e\ectEeight?M2

outerBu\er?M0.2

elementGepth?::0

7)


103/143


S$"UdemoM"%logosGistort$options%)

i$particles%&

particleGensity =windowouterEidth TOL)

i$particleGensity :0000%&

particleGensity =:0000)

7

returnS$Uparticle-target%particleground$&

dotolor?UMecLee2

lineolor?U0aFeQ02

density?particleGensityto#ixed$0%2

parallax?alse

7%)

7

7%)


$!ic* here6i!er.%s is a %Nuery p!ugin for quic*!y and easi!y ip!eenting of

up!oading fi!es.

A Sip!e of fi!er.%s e&ap!e as shown be!ow
http://www.tutorialspoint.com/jquery/src/logo/index.htmhttp://www.tutorialspoint.com/jquery/src/logo/index.htm


104/143


S$UinputM%Vler$%)

S$VleKinput%Vler$&

show*humbs?true2

templates?&

box?2 item?

&&V-name [

limit*o?:L77

&&V-image77


105/143

&&V-icon77&&V-siZe:77

2

item,ppend?

&&V-name [

limit*o?:L77

&&V-image77


106/143


2

progressBar?2

item,ppend*o9nd?true2 removeonVrmation?true2

Kselectors?&

list?j#iler-item-list2

item?j#iler-item2

progressBar?bar2

remove?j#iler-item-trash-action2

7

72

add4ore?true2


107/143

Vles?I&

name?"appendedKVlejpg"2

siZe?LFLP2

type?"image/jpg"2

Vle?"http?//dummyimagecom/ML.xMMP/QQQ/MQMaMajpg"2

72&

name?"appendedKVleK:png"2

siZe?QL0P2

type?"image/png"2

Vle?"http?//dummyimagecom/ML.xMMP/QQQ/MQMaMapng"2

7J

7%)

S$Uinput:%Vler$&

limit?null2

maxiZe?null2

extensions?null2

change8nput?

GragCGropVles here

or


108/143

Browse#iles

2

show*humbs?true2

append*o?null2

theme?"dragdropbox"2

templates?&

box?2

item?

&&V-name [

limit*o?:L77

&&V-image77

&&V-progressBar77


109/143

2

item,ppend?

&&V-name [

limit*o?:L77

&&V-image77



110/143

2

progressBar?2

item,ppend*o9nd?alse2

removeonVrmation?alse2

Kselectors?&

list?j#iler-item-list2 item?j#iler-item2

progressBar?bar2

remove?j#iler-item-trash-action2

7

72

upload#ile?&

url?"/php/uploadphp"2

data?&72

type?;*2

enctype?multipart/orm-data2


111/143

beoreend?unction$%&72

success?unction$data2el%&

varparent =elVnd$"j#iler-j;rogressBar"%parent$%)

elVnd$"j#iler-j;rogressBar"%adeut$"slow"2unction$%&

S$"

uccess

"%hide$%append*o$parent%ade8n$"slow"%)

7%)

72

error?unction$el%&

varparent =elVnd$"j#iler-j;rogressBar"%parent$%)

elVnd$"j#iler-j;rogressBar"%adeut$"slow"2unction$%&

S$"

9rror "%hide$%append*o$parent%ade8n$"slow"%)

7%)

72

statusode?&72

on;rogress?unction$%&72

72

dragGrop?&

drag9nter?unction$%&72

drag5eave?unction$%&72

drop?unction$%&72

72


112/143

add4ore?true2

clipBoard;aste?true2

excludeame?null2

beorehow?unction$%&returntrue72

onelect?unction$%&72

aterhow?unction$%&72

on'emove?unction$%&72

on9mpty?unction$%&72

captions?&

button?"hoose #iles"2

eedbac+?"hoose Vles *o @pload"2

eedbac+:?"Vles were chosen"2

drop?"Grop Vle here to @pload"2

removeonVrmation?",re you sure you want to remove this VleA"2

errors?&

Vles5imit?"nly &&V-limit77 Vles are allowed to be uploaded"2

Vles*ype?"nly 8mages are allowed to be uploaded"2 VlesiZe?"&&V-name77is too large!

;leaseupload Vle up to &&V-maxiZe774B"2

VlesiZe,ll?"#ilesyouve choosed are too large!

;leaseupload Vles up to &&V-maxiZe774B"

7

7

7%)

7%)

VleKinput&

display?inline-bloc+)


113/143

padding?M0pxMYpx)

outline?none)

cursor?pointer)

text-decoration?none)

text-align?center)

white-space?nowrap)

ont-amily?sans-seri)

ont-siZe?MMpx)

ont-weight?bold)

border-radius?Ppx)

color?U00.B##)

border?Mpxsolid U00.B##)

vertical-align?middle)

bac+ground-color?U\)

margin-bottom?M0px)

box-shadow?0pxMpxLpxrgba$02020200L%) -web+it-transition?all 0:s)

-moZ-transition?all 0:s)

transition?all 0:s)

7

VleKinput?hover2

VleKinput?active &

bac+ground?U00.B##)

color?U\)

7


114/143


115/143

,ttach a Vle


$!ic* hereWhatsnearby.%s is a %Nuery p!ugin for quic*!y find the nearest

p!aces.

A Sip!e of whatsnearby.%s e&ap!e as shown be!ow
http://www.tutorialspoint.com/jquery/src/filer/index.htmhttp://www.tutorialspoint.com/jquery/src/filer/index.htm


116/143


S$"Uwn:"%whatsnearby$&

Zoom?ML2

width?"M00]"2

address?"jublihills"2

places'adius?L002

places*ypes?Irestaurant2cae2gymJ

7%)

7%)


117/143

&&name77

&&vicinity77


$hec*out.%s is a %Nuery p!ugin for easy to ip!eentation of chec* out

for e+coerce websites.

A Sip!e of chec*out.%s e&ap!e as shown be!ow

@ntitled Gocument


118/143


var,rrays=new,rray$%)

S$Uwrap li%mousemove$unction$%&

varposition =S$this%position$%)

S$Ucart%stop$%animate$&

let ?positionlet1px2

72:L02unction$%&

7%)

7%mouseout$unction$%&

7%)

S$Uwrap li%clic+$unction$%&

varthis8G =S$this%attr$id%)

varitemname =S$this%Vnd$div name%html$%)

varitemprice =S$this%Vnd$div price%html$%)

i$include$,rrays2this8G%%&


119/143

varprice =S$Ueach-1this8G%children$"shopp-price"%

Vnd$em%html$%)

var(uantity =S$Ueach-1this8G%children$"shopp-(uantity"%html$%)

(uantity =parse8nt$(uantity%1parse8nt$M%)

vartotal =parse8nt$itemprice%Tparse8nt$(uantity%)

S$Ueach-1this8G%children$"shopp-price"%

Vnd$em%html$total%)

S$Ueach-1this8G%children$"shopp-(uantity"%html$(uantity%)

varprevKcharges =S$cart-total span%html$%)

prevKcharges =parse8nt$prevKcharges%-parse8nt$price%)

prevKcharges =parse8nt$prevKcharges%1parse8nt$total%)

S$cart-total span%html$prevKcharges%)

S$Utotal-hidden-charges%val$prevKcharges%)

7else&

,rrayspush$this8G%)


prevKcharges =parse8nt$prevKcharges%1parse8nt$itemprice%)


S$Utotal-hidden-charges%val$prevKcharges%)

S$UletKbar cart-ino%append$

1itemname1


120/143

S1itemprice1

M

%)

S$Ucart%css$&-web+it-transorm?

rotate$:0deg%2-moZ-transorm?rotate$:0deg%7%)

7

set*imeout$angle$%2:00%)

7%)

S$remove%live(uery$clic+2unction$%&

vardeduct =S$this%parent$%children$"shopp-price"%

Vnd$em%html$%)


varthis8G =S$this%parent$%attr$id%replace$each-2%)

varpos =getpos$,rrays2this8G%)

,rrayssplice$pos2M2"0"%

prevKcharges =parse8nt$prevKcharges%-parse8nt$deduct%)


S$Utotal-hidden-charges%val$prevKcharges%) S$this%parent$%remove$%)

7%)

S$Uubmit%live(uery$clic+2unction$%&


121/143

vartotalharge =S$Utotal-hidden-charges%val$%)

S$UletKbar%html$*otal harges? S1totalharge%)

returnalse)

7%)

7%)

unctioninclude$arr2obj%&

or$vari =0)i


122/143

5earn Nava?

;rice? S

.00

5earn 6*45

? SL00

5earn ,ndroid

? SFL0


123/143

5earn H

? SM:00

5earn Bootstrap

? SYL

5earn 6*45

? S.00

5earn Bootstrap

? SFL


124/143

5earn H

? SQ00

5earn ,ngular Ns

? S:0


125/143

*otal harges?

S0

hec+ut


$!ic* here/!oc*rain.%s is a %Nuery p!ugin for !ets you ebed the c!assic

#etris gae on your website.

A Sip!e of b!oc*rain e&ap!e as shown be!ow
http://www.tutorialspoint.com/jquery/src/checkout/index.htmhttp://www.tutorialspoint.com/jquery/src/checkout/index.htm


126/143

@se only arrows


127/143

varScover =S$Ucover-tetris%bloc+rain$&

autoplay?true2

autoplay'estart?true2

speed?M002

autoBloc+Eidth?true2

autoBloc+iZe?:L2

theme?candy

7%)

varversuspeed =L00)

varSversusM =S$Utetris-versus-M game%bloc+rain$& autoplay?true2


speed?versuspeed2

onamever?unction$%&

SversusMbloc+rain$restart%)

Sversus:bloc+rain$restart%)

varSscore =Sversus:parent$%Vnd$score%)

Sscoretext$parse8nt$Sscoretext$%%1M%)

7

7%)


128/143

varSversus: =S$Utetris-versus-: game%bloc+rain$&

autoplay?true2


speed?versuspeed2

onamever?unction$%&

SversusMbloc+rain$restart%)

Sversus:bloc+rain$restart%)

varSscore =SversusMparent$%Vnd$score%)

Sscoretext$parse8nt$Sscoretext$%%1M%)

7

7%)

varSdemo =S$Utetris-demo%bloc+rain$&

speed?:02

theme?blac+2

ontart?unction$%&

ga$send2event2tetris2started%) 72

on5ine?unction$%&

ga$send2event2tetris2line%)

72

onamever?unction$score%&

ga$send2event2tetris2over2score%)

7

7%)

S$Uexample-slider%Vnd$btn-next%clic+$unction$event%&


129/143

eventpreventGeault$%)

switchGemo*heme$true%)

7%)

S$Uexample-slider%Vnd$btn-prev%clic+$unction$event%&

eventpreventGeault$%)

switchGemo*heme$alse%)

7%)

unctionswitchGemo*heme$next%&

varthemes =bject+eys$Bloc+rain*hemes%)

varcurrent*heme =Sdemobloc+rain$theme%)

varcurrent8x =themesindex$current*heme%)

i$next %&current8x11)7

else&current8x--)7

i$current8x >=themeslength %&current8x =0)7 i$current8x


130/143

$!ic* here2roducttour.%s is a %Nuery p!ugin for quic*!y and easi!y

ip!eenting of he!p guide into your website.

A Sip!e of producttour.%s e&ap!e as shown be!ow

tart tour

tep M

tep umber M

5orem ipsum dolor sit amet2 consectetur adipisicing

elit 4odi alias animi molestias in2 aperiam
http://www.tutorialspoint.com/jquery/src/blockrain/index.htmhttp://www.tutorialspoint.com/jquery/src/blockrain/index.htm


131/143

tep :

tep umber :

5orem ipsum dolor sit amet2 consectetur

adipisicing elit cia (uasi in (uis(uam

tep P

tep umber P

5orem ipsum dolor sit amet2 consectetur adipisicing

elit ptio illo non enim ut necessitatibus perspiciatis2

dignissimos


132/143


$!ic* hereMegadropdown.%s is a %Nuery p!ugin for easy and quic*!y

ip!eenting of drop down enu.


133/143

images

4enu

Browse allery

;roduct UM

;roduct U:


134/143

;roduct UP

;roduct UF

ervices

4enu

Browse ervices

ervice UM

*his is the item description


135/143

ervice U:


ervice UP


ervice UF


ervice UL



136/143

ervice UY


ervice UO


ervice U.


ervice UQ


ervice UM0



137/143

ervice UMM


ervice UM:


Givider

;age M

;age :

;age P


138/143


$!ic* hereWeather.%s is a %Nuery p!ugin to find the inforation about

weather detai!s.

A Sip!e of Weather.%s e&ap!e as shown be!ow
http://www.tutorialspoint.com/jquery/src/mega/index.htmhttp://www.tutorialspoint.com/jquery/src/mega/index.htm


139/143

Ehats the weather

li+e in A


140/143

@h oh! 8t loo+s li+e we cant

Vnd your location ;lease type your city into the search

box above!

Blan+ anvas Eeather

8cons rom

oun ;roject


141/143

loudby ;ieter N mits

nowrom ational ;ar+ ervice ollection

Grop,lex #uller

mo+eby erardo 4artn 4artneZ

4oonby Nory 'aphael

Earningby 8comatic

unby Nory 'aphael

Eindsoc+by olden 'oo


142/143

6umidity?

]

Eind?


143/143

class="temp-change-button ahrenheit">

#

ajax y jquery manual.docx

Documents