By : P . Mahesh Reddy

Software Engineer

20‟th Feb 2013

http://buildinternet.com/live/curtains/

http://www.willjessup.com/sandbox/jquery/rotator/rotator.html

http://www.spritely.net/

http://lab.smashup.it/flip/

Impressed !!! Let’s see that jQuery

Where‟d jQuery came from?

Why is it so popular?

How has it changed development?

How will it drive innovation?

Then Code!

Complex

Highly technical

Highly dynamic

Exponential growth

5 Doctypes

3 css versions

Flash , Silverlight ,ActiveX , Java Applets

ASP(Classic) , ASP.net ,Java ,PHP ,Ruby ,Python

ColdFusion, Oracle , MySQL, Postgress ,CouchDB

MongoDB , Access

HTTP , FTP ,SMTP ,SSL ,gopher ://

Ajax , Comet, SOAP , and the REST

Innovation

Open Source

High distribution

Large community

Numerous problems to solve

Client side wasn't exciting

“Unique “ browsers

The time came for Hero entry..!

They are craftsman

Skilled at integration

“ Not only a Developer but also jQuery ”

Leveraged existing skills

Improved developer efficiency

Lowered barrier to entry

Fostered a community

Protected it‟s core focus

DOM centric JavaScript library & API

Plugin Architecture

$ =jQuery

Selectors:

1.$(css selectors) ,Ex:$(‘#myTable>#mytr’)#=id,.=class

2.$(DOM Element),Ex:$(„table‟)

Know more at:

http://www.w3schools.com/jsref/defaul

t.asp

1. HTML document traversal and

manipulation

2. Event handling

3. Effects

4. Ajax

Chaining

$(selector).action1().action2().action3();

Traversal: Manipulation:

.parents(expression) .appendTo(exp)

.find(expression) .prepend(content)

.prev() .prependTo(exp)

.next() .after(content)

.siblings() .before(content)

.remove()

Etc…. Etc….

.click()

.hover()

.dbclick()

.mouseenter()

.mouseleave()

Etc…

.show()

.hide()

.fadeIn()

.fadeOut()

.animate()

Etc..

$.ajax({url:aaa.html,data:values,etc..},success:function{},complete{},error:function(){});

Jqueryui.com

http://razorjack.net/quicksand/

http://www.jquery4u.com/function-demos/animate/

http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/demo.html