SlideShare una empresa de Scribd logo
1 de 14
Descargar para leer sin conexión
Short into to JQuery

         Jussi Pohjolainen
Tampere University of Applied Sciences
JQuery?
• Motivation
  – Simple things may require lot of coding
  – Common browsers are different and
    implementation varies
• Solution, use a framework
  – jQuery is a fast and concise JavaScript Library that
    simplifies HTML document traversing, event
    handling, animating, and Ajax interactions for
    rapid web development.
How?
• Download JQuery file (http://jquery.com/)
  – http://code.jquery.com/jquery-1.7.1.min.js
• Make your xhtml page and reference to the
  file in script block
• Make your code and use JQuery functions!
<script type="text/javascript" src="jquery.js"></script>

 <script type="text/javascript">
 //<![CDATA[

  // When document is ready to be manipulated
  jQuery(document).ready( pageReadyToBeManipulated );

  function pageReadyToBeManipulated() {
     // If link is clicked
     jQuery("a").click( linkClick );
  }

  function linkClick(event) {
     alert("Thanks for visiting!");
     // Prevent the default action
     event.preventDefault();
  }

 //]]>
 </script>
Some Basic Syntax
• JQuery can be used in two ways:
  – JQuery()
  – Or
  – $()
• $ is an alias to JQuery()! $ more commonly
  used
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
//<![CDATA[

// When document is ready to be manipulated
$(document).ready( pageReadyToBeManipulated );

function pageReadyToBeManipulated() {
   // If link is clicked
   $("a").click( linkClick );
}

function linkClick(event) {
   alert("Thanks for visiting!");
   // Prevent the default action
   event.preventDefault();
}

//]]>
</script>
// USING ANONYMOUS FUNCTIONS

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
//<![CDATA[

 $(document).ready(function(){
     $("a").click(function(event){
         alert("Thanks for visiting!");
         event.preventDefault();
     });
 });

//]]>
</script>
// EVEN SHORTER SYNTAX, FORGET THE DOCUMENT
PARAMETER

<script type="text/javascript" src="jquery.js"></script>

 <script type="text/javascript">
 //<![CDATA[

 $().ready(function(){
     $("a").click(function(event){
         alert("Thanks for visiting!");
         event.preventDefault();
     });
 });

 //]]>
 </script>
Getters in the Traditional Way
• getElementsById

• getElementsByTagName

• getAttribute
JQuery and Selectors
• Select all h1 elements
  – $(“h1”)
• Select the first one
  – $(“h1”)*0+
• Add contents
  – $(“h1”)*0+.innerHTML = “hello!”;
• Lot of different selectors
  – http://api.jquery.com/category/selectors/
Creating Elements in Traditional Way

•   createElement
•   createTextNode
•   setAttribute
•   appendChild
•   removeChild
JQuery Insert
$().ready(function(){
     $("a").click(function(event){

              // Insert the new element after element with id here
              $("<p>New Element</p>").insertAfter("#here");

              event.preventDefault();
        });
  });
Manipulation Functions
•   .addClass()
•   .after()
•   .append()
•   .css()
•   …
•   See:
    http://api.jquery.com/category/manipulation/
Some Effects: Lot of Anim Functions
$('#clickme').click(function() {
  $('#book').slideUp('slow', function() {
    // Animation complete.
  });
});

Más contenido relacionado

La actualidad más candente

Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)jeresig
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery BasicsKaloyan Kosev
 
Quick Intro to JQuery and JQuery Mobile
Quick Intro to JQuery and JQuery MobileQuick Intro to JQuery and JQuery Mobile
Quick Intro to JQuery and JQuery MobileJussi Pohjolainen
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentationMevin Mohan
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
 
Dart and AngularDart
Dart and AngularDartDart and AngularDart
Dart and AngularDartLoc Nguyen
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejsNick Lee
 
Auto tools
Auto toolsAuto tools
Auto tools祺 周
 
Client-side Transformations
Client-side TransformationsClient-side Transformations
Client-side TransformationsJohn Boxall
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)jeresig
 
Javascript and jQuery intro
Javascript and jQuery introJavascript and jQuery intro
Javascript and jQuery introwaw325
 
Don't Worry jQuery is very Easy:Learning Tips For jQuery
Don't Worry jQuery is very Easy:Learning Tips For jQueryDon't Worry jQuery is very Easy:Learning Tips For jQuery
Don't Worry jQuery is very Easy:Learning Tips For jQueryshabab shihan
 
JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)jeresig
 

La actualidad más candente (18)

Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery Basics
 
Quick Intro to JQuery and JQuery Mobile
Quick Intro to JQuery and JQuery MobileQuick Intro to JQuery and JQuery Mobile
Quick Intro to JQuery and JQuery Mobile
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentation
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
 
Dart and AngularDart
Dart and AngularDartDart and AngularDart
Dart and AngularDart
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 
jQuery Best Practice
jQuery Best Practice jQuery Best Practice
jQuery Best Practice
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
 
Auto tools
Auto toolsAuto tools
Auto tools
 
Client-side Transformations
Client-side TransformationsClient-side Transformations
Client-side Transformations
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
 
Javascript and jQuery intro
Javascript and jQuery introJavascript and jQuery intro
Javascript and jQuery intro
 
Don't Worry jQuery is very Easy:Learning Tips For jQuery
Don't Worry jQuery is very Easy:Learning Tips For jQueryDon't Worry jQuery is very Easy:Learning Tips For jQuery
Don't Worry jQuery is very Easy:Learning Tips For jQuery
 
bcgr3-jquery
bcgr3-jquerybcgr3-jquery
bcgr3-jquery
 
Introducing jQuery
Introducing jQueryIntroducing jQuery
Introducing jQuery
 
UI-Router
UI-RouterUI-Router
UI-Router
 
JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)
 

Similar a JQuery

Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and ModernizrJussi Pohjolainen
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiMuhammad Ehtisham Siddiqui
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoRob Bontekoe
 
Introduction to jquery mobile with Phonegap
Introduction to jquery mobile with PhonegapIntroduction to jquery mobile with Phonegap
Introduction to jquery mobile with PhonegapRakesh Jha
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsEPAM Systems
 
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
 
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
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014Mark Rackley
 
How to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQueryHow to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQuerykolkatageeks
 
Mume JQueryMobile Intro
Mume JQueryMobile IntroMume JQueryMobile Intro
Mume JQueryMobile IntroGonzalo Parra
 

Similar a JQuery (20)

Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and Modernizr
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
 
J query training
J query trainingJ query training
J query training
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
JQuery
JQueryJQuery
JQuery
 
jQuery for web development
jQuery for web developmentjQuery for web development
jQuery for web development
 
Introduction to jquery mobile with Phonegap
Introduction to jquery mobile with PhonegapIntroduction to jquery mobile with Phonegap
Introduction to jquery mobile with Phonegap
 
jQuery Basic API
jQuery Basic APIjQuery Basic API
jQuery Basic API
 
jQuery
jQueryjQuery
jQuery
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
 
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)
 
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...
 
SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014SharePoint & jQuery Guide - SPSNashville 2014
SharePoint & jQuery Guide - SPSNashville 2014
 
How to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQueryHow to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQuery
 
Mume JQueryMobile Intro
Mume JQueryMobile IntroMume JQueryMobile Intro
Mume JQueryMobile Intro
 
jQuery
jQueryjQuery
jQuery
 
jQuery besic
jQuery besicjQuery besic
jQuery besic
 
jQuery Presentasion
jQuery PresentasionjQuery Presentasion
jQuery Presentasion
 
JQuery UI
JQuery UIJQuery UI
JQuery UI
 

Más de Jussi Pohjolainen

libGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferenceslibGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferencesJussi Pohjolainen
 
libGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame AnimationlibGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame AnimationJussi Pohjolainen
 
Intro to Building Android Games using libGDX
Intro to Building Android Games using libGDXIntro to Building Android Games using libGDX
Intro to Building Android Games using libGDXJussi Pohjolainen
 
Advanced JavaScript Development
Advanced JavaScript DevelopmentAdvanced JavaScript Development
Advanced JavaScript DevelopmentJussi Pohjolainen
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame AnimationJussi Pohjolainen
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame AnimationJussi Pohjolainen
 
Implementing a Simple Game using libGDX
Implementing a Simple Game using libGDXImplementing a Simple Game using libGDX
Implementing a Simple Game using libGDXJussi Pohjolainen
 
Building Android games using LibGDX
Building Android games using LibGDXBuilding Android games using LibGDX
Building Android games using LibGDXJussi Pohjolainen
 
Creating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and GesturesCreating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and GesturesJussi Pohjolainen
 
Creating Games for Asha - platform
Creating Games for Asha - platformCreating Games for Asha - platform
Creating Games for Asha - platformJussi Pohjolainen
 

Más de Jussi Pohjolainen (20)

Moved to Speakerdeck
Moved to SpeakerdeckMoved to Speakerdeck
Moved to Speakerdeck
 
Java Web Services
Java Web ServicesJava Web Services
Java Web Services
 
Box2D and libGDX
Box2D and libGDXBox2D and libGDX
Box2D and libGDX
 
libGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferenceslibGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and Preferences
 
libGDX: Tiled Maps
libGDX: Tiled MapslibGDX: Tiled Maps
libGDX: Tiled Maps
 
libGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame AnimationlibGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame Animation
 
Intro to Building Android Games using libGDX
Intro to Building Android Games using libGDXIntro to Building Android Games using libGDX
Intro to Building Android Games using libGDX
 
Advanced JavaScript Development
Advanced JavaScript DevelopmentAdvanced JavaScript Development
Advanced JavaScript Development
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
libGDX: Scene2D
libGDX: Scene2DlibGDX: Scene2D
libGDX: Scene2D
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame Animation
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame Animation
 
libGDX: User Input
libGDX: User InputlibGDX: User Input
libGDX: User Input
 
Implementing a Simple Game using libGDX
Implementing a Simple Game using libGDXImplementing a Simple Game using libGDX
Implementing a Simple Game using libGDX
 
Building Android games using LibGDX
Building Android games using LibGDXBuilding Android games using LibGDX
Building Android games using LibGDX
 
Android Threading
Android ThreadingAndroid Threading
Android Threading
 
Creating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and GesturesCreating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and Gestures
 
Creating Games for Asha - platform
Creating Games for Asha - platformCreating Games for Asha - platform
Creating Games for Asha - platform
 
Intro to Asha UI
Intro to Asha UIIntro to Asha UI
Intro to Asha UI
 

Último

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 

Último (20)

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 

JQuery

  • 1. Short into to JQuery Jussi Pohjolainen Tampere University of Applied Sciences
  • 2. JQuery? • Motivation – Simple things may require lot of coding – Common browsers are different and implementation varies • Solution, use a framework – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
  • 3. How? • Download JQuery file (http://jquery.com/) – http://code.jquery.com/jquery-1.7.1.min.js • Make your xhtml page and reference to the file in script block • Make your code and use JQuery functions!
  • 4. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ // When document is ready to be manipulated jQuery(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked jQuery("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault(); } //]]> </script>
  • 5. Some Basic Syntax • JQuery can be used in two ways: – JQuery() – Or – $() • $ is an alias to JQuery()! $ more commonly used
  • 6. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ // When document is ready to be manipulated $(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked $("a").click( linkClick ); } function linkClick(event) { alert("Thanks for visiting!"); // Prevent the default action event.preventDefault(); } //]]> </script>
  • 7. // USING ANONYMOUS FUNCTIONS <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); //]]> </script>
  • 8. // EVEN SHORTER SYNTAX, FORGET THE DOCUMENT PARAMETER <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $().ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); event.preventDefault(); }); }); //]]> </script>
  • 9. Getters in the Traditional Way • getElementsById • getElementsByTagName • getAttribute
  • 10. JQuery and Selectors • Select all h1 elements – $(“h1”) • Select the first one – $(“h1”)*0+ • Add contents – $(“h1”)*0+.innerHTML = “hello!”; • Lot of different selectors – http://api.jquery.com/category/selectors/
  • 11. Creating Elements in Traditional Way • createElement • createTextNode • setAttribute • appendChild • removeChild
  • 12. JQuery Insert $().ready(function(){ $("a").click(function(event){ // Insert the new element after element with id here $("<p>New Element</p>").insertAfter("#here"); event.preventDefault(); }); });
  • 13. Manipulation Functions • .addClass() • .after() • .append() • .css() • … • See: http://api.jquery.com/category/manipulation/
  • 14. Some Effects: Lot of Anim Functions $('#clickme').click(function() { $('#book').slideUp('slow', function() { // Animation complete. }); });

Notas del editor

  1. &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt; &lt;title&gt;Hello World - JQuery&lt;/title&gt; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot;/&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; //&lt;![CDATA[ // When document is ready to be manipulatedjQuery(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clickedjQuery(&quot;a&quot;).click( linkClick ); } function linkClick(event) { alert(&quot;Thanks for visiting!&quot;); // Prevent the default actionevent.preventDefault(); } //]]&gt; &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;Google&lt;/a&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;
  2. &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt; &lt;title&gt;Hello World - JQuery&lt;/title&gt; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot;/&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; //&lt;![CDATA[ // When document is ready to be manipulated $(document).ready( pageReadyToBeManipulated ); function pageReadyToBeManipulated() { // If link is clicked $(&quot;a&quot;).click( linkClick ); } function linkClick(event) { alert(&quot;Thanks for visiting!&quot;); // Prevent the default actionevent.preventDefault(); } //]]&gt; &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;Google&lt;/a&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;
  3. &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt; &lt;title&gt;Hello World - JQuery&lt;/title&gt; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot;/&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; //&lt;![CDATA[ $(document).ready(function(){ $(&quot;a&quot;).click(function(event){ alert(&quot;Thanks for visiting!&quot;);event.preventDefault(); }); }); //]]&gt; &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;Google&lt;/a&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;
  4. &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt; &lt;title&gt;Hello World - JQuery&lt;/title&gt; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot;/&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; //&lt;![CDATA[ $(document).ready(function(){ $(&quot;a&quot;).click(function(event){ alert(&quot;Thanks for visiting!&quot;);event.preventDefault(); }); }); //]]&gt; &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;Google&lt;/a&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;
  5. &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt; &lt;title&gt;Hello World - JQuery&lt;/title&gt; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot;/&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; //&lt;![CDATA[ $().ready(function(){ $(&quot;a&quot;).click(function(event){ $(&quot;h1&quot;)[0].innerHTML = &quot;New Title!&quot;;event.preventDefault(); }); }); //]]&gt; &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;Example&lt;/h1&gt;&lt;p&gt;&lt;a href=&quot;&quot;&gt;Change Title!&lt;/a&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;
  6. &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt; &lt;title&gt;Hello World - JQuery&lt;/title&gt; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot;/&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; //&lt;![CDATA[ $().ready(function(){ $(&quot;a&quot;).click(function(event){ $(&quot;&lt;p&gt;New Element&lt;/p&gt;&quot;).insertAfter(&quot;#here&quot;);event.preventDefault(); }); }); //]]&gt; &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;Example&lt;/h1&gt;&lt;p&gt;&lt;a href=&quot;&quot;&gt;Add element!&lt;/a&gt;&lt;/p&gt;&lt;div id=&quot;here&quot;&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;