Presentation

By : P . Mahesh ReddySoftware 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/

Let’s watch these first..!

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!

4 Questions

Complex

Highly technical

Highly dynamic

Exponential growth

The web as we know it

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

The Web is rich with…

Client side wasn't exciting

“Unique “ browsers

The time came for Hero entry..!

Ok then ! Let’s Go back to 2006…

They are craftsman

Skilled at integration

“ Not only a Developer but also jQuery ”

So what is a web developer really?

Leveraged existing skills

Improved developer efficiency

Lowered barrier to entry

Fostered a community

Protected it’s core focus

Why jQuery Grew?

DOM centric JavaScript library & API

Plugin Architecture

$ =jQuery

Selectors:

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

2.$(DOM Element),Ex:$(‘table’)

What exactly is jQuery ?

HTML DOM Tree

Know more at:http://www.w3schools.com/jsref/default.asp

1. HTML document traversal and manipulation

2. Event handling3. Effects4. Ajax

What do we do with jQuery ?

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….

1.HTML document traversal and manipulation

.click()

.hover()

.dbclick()

.mouseenter()

.mouseleave()

Etc…

2.Event Handling

.show()

.hide()

.fadeIn()

.fadeOut()

.animate()

Etc..

3.Effects

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

4. Ajax

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

Examples: