Introduction to jQuery

Nivedhitha Venugopal
Nivedhitha VenugopalSystems Engineer at Tata Consultancy Services à Tata Consultancy Services
jQueryWRITE LESS, DO MORE
1
INTRODUCTION
2
jQuery
 Open source Javascript framework
 Crossbrowser client side scripting
 Uses CSS syntax for selection
 Most used Javascript library
 $ - synonymous with the jQuery function
3
Loading jQuery
Locally : <script src="/js/jquery.js">
CDN :
 ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
 ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js
BEST PRACTICE :
When scripts are downloading they block everything else in almost
all browsers. Load scripts at the bottom of the page so they don't
interrupt page content downloads.
4
Ready state
 The DOM is "ready" when everything on the page has loaded.
 Stylesheets
 JavaScripts
 Images
 In order to make sure that jQuery can find all the elements, wrap the
jQuery code within in the document ready function.
$(document).ready(function(){ … });
$(function() { … });
5
Selecting elements
Selector Reference :
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
 Pseudo selectors (:) - :first, :button, :input, :checked
 Filtering selectors – has, not, filter, eq
Testing Selectors :
http://www.w3schools.com/jquery/trysel.asp
CONVENTION :
When storing selections in a variable prefix ‘$’ to indicate that the variable
contains a jQuery object.
6
Getters and setters
 GET :
var htmlContent = $(“selector”).html()
var textContent = $(“selector”).text()
 SET :
$(“selector”).html(‘content’)
$(“selector”).text(‘content’)
 Example :
https://jsfiddle.net/NivedhithaV/aw9q87b5/2/
For form elements val() is used
7
Iteration
$( 'li' ).each(function( index, elem ) {
// this: the current DOM element
// index: the current element's index in the selection
// elem: the current DOM element (same as this)
$( elem ).prepend( '<b>' + index + ': </b>' );
});
Example :
https://jsfiddle.net/NivedhithaV/2shq5x69/1/
8
Chaining
CALLING A SERIES OF METHODS ON A SELECTION WITHOUT REPEATING
THE SELECTOR
9
TRAVERSING &
MANIPULATING THE
DOM
10
Selecting elements relative to
another element
 First
 Siblings
 Prev / next
 Parent
 Parents
 Children
 Find
 closest
11
Manipulating Style
 Indrirectly using classes
 addClass
 removeClass
 toggleClass
 Directly styling elements
 $(“selector”).css(“property”, “value”)
 $(“selector”).css({
“property”, “value”,
“property”, “value”…
})
12
EVENTS
13
Binding events
 Events –
 Click, dblclick, change, blur, focus
 Mouse events
 Keyboard events
 Bind/unbind – connecting/disconnecting event handler
 One – connecting events to run only once
 On – attaching one or more events, will work for current and future
elements
 Trigger – triggering an event after binding
14
Other functions
 preventDefault – prevents the default action of the event
$( "a" ).click(function( event ) {
event.preventDefault();
...
});
 stopPropogation – prevents event from bubbling up to parent
 Example : https://jsfiddle.net/NivedhithaV/32rvk8zk/1/
15
EFFECTS
16
Built-in effects
 Effects
 Show/hide
 fadeIn/fadeOut
 SlideUp/slideDown/slideToggle
 Duration
 Effect(duration in ms)
 Slow/fast
 Custom effects – animate()
17
AJAX
18
Asynchronous javascript and XML
 Loading data from server without page reload
 Uses Xmlhttprequest - XHR
 Returns jqXHR object — a jQuery XML HTTP Request
 Form serialize
 Example - https://jsfiddle.net/NivedhithaV/mhJRQ/9/
19
 $.ajax
$.ajax({
url: ‘/sample-url',
dataType: 'json',
success: function( data) {
//callback
},
error: function( req, status, err ) {
//error
}
});
20
 $.get – non destructive operations
$.get( ‘/sample-url', function( html ){
$( '#target' ).html( html );
});
 $.post – destructive operations
$.post( '/sample-url', { key: ‘value' },
function( data) {
console.log( data);
});
21
jqXHR
var data = $.ajax({
url: '/sample-url',
dataType: 'json'
});
 Then
 Done
 Fail
 Always
22
Questions?
23
1 sur 23

Recommandé

Railsbridge javascript par
Railsbridge   javascriptRailsbridge   javascript
Railsbridge javascriptp4geoff
185 vues15 diapositives
Client Web par
Client WebClient Web
Client WebMarkiyan Matsekh
453 vues64 diapositives
JQuery par
JQueryJQuery
JQueryJussi Pohjolainen
1.2K vues14 diapositives
Short intro to JQuery and Modernizr par
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and ModernizrJussi Pohjolainen
5.4K vues22 diapositives
Getting classy with ES6 par
Getting classy with ES6Getting classy with ES6
Getting classy with ES6Andy Sharman
310 vues17 diapositives
jQuery Has Coding Standards par
jQuery Has Coding StandardsjQuery Has Coding Standards
jQuery Has Coding StandardsRJ Bruneel
1.1K vues60 diapositives

Contenu connexe

Tendances

jQuery presentation par
jQuery presentationjQuery presentation
jQuery presentationMahesh Reddy
343 vues19 diapositives
Owasp & php par
Owasp & phpOwasp & php
Owasp & phpAhmed Kamel Taha
32 vues10 diapositives
Don't Worry jQuery is very Easy:Learning Tips For jQuery par
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
819 vues22 diapositives
WordPress Third Party Authentication par
WordPress Third Party AuthenticationWordPress Third Party Authentication
WordPress Third Party AuthenticationAaron Brazell
5K vues13 diapositives
Introducing jQuery par
Introducing jQueryIntroducing jQuery
Introducing jQueryWildan Maulana
1.1K vues17 diapositives
jQuery('#knowledge').appendTo('#you'); par
jQuery('#knowledge').appendTo('#you');jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');mikehostetler
2.6K vues57 diapositives

Tendances(20)

Don't Worry jQuery is very Easy:Learning Tips For jQuery par shabab shihan
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
shabab shihan819 vues
WordPress Third Party Authentication par Aaron Brazell
WordPress Third Party AuthenticationWordPress Third Party Authentication
WordPress Third Party Authentication
Aaron Brazell5K vues
jQuery('#knowledge').appendTo('#you'); par mikehostetler
jQuery('#knowledge').appendTo('#you');jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');
mikehostetler2.6K vues
jQuery 1.7 Events par dmethvin
jQuery 1.7 EventsjQuery 1.7 Events
jQuery 1.7 Events
dmethvin3.9K vues
HTML5 - The 2012 of the Web par Robert Nyman
HTML5 - The 2012 of the WebHTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
Robert Nyman5.9K vues
Canjs par bitovi
CanjsCanjs
Canjs
bitovi5.9K vues
Casl. isomorphic permission management.pptx par Sergiy Stotskiy
Casl. isomorphic permission management.pptxCasl. isomorphic permission management.pptx
Casl. isomorphic permission management.pptx
Sergiy Stotskiy114 vues
Java script browser objects 2 par H K
Java script browser objects 2Java script browser objects 2
Java script browser objects 2
H K879 vues

En vedette

Snm 9872346154 par
Snm 9872346154Snm 9872346154
Snm 9872346154Muhammad Afzal
118 vues7 diapositives
Assurance and Performance Framework presentation par
Assurance and Performance Framework presentationAssurance and Performance Framework presentation
Assurance and Performance Framework presentationMartin Gavet
331 vues12 diapositives
Você se considera um profissional de alta produtividade? par
Você se considera um profissional de alta produtividade?Você se considera um profissional de alta produtividade?
Você se considera um profissional de alta produtividade?Mariana de Góes Borges
272 vues26 diapositives
Liberate-Strategy-2014-18-v.1 par
Liberate-Strategy-2014-18-v.1Liberate-Strategy-2014-18-v.1
Liberate-Strategy-2014-18-v.1Martin Gavet
156 vues13 diapositives
Whyalla News -Experiencing the workforce par
Whyalla News -Experiencing the workforceWhyalla News -Experiencing the workforce
Whyalla News -Experiencing the workforceBaerbel McDougall
143 vues3 diapositives
Il come e il perchè par
Il come e il perchèIl come e il perchè
Il come e il perchèBernardo1969
222 vues8 diapositives

Similaire à Introduction to jQuery

Js Saturday 2013 your jQuery could perform better par
Js Saturday 2013 your jQuery could perform betterJs Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterIvo Andreev
1.5K vues27 diapositives
jQuery Best Practice par
jQuery Best Practice jQuery Best Practice
jQuery Best Practice chandrashekher786
654 vues20 diapositives
J query b_dotnet_ug_meet_12_may_2012 par
J query b_dotnet_ug_meet_12_may_2012J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012ghnash
1.1K vues40 diapositives
Web2 - jQuery par
Web2 - jQueryWeb2 - jQuery
Web2 - jQueryvoicerepublic
271 vues34 diapositives
JavaScript patterns chapter 8 of mine par
JavaScript patterns chapter 8 of mineJavaScript patterns chapter 8 of mine
JavaScript patterns chapter 8 of mineChien-Wei Huang
298 vues22 diapositives
Learning jQuery made exciting in an interactive session by one of our team me... par
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
790 vues61 diapositives

Similaire à Introduction to jQuery(20)

Js Saturday 2013 your jQuery could perform better par Ivo Andreev
Js Saturday 2013 your jQuery could perform betterJs Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform better
Ivo Andreev1.5K vues
J query b_dotnet_ug_meet_12_may_2012 par ghnash
J query b_dotnet_ug_meet_12_may_2012J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012
ghnash1.1K vues
JavaScript patterns chapter 8 of mine par Chien-Wei Huang
JavaScript patterns chapter 8 of mineJavaScript patterns chapter 8 of mine
JavaScript patterns chapter 8 of mine
Chien-Wei Huang298 vues
Learning jQuery made exciting in an interactive session by one of our team me... par Thinqloud
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 790 vues
How to increase Performance of Web Application using JQuery par kolkatageeks
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
kolkatageeks1.9K vues
A Rich Web experience with jQuery, Ajax and .NET par James Johnson
A Rich Web experience with jQuery, Ajax and .NETA Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NET
James Johnson2.8K vues
The Theory Of The Dom par kaven yan
The Theory Of The DomThe Theory Of The Dom
The Theory Of The Dom
kaven yan2.7K vues
A Rich Web Experience with jQuery, Ajax and .NET par James Johnson
A Rich Web Experience with jQuery, Ajax and .NETA Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NET
James Johnson417 vues
Jquery- One slide completing all JQuery par Knoldus Inc.
Jquery- One slide completing all JQueryJquery- One slide completing all JQuery
Jquery- One slide completing all JQuery
Knoldus Inc.3.1K vues
jQuery Fundamentals par Gil Fink
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
Gil Fink5.4K vues

Dernier

Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De... par
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...Moses Kemibaro
35 vues38 diapositives
The Role of Patterns in the Era of Large Language Models par
The Role of Patterns in the Era of Large Language ModelsThe Role of Patterns in the Era of Large Language Models
The Role of Patterns in the Era of Large Language ModelsYunyao Li
91 vues65 diapositives
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT par
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITUpdates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITShapeBlue
208 vues8 diapositives
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha... par
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...ShapeBlue
183 vues18 diapositives
NTGapps NTG LowCode Platform par
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform Mustafa Kuğu
437 vues30 diapositives
Business Analyst Series 2023 - Week 4 Session 8 par
Business Analyst Series 2023 -  Week 4 Session 8Business Analyst Series 2023 -  Week 4 Session 8
Business Analyst Series 2023 - Week 4 Session 8DianaGray10
145 vues13 diapositives

Dernier(20)

Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De... par Moses Kemibaro
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...
Moses Kemibaro35 vues
The Role of Patterns in the Era of Large Language Models par Yunyao Li
The Role of Patterns in the Era of Large Language ModelsThe Role of Patterns in the Era of Large Language Models
The Role of Patterns in the Era of Large Language Models
Yunyao Li91 vues
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT par ShapeBlue
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITUpdates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
ShapeBlue208 vues
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha... par ShapeBlue
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
ShapeBlue183 vues
NTGapps NTG LowCode Platform par Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu437 vues
Business Analyst Series 2023 - Week 4 Session 8 par DianaGray10
Business Analyst Series 2023 -  Week 4 Session 8Business Analyst Series 2023 -  Week 4 Session 8
Business Analyst Series 2023 - Week 4 Session 8
DianaGray10145 vues
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ... par ShapeBlue
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
ShapeBlue120 vues
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue par ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlueCloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
ShapeBlue139 vues
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... par Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And... par ShapeBlue
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
Enabling DPU Hardware Accelerators in XCP-ng Cloud Platform Environment - And...
ShapeBlue108 vues
State of the Union - Rohit Yadav - Apache CloudStack par ShapeBlue
State of the Union - Rohit Yadav - Apache CloudStackState of the Union - Rohit Yadav - Apache CloudStack
State of the Union - Rohit Yadav - Apache CloudStack
ShapeBlue303 vues
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023 par BookNet Canada
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
BookNet Canada44 vues
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online par ShapeBlue
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online
ShapeBlue225 vues
"Running students' code in isolation. The hard way", Yurii Holiuk par Fwdays
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk
Fwdays36 vues
The Power of Generative AI in Accelerating No Code Adoption.pdf par Saeed Al Dhaheri
The Power of Generative AI in Accelerating No Code Adoption.pdfThe Power of Generative AI in Accelerating No Code Adoption.pdf
The Power of Generative AI in Accelerating No Code Adoption.pdf
Why and How CloudStack at weSystems - Stephan Bienek - weSystems par ShapeBlue
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsWhy and How CloudStack at weSystems - Stephan Bienek - weSystems
Why and How CloudStack at weSystems - Stephan Bienek - weSystems
ShapeBlue247 vues

Introduction to jQuery

  • 3. jQuery  Open source Javascript framework  Crossbrowser client side scripting  Uses CSS syntax for selection  Most used Javascript library  $ - synonymous with the jQuery function 3
  • 4. Loading jQuery Locally : <script src="/js/jquery.js"> CDN :  ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js  ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js BEST PRACTICE : When scripts are downloading they block everything else in almost all browsers. Load scripts at the bottom of the page so they don't interrupt page content downloads. 4
  • 5. Ready state  The DOM is "ready" when everything on the page has loaded.  Stylesheets  JavaScripts  Images  In order to make sure that jQuery can find all the elements, wrap the jQuery code within in the document ready function. $(document).ready(function(){ … }); $(function() { … }); 5
  • 6. Selecting elements Selector Reference : http://www.w3schools.com/jquery/jquery_ref_selectors.asp  Pseudo selectors (:) - :first, :button, :input, :checked  Filtering selectors – has, not, filter, eq Testing Selectors : http://www.w3schools.com/jquery/trysel.asp CONVENTION : When storing selections in a variable prefix ‘$’ to indicate that the variable contains a jQuery object. 6
  • 7. Getters and setters  GET : var htmlContent = $(“selector”).html() var textContent = $(“selector”).text()  SET : $(“selector”).html(‘content’) $(“selector”).text(‘content’)  Example : https://jsfiddle.net/NivedhithaV/aw9q87b5/2/ For form elements val() is used 7
  • 8. Iteration $( 'li' ).each(function( index, elem ) { // this: the current DOM element // index: the current element's index in the selection // elem: the current DOM element (same as this) $( elem ).prepend( '<b>' + index + ': </b>' ); }); Example : https://jsfiddle.net/NivedhithaV/2shq5x69/1/ 8
  • 9. Chaining CALLING A SERIES OF METHODS ON A SELECTION WITHOUT REPEATING THE SELECTOR 9
  • 11. Selecting elements relative to another element  First  Siblings  Prev / next  Parent  Parents  Children  Find  closest 11
  • 12. Manipulating Style  Indrirectly using classes  addClass  removeClass  toggleClass  Directly styling elements  $(“selector”).css(“property”, “value”)  $(“selector”).css({ “property”, “value”, “property”, “value”… }) 12
  • 14. Binding events  Events –  Click, dblclick, change, blur, focus  Mouse events  Keyboard events  Bind/unbind – connecting/disconnecting event handler  One – connecting events to run only once  On – attaching one or more events, will work for current and future elements  Trigger – triggering an event after binding 14
  • 15. Other functions  preventDefault – prevents the default action of the event $( "a" ).click(function( event ) { event.preventDefault(); ... });  stopPropogation – prevents event from bubbling up to parent  Example : https://jsfiddle.net/NivedhithaV/32rvk8zk/1/ 15
  • 17. Built-in effects  Effects  Show/hide  fadeIn/fadeOut  SlideUp/slideDown/slideToggle  Duration  Effect(duration in ms)  Slow/fast  Custom effects – animate() 17
  • 19. Asynchronous javascript and XML  Loading data from server without page reload  Uses Xmlhttprequest - XHR  Returns jqXHR object — a jQuery XML HTTP Request  Form serialize  Example - https://jsfiddle.net/NivedhithaV/mhJRQ/9/ 19
  • 20.  $.ajax $.ajax({ url: ‘/sample-url', dataType: 'json', success: function( data) { //callback }, error: function( req, status, err ) { //error } }); 20
  • 21.  $.get – non destructive operations $.get( ‘/sample-url', function( html ){ $( '#target' ).html( html ); });  $.post – destructive operations $.post( '/sample-url', { key: ‘value' }, function( data) { console.log( data); }); 21
  • 22. jqXHR var data = $.ajax({ url: '/sample-url', dataType: 'json' });  Then  Done  Fail  Always 22