SlideShare una empresa de Scribd logo
1 de 19
By : P . Mahesh Reddy
     Software Engineer

       20‟th Feb 2013
   http://buildinternet.com/live/curtains/
   http://www.willjessup.com/sandbox/jquery/r
    otator/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:f
unction{},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
jQuery: A Concise History and Introduction to its Core Capabilities

Más contenido relacionado

La actualidad más candente

Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and ModernizrJussi Pohjolainen
 
Css secrets
Css secretsCss secrets
Css secretsSanjay
 
Sencha Touch basic concepts, pros and cons
Sencha Touch basic concepts, pros and consSencha Touch basic concepts, pros and cons
Sencha Touch basic concepts, pros and consOleg Gomozov
 
Cytoscape プロジェクト現状報告 2011年2月
Cytoscape プロジェクト現状報告 2011年2月Cytoscape プロジェクト現状報告 2011年2月
Cytoscape プロジェクト現状報告 2011年2月Keiichiro Ono
 
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUIDundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUIsmartads
 
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기Jinho Jung
 
jQtouch, Building Awesome Webapps
jQtouch, Building Awesome WebappsjQtouch, Building Awesome Webapps
jQtouch, Building Awesome WebappsHome
 
PuppetConf 2016: The Long, Twisty Road to Automation: Implementing Puppet at ...
PuppetConf 2016: The Long, Twisty Road to Automation: Implementing Puppet at ...PuppetConf 2016: The Long, Twisty Road to Automation: Implementing Puppet at ...
PuppetConf 2016: The Long, Twisty Road to Automation: Implementing Puppet at ...Puppet
 
Mume JQueryMobile Intro
Mume JQueryMobile IntroMume JQueryMobile Intro
Mume JQueryMobile IntroGonzalo Parra
 
Pengenalan AngularJS
Pengenalan AngularJSPengenalan AngularJS
Pengenalan AngularJSEdi Santoso
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to JqueryAmzad Hossain
 

La actualidad más candente (16)

JQuery
JQueryJQuery
JQuery
 
Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and Modernizr
 
Css secrets
Css secretsCss secrets
Css secrets
 
Sencha Touch basic concepts, pros and cons
Sencha Touch basic concepts, pros and consSencha Touch basic concepts, pros and cons
Sencha Touch basic concepts, pros and cons
 
Cytoscape プロジェクト現状報告 2011年2月
Cytoscape プロジェクト現状報告 2011年2月Cytoscape プロジェクト現状報告 2011年2月
Cytoscape プロジェクト現状報告 2011年2月
 
Dundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUIDundee University HackU 2013 - YUI
Dundee University HackU 2013 - YUI
 
NodeJS in Windows Azure
NodeJS in Windows AzureNodeJS in Windows Azure
NodeJS in Windows Azure
 
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
 
Session php
Session phpSession php
Session php
 
jQtouch, Building Awesome Webapps
jQtouch, Building Awesome WebappsjQtouch, Building Awesome Webapps
jQtouch, Building Awesome Webapps
 
PuppetConf 2016: The Long, Twisty Road to Automation: Implementing Puppet at ...
PuppetConf 2016: The Long, Twisty Road to Automation: Implementing Puppet at ...PuppetConf 2016: The Long, Twisty Road to Automation: Implementing Puppet at ...
PuppetConf 2016: The Long, Twisty Road to Automation: Implementing Puppet at ...
 
Mume JQueryMobile Intro
Mume JQueryMobile IntroMume JQueryMobile Intro
Mume JQueryMobile Intro
 
Pengenalan AngularJS
Pengenalan AngularJSPengenalan AngularJS
Pengenalan AngularJS
 
CMS content
CMS contentCMS content
CMS content
 
Div id
Div idDiv id
Div id
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
 

Destacado (12)

Msw2003
Msw2003Msw2003
Msw2003
 
GuíA Nº 7
GuíA Nº 7GuíA Nº 7
GuíA Nº 7
 
Clase 15 al 19 septiembre
Clase 15 al 19 septiembreClase 15 al 19 septiembre
Clase 15 al 19 septiembre
 
Casa Ricardo Palma
Casa Ricardo PalmaCasa Ricardo Palma
Casa Ricardo Palma
 
Colegio Montserrat
Colegio MontserratColegio Montserrat
Colegio Montserrat
 
1 tipsanimacio¦ün
1 tipsanimacio¦ün1 tipsanimacio¦ün
1 tipsanimacio¦ün
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentation
 
Introducing jQuery
Introducing jQueryIntroducing jQuery
Introducing jQuery
 
jQuery Beginner
jQuery BeginnerjQuery Beginner
jQuery Beginner
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 

Similar a jQuery: A Concise History and Introduction to its Core Capabilities

J querypresentation
J querypresentationJ querypresentation
J querypresentationMahesh Reddy
 
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11virtualsciences41
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQueryAnil Kumar
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
 
Js Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterJs Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterIvo Andreev
 
Xitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディング
Xitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディングXitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディング
Xitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディングscalaconfjp
 
Xitrum @ Scala Matsuri Tokyo 2014
Xitrum @ Scala Matsuri Tokyo 2014Xitrum @ Scala Matsuri Tokyo 2014
Xitrum @ Scala Matsuri Tokyo 2014Ngoc Dao
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQueryachinth
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for youSimon Willison
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterpriseDave Artz
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery BasicsKaloyan Kosev
 
Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...Thinqloud
 
jQuery Tips Tricks Trivia
jQuery Tips Tricks TriviajQuery Tips Tricks Trivia
jQuery Tips Tricks TriviaCognizant
 

Similar a jQuery: A Concise History and Introduction to its Core Capabilities (20)

J querypresentation
J querypresentationJ querypresentation
J querypresentation
 
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
 
Jquery beltranhomewrok
Jquery beltranhomewrokJquery beltranhomewrok
Jquery beltranhomewrok
 
Jquery beltranhomewrok
Jquery beltranhomewrokJquery beltranhomewrok
Jquery beltranhomewrok
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
 
Js Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterJs Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform better
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Xitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディング
Xitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディングXitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディング
Xitrum Web Framework Live Coding Demos / Xitrum Web Framework ライブコーディング
 
Xitrum @ Scala Matsuri Tokyo 2014
Xitrum @ Scala Matsuri Tokyo 2014Xitrum @ Scala Matsuri Tokyo 2014
Xitrum @ Scala Matsuri Tokyo 2014
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
 
Jquery
JqueryJquery
Jquery
 
jQuery for web development
jQuery for web developmentjQuery for web development
jQuery for web development
 
Web2 - jQuery
Web2 - jQueryWeb2 - jQuery
Web2 - jQuery
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery Basics
 
Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...
 
jQuery Tips Tricks Trivia
jQuery Tips Tricks TriviajQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
 

jQuery: A Concise History and Introduction to its Core Capabilities

  • 1. By : P . Mahesh Reddy Software Engineer 20‟th Feb 2013
  • 2. http://buildinternet.com/live/curtains/  http://www.willjessup.com/sandbox/jquery/r otator/rotator.html  http://www.spritely.net/  http://lab.smashup.it/flip/ Impressed !!! Let’s see that jQuery
  • 3. Where‟d jQuery came from?  Why is it so popular?  How has it changed development?  How will it drive innovation?  Then Code!
  • 4. Complex  Highly technical  Highly dynamic  Exponential growth
  • 5. 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
  • 6. Innovation  Open Source  High distribution  Large community  Numerous problems to solve
  • 7. Client side wasn't exciting  “Unique “ browsers The time came for Hero entry..!
  • 8. They are craftsman  Skilled at integration “ Not only a Developer but also jQuery ”
  • 9. Leveraged existing skills  Improved developer efficiency  Lowered barrier to entry  Fostered a community  Protected it‟s core focus
  • 10. DOM centric JavaScript library & API  Plugin Architecture  $ =jQuery Selectors: 1.$(css selectors) ,Ex:$(‘#myTable>#mytr’) #=id,.=class 2.$(DOM Element),Ex:$(„table‟)
  • 12. 1. HTML document traversal and manipulation 2. Event handling 3. Effects 4. Ajax Chaining $(selector).action1().action2().action3();
  • 13. Traversal: Manipulation: .parents(expression) .appendTo(exp) .find(expression) .prepend(content) .prev() .prependTo(exp) .next() .after(content) .siblings() .before(content) .remove() Etc…. Etc….
  • 14.
  • 18. 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