jQuery presentation
-
Upload
mahesh-reddy -
Category
Documents
-
view
148 -
download
1
Transcript of jQuery presentation
![Page 1: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/1.jpg)
Presentation
By : P . Mahesh ReddySoftware Engineer
20’th Feb 2013
![Page 2: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/2.jpg)
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
![Page 3: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/3.jpg)
Where’d jQuery came from?
Why is it so popular?
How has it changed development?
How will it drive innovation?
Then Code!
4 Questions
![Page 4: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/4.jpg)
Complex
Highly technical
Highly dynamic
Exponential growth
The web as we know it
![Page 5: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/5.jpg)
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
![Page 6: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/6.jpg)
Innovation
Open Source
High distribution
Large community
Numerous problems to solve
The Web is rich with…
![Page 7: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/7.jpg)
Client side wasn't exciting
“Unique “ browsers
The time came for Hero entry..!
Ok then ! Let’s Go back to 2006…
![Page 8: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/8.jpg)
They are craftsman
Skilled at integration
“ Not only a Developer but also jQuery ”
So what is a web developer really?
![Page 9: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/9.jpg)
Leveraged existing skills
Improved developer efficiency
Lowered barrier to entry
Fostered a community
Protected it’s core focus
Why jQuery Grew?
![Page 10: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/10.jpg)
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 ?
![Page 11: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/11.jpg)
HTML DOM Tree
Know more at:http://www.w3schools.com/jsref/default.asp
![Page 12: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/12.jpg)
1. HTML document traversal and manipulation
2. Event handling3. Effects4. Ajax
What do we do with jQuery ?
Chaining
$(selector).action1().action2().action3();
![Page 13: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/13.jpg)
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
![Page 14: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/14.jpg)
![Page 15: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/15.jpg)
.click()
.hover()
.dbclick()
.mouseenter()
.mouseleave()
Etc…
2.Event Handling
![Page 16: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/16.jpg)
.show()
.hide()
.fadeIn()
.fadeOut()
.animate()
Etc..
3.Effects
![Page 17: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/17.jpg)
$.ajax({url:aaa.html,data:values,etc..},success:function{},complete{},error:function(){});
4. Ajax
![Page 18: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/18.jpg)
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:
![Page 19: jQuery presentation](https://reader035.fdocuments.in/reader035/viewer/2022071901/55c2440ebb61eb974a8b47a8/html5/thumbnails/19.jpg)