SlideShare a Scribd company logo
1 of 33
Download to read offline
jQuery for beginners
Agenda
 Introduction to JQuery
 Selectors
 Events
 Traversing
 Effects & Animations
 Ajax
 Introduction to JQuery UI
What is jQuery
Open-Source JavaScript library that simplifies cross-
browser client side scripting.
Animations
DOM manipulation
AJAX
Extensibility through plugins
Created by John Resig and released on Jan 2006
Most current release is 2.1.1 (May 1st
, 2014)
History
JS Libraries
Comparison
Comparison
Who uses jQuery?
Statistics
 60% of all websites use JQuery, up from 54.3%
one year ago.
 JQuery version 1 is used by 93.1% of all the
websites whose JavaScript library we know.
Example
Html:
<p>Hello Prokarma! I'm Divakar</p>
Script:
$(function(){
$("p").addClass("isCool");
//keep telling yourself that..
});
Resulting html:
<p class="isCool">Hello Prokarma! I'm Divakar</p>
Break It Down Now!
$(function(){// = $(document).ready(function(){
$ ("p") .addClass("isCool");
});
The noConflict() Method
 noConflict() method releases the hold on the $ shortcut identifier, so that other
scripts can use it.
 You can also create your own shortcut very easily.
Syntax:
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still
working!");
});
});
Syntax:
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still
working!");
});
});
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
Selectors
Reference - Complete list of selectors
 jQuery selectors allow you to select and manipulate HTML element(s).
 Used to "find" (or select) HTML elements based on their id, classes, types, attributes,
values of attributes and much more.
Comparision
What are the
advantages of
the jQuery
method?
$("a").click(function(){
alert("You clicked a link!");
});
$("a").click(function(){
alert("You clicked a link!");
});
<a href="#" onclick="alert(‘You clicked a link!')">Link</a><a href="#" onclick="alert(‘You clicked a link!')">Link</a>
Traversing
 Traverse -> travel across / move back and forth or sideways.
 Traversing can be broken down into three basic parts: parents, children, and siblings.
 Categorize the DOM into ancestor, descendant, siblings .
Code:
<div>
<ul>
<li>
<span></span>
</li>
<li>
<b></b>
</li>
</ul>
</div>
Traversing Methods
Reference - Complete list of jQuery Traversing Methods
jQuery for beginners
Filters
 Reduce the set of matched elements to those that match the selector or pass the
function's test.
 Three most basic filtering methods are first(), last() and eq()
 jQuery eq() Method – Returns an element with a
specific index number of the selected elements.
 jQuery filter() Method – lets you specify a criteria.
Elements that do not match the criteria are removed
from the selection, and those that match will be returned.
 jQuery not() Method - Returns all elements that do not
match the criteria.
$(document).ready(function(){
$("p").not(".intro");
});
$(document).ready(function(){
$("p").filter(".intro");
});
$(document).ready(function(){
$("p").eq(1);
});
Events
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
 An event represents the precise moment when something happens.
$("p").click(function(){
// action goes here!!
});
$("p").click(function(){
// action goes here!!
});
Manipulating HTML
$("#btnReplace").click(function(){
$("#lemon").html("Lollipop soufflé ice
cream tootsie roll donut...");
});
$("#btnReplace").click(function(){
$("#lemon").html("Lollipop soufflé ice
cream tootsie roll donut...");
});
Manipulating CSS
$("#btnColorCheck").click(function({
alert($("#lemon").css("color"));
});
$("#btnColorCheck").click(function({
alert($("#lemon").css("color"));
});
jQuery for beginners
Effects
$("#btnToggle").click(function(){
$("#lemon").slideToggle("slow");
});
$("#btnToggle").click(function(){
$("#lemon").slideToggle("slow");
});
Animation
 jQuery animate() method is used to create custom animations.
 jQuery animate() uses Queue Functionality.
 jQuery queue() - Show or manipulate the queue of functions to be executed on the
matched elements.
 jQuery stop() - used to stop animations.
Syntax:
$(selector).animate(
{params},
speed,
callback
);
Syntax:
$(selector).animate(
{params},
speed,
callback
);
Ajax
 AJAX does not require the page to be reloaded
 Instead JavaScript communicates
directly with the server using the
XMLHttpRequest object
function makeGetRequest(wordId) {
//make a connection to the server ... specifying that you intend to
make a GET request
//to the server. Specifiy the page name and the URL parameters to
send
http.open('get', 'definition.jsp?id=' + wordId);
//assign a handler for the response
http.onreadystatechange = processResponse;
//actually send the request to the server
http.send(null);
}
function createRequestObject() {
var tmpXmlHttpObject;
//depending on what the browser supports, use the right way to
// create the XMLHttpRequest object
if (window.XMLHttpRequest) {
// Mozilla, Safari would use this method ...
tmpXmlHttpObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE would use this method ...
tmpXmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}
return tmpXmlHttpObject;
}
//call the above function to create the XMLHttpRequest
//object var http = createRequestObject();
function processResponse() {
//check if the response has been received from the server
if(http.readyState == 4){
//read and assign the response from the server
var response = http.responseText;
//in this case simply assign the response to the contents of the
<div> on the page.
document.getElementById('description').innerHTML = response;
}
}
JQuery Ajax
$.ajax({
// The link we are accessing.
url: jLink.attr( "href" ),
// The type of request.
type: "get",
// The type of data that is getting returned.
dataType: "html",
error: function(){
ShowStatus( "AJAX - error()" );
// Load the content in to the page.
jContent.html( "<p>Page Not Found!!</p>" );
},
beforeSend: function(){
ShowStatus( "AJAX - beforeSend()" );
},
complete: function(){
ShowStatus( "AJAX - complete()" );
},
success: function( strData ){
ShowStatus( "AJAX - success()" );
// Load the content in to the page.
jContent.html( strData );
}
});
JQuery Ajax Methods
Method Description
$.ajax() Performs an async AJAX request
$.ajaxPrefilter() Handle custom Ajax options or modify existing options before ea
$.ajaxSetup() Sets the default values for future AJAX requests
$.ajaxTransport() Creates an object that handles the actual transmission of Ajax
$.get() Loads data from a server using an AJAX HTTP GET request
$.getJSON() Loads JSON-encoded data from a server using a HTTP GET request
$.getScript() Loads (and executes) a JavaScript from a server using an AJAX H
$.param() Creates a serialized representation of an array or object (can
$.post() Loads data from a server using an AJAX HTTP POST request
ajaxComplete() Specifies a function to run when the AJAX request completes
ajaxError() Specifies a function to run when the AJAX request completes wit
ajaxSend() Specifies a function to run before the AJAX request is sent
ajaxStart() Specifies a function to run when the first AJAX request begins
ajaxStop() Specifies a function to run when all AJAX requests have complet
ajaxSuccess() Specifies a function to run when an AJAX request completes succ
load() Loads data from a server and puts the returned data into the se
serialize() Encodes a set of form elements as a string for submission
serializeArray() Encodes a set of form elements as an array of names and values
jQuery for beginners
JQuery UI
• jQuery UI is a widget and interaction library built on top of the
jQuery JavaScript Library that you can use to build highly interactive
web applications.
Benefits of JqueryUI
Cohesive and Consistent APIs.
Comprehensive Browser Support
Open Source and Free to Use
Good Documentation.
Powerful Theming Mechanism.
Stable and Maintenance Friendly.
Benefits of JqueryUI
Cohesive and Consistent APIs.
Comprehensive Browser Support
Open Source and Free to Use
Good Documentation.
Powerful Theming Mechanism.
Stable and Maintenance Friendly.
Integrating JQuery UI
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Download UI Library from official website / CDNs
We can customize the jQuery UI file from Download Builder by
selecting the required widgets / themes.
We can design custom theme from ThemeRoller.
Add the scripts at the footer for better performance.
References
jQuery http://api.jquery.com/
Blog http://blog.jquery.com/
jQuery UI http://jqueryui.com/
jQuery for beginners
jQuery for beginners

More Related Content

What's hot

12advanced Swing
12advanced Swing12advanced Swing
12advanced SwingAdil Jafri
 
Understanding Asynchronous JavaScript
Understanding Asynchronous JavaScriptUnderstanding Asynchronous JavaScript
Understanding Asynchronous JavaScriptjnewmanux
 
jQuery Rescue Adventure
jQuery Rescue AdventurejQuery Rescue Adventure
jQuery Rescue AdventureAllegient
 
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsJeff Durta
 
The Snake and the Butler
The Snake and the ButlerThe Snake and the Butler
The Snake and the ButlerBarak Korren
 
.NET Database Toolkit
.NET Database Toolkit.NET Database Toolkit
.NET Database Toolkitwlscaudill
 
Architectures in the compose world
Architectures in the compose worldArchitectures in the compose world
Architectures in the compose worldFabio Collini
 
What's new in jQuery 1.5
What's new in jQuery 1.5What's new in jQuery 1.5
What's new in jQuery 1.5Martin Kleppe
 
How to write easy-to-test JavaScript
How to write easy-to-test JavaScriptHow to write easy-to-test JavaScript
How to write easy-to-test JavaScriptYnon Perek
 
Managing parallelism using coroutines
Managing parallelism using coroutinesManaging parallelism using coroutines
Managing parallelism using coroutinesFabio Collini
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesSiarhei Barysiuk
 
Codegeneration With Xtend
Codegeneration With XtendCodegeneration With Xtend
Codegeneration With XtendSven Efftinge
 
Advanced JavaScript Concepts
Advanced JavaScript ConceptsAdvanced JavaScript Concepts
Advanced JavaScript ConceptsNaresh Kumar
 
Selectors and normalizing state shape
Selectors and normalizing state shapeSelectors and normalizing state shape
Selectors and normalizing state shapeMuntasir Chowdhury
 
Mastering Oracle ADF Bindings
Mastering Oracle ADF BindingsMastering Oracle ADF Bindings
Mastering Oracle ADF BindingsEuegene Fedorenko
 
GKAC 2015 Apr. - RxAndroid
GKAC 2015 Apr. - RxAndroidGKAC 2015 Apr. - RxAndroid
GKAC 2015 Apr. - RxAndroidGDG Korea
 

What's hot (20)

12advanced Swing
12advanced Swing12advanced Swing
12advanced Swing
 
Understanding Asynchronous JavaScript
Understanding Asynchronous JavaScriptUnderstanding Asynchronous JavaScript
Understanding Asynchronous JavaScript
 
jQuery Rescue Adventure
jQuery Rescue AdventurejQuery Rescue Adventure
jQuery Rescue Adventure
 
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
 
The Snake and the Butler
The Snake and the ButlerThe Snake and the Butler
The Snake and the Butler
 
Retrofitting
RetrofittingRetrofitting
Retrofitting
 
.NET Database Toolkit
.NET Database Toolkit.NET Database Toolkit
.NET Database Toolkit
 
Architectures in the compose world
Architectures in the compose worldArchitectures in the compose world
Architectures in the compose world
 
What's new in jQuery 1.5
What's new in jQuery 1.5What's new in jQuery 1.5
What's new in jQuery 1.5
 
How to write easy-to-test JavaScript
How to write easy-to-test JavaScriptHow to write easy-to-test JavaScript
How to write easy-to-test JavaScript
 
Managing parallelism using coroutines
Managing parallelism using coroutinesManaging parallelism using coroutines
Managing parallelism using coroutines
 
ERRest
ERRestERRest
ERRest
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best Practices
 
Codegeneration With Xtend
Codegeneration With XtendCodegeneration With Xtend
Codegeneration With Xtend
 
Advanced JavaScript Concepts
Advanced JavaScript ConceptsAdvanced JavaScript Concepts
Advanced JavaScript Concepts
 
Selectors and normalizing state shape
Selectors and normalizing state shapeSelectors and normalizing state shape
Selectors and normalizing state shape
 
Typescript barcelona
Typescript barcelonaTypescript barcelona
Typescript barcelona
 
Mastering Oracle ADF Bindings
Mastering Oracle ADF BindingsMastering Oracle ADF Bindings
Mastering Oracle ADF Bindings
 
GKAC 2015 Apr. - RxAndroid
GKAC 2015 Apr. - RxAndroidGKAC 2015 Apr. - RxAndroid
GKAC 2015 Apr. - RxAndroid
 
Digesting jQuery
Digesting jQueryDigesting jQuery
Digesting jQuery
 

Similar to jQuery for beginners

Ajax Fundamentals Web Applications
Ajax Fundamentals Web ApplicationsAjax Fundamentals Web Applications
Ajax Fundamentals Web Applicationsdominion
 
Javascript And J Query
Javascript And J QueryJavascript And J Query
Javascript And J Queryitsarsalan
 
Ajax for dummies, and not only.
Ajax for dummies, and not only.Ajax for dummies, and not only.
Ajax for dummies, and not only.Nerd Tzanetopoulos
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for JoomlaLuke Summerfield
 
jQuery basics for Beginners
jQuery basics for BeginnersjQuery basics for Beginners
jQuery basics for BeginnersPooja Saxena
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Adnan Sohail
 
Ajax tutorial
Ajax tutorialAjax tutorial
Ajax tutorialKat Roque
 
J Query The Write Less Do More Javascript Library
J Query   The Write Less Do More Javascript LibraryJ Query   The Write Less Do More Javascript Library
J Query The Write Less Do More Javascript Libraryrsnarayanan
 
Basics of Java Script (JS)
Basics of Java Script (JS)Basics of Java Script (JS)
Basics of Java Script (JS)Ajay Khatri
 
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajaxbaygross
 
Building Applications Using Ajax
Building Applications Using AjaxBuilding Applications Using Ajax
Building Applications Using Ajaxs_pradeep
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQueryGunjan Kumar
 

Similar to jQuery for beginners (20)

JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
 
Ajax Fundamentals Web Applications
Ajax Fundamentals Web ApplicationsAjax Fundamentals Web Applications
Ajax Fundamentals Web Applications
 
Javascript And J Query
Javascript And J QueryJavascript And J Query
Javascript And J Query
 
Ajax for dummies, and not only.
Ajax for dummies, and not only.Ajax for dummies, and not only.
Ajax for dummies, and not only.
 
J query training
J query trainingJ query training
J query training
 
Ajax
AjaxAjax
Ajax
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
 
jQuery basics for Beginners
jQuery basics for BeginnersjQuery basics for Beginners
jQuery basics for Beginners
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
 
Ajax Lecture Notes
Ajax Lecture NotesAjax Lecture Notes
Ajax Lecture Notes
 
J Query Presentation of David
J Query Presentation of DavidJ Query Presentation of David
J Query Presentation of David
 
Ajax tutorial
Ajax tutorialAjax tutorial
Ajax tutorial
 
J Query The Write Less Do More Javascript Library
J Query   The Write Less Do More Javascript LibraryJ Query   The Write Less Do More Javascript Library
J Query The Write Less Do More Javascript Library
 
Basics of Java Script (JS)
Basics of Java Script (JS)Basics of Java Script (JS)
Basics of Java Script (JS)
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
 
JavaScript Lessons 2023
JavaScript Lessons 2023JavaScript Lessons 2023
JavaScript Lessons 2023
 
jQuery
jQueryjQuery
jQuery
 
Building Applications Using Ajax
Building Applications Using AjaxBuilding Applications Using Ajax
Building Applications Using Ajax
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 

Recently uploaded

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 

Recently uploaded (19)

High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 

jQuery for beginners

  • 2. Agenda  Introduction to JQuery  Selectors  Events  Traversing  Effects & Animations  Ajax  Introduction to JQuery UI
  • 3. What is jQuery Open-Source JavaScript library that simplifies cross- browser client side scripting. Animations DOM manipulation AJAX Extensibility through plugins Created by John Resig and released on Jan 2006 Most current release is 2.1.1 (May 1st , 2014)
  • 9. Statistics  60% of all websites use JQuery, up from 54.3% one year ago.  JQuery version 1 is used by 93.1% of all the websites whose JavaScript library we know.
  • 10. Example Html: <p>Hello Prokarma! I'm Divakar</p> Script: $(function(){ $("p").addClass("isCool"); //keep telling yourself that.. }); Resulting html: <p class="isCool">Hello Prokarma! I'm Divakar</p>
  • 11. Break It Down Now! $(function(){// = $(document).ready(function(){ $ ("p") .addClass("isCool"); });
  • 12. The noConflict() Method  noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.  You can also create your own shortcut very easily. Syntax: $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery is still working!"); }); }); Syntax: $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery is still working!"); }); }); var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery is still working!"); }); }); var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery is still working!"); }); });
  • 13. Selectors Reference - Complete list of selectors  jQuery selectors allow you to select and manipulate HTML element(s).  Used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more.
  • 14. Comparision What are the advantages of the jQuery method? $("a").click(function(){ alert("You clicked a link!"); }); $("a").click(function(){ alert("You clicked a link!"); }); <a href="#" onclick="alert(‘You clicked a link!')">Link</a><a href="#" onclick="alert(‘You clicked a link!')">Link</a>
  • 15. Traversing  Traverse -> travel across / move back and forth or sideways.  Traversing can be broken down into three basic parts: parents, children, and siblings.  Categorize the DOM into ancestor, descendant, siblings . Code: <div> <ul> <li> <span></span> </li> <li> <b></b> </li> </ul> </div>
  • 16. Traversing Methods Reference - Complete list of jQuery Traversing Methods
  • 18. Filters  Reduce the set of matched elements to those that match the selector or pass the function's test.  Three most basic filtering methods are first(), last() and eq()  jQuery eq() Method – Returns an element with a specific index number of the selected elements.  jQuery filter() Method – lets you specify a criteria. Elements that do not match the criteria are removed from the selection, and those that match will be returned.  jQuery not() Method - Returns all elements that do not match the criteria. $(document).ready(function(){ $("p").not(".intro"); }); $(document).ready(function(){ $("p").filter(".intro"); }); $(document).ready(function(){ $("p").eq(1); });
  • 19. Events Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload  An event represents the precise moment when something happens. $("p").click(function(){ // action goes here!! }); $("p").click(function(){ // action goes here!! });
  • 20. Manipulating HTML $("#btnReplace").click(function(){ $("#lemon").html("Lollipop soufflé ice cream tootsie roll donut..."); }); $("#btnReplace").click(function(){ $("#lemon").html("Lollipop soufflé ice cream tootsie roll donut..."); });
  • 24. Animation  jQuery animate() method is used to create custom animations.  jQuery animate() uses Queue Functionality.  jQuery queue() - Show or manipulate the queue of functions to be executed on the matched elements.  jQuery stop() - used to stop animations. Syntax: $(selector).animate( {params}, speed, callback ); Syntax: $(selector).animate( {params}, speed, callback );
  • 25. Ajax  AJAX does not require the page to be reloaded  Instead JavaScript communicates directly with the server using the XMLHttpRequest object function makeGetRequest(wordId) { //make a connection to the server ... specifying that you intend to make a GET request //to the server. Specifiy the page name and the URL parameters to send http.open('get', 'definition.jsp?id=' + wordId); //assign a handler for the response http.onreadystatechange = processResponse; //actually send the request to the server http.send(null); } function createRequestObject() { var tmpXmlHttpObject; //depending on what the browser supports, use the right way to // create the XMLHttpRequest object if (window.XMLHttpRequest) { // Mozilla, Safari would use this method ... tmpXmlHttpObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE would use this method ... tmpXmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP"); } return tmpXmlHttpObject; } //call the above function to create the XMLHttpRequest //object var http = createRequestObject(); function processResponse() { //check if the response has been received from the server if(http.readyState == 4){ //read and assign the response from the server var response = http.responseText; //in this case simply assign the response to the contents of the <div> on the page. document.getElementById('description').innerHTML = response; } }
  • 26. JQuery Ajax $.ajax({ // The link we are accessing. url: jLink.attr( "href" ), // The type of request. type: "get", // The type of data that is getting returned. dataType: "html", error: function(){ ShowStatus( "AJAX - error()" ); // Load the content in to the page. jContent.html( "<p>Page Not Found!!</p>" ); }, beforeSend: function(){ ShowStatus( "AJAX - beforeSend()" ); }, complete: function(){ ShowStatus( "AJAX - complete()" ); }, success: function( strData ){ ShowStatus( "AJAX - success()" ); // Load the content in to the page. jContent.html( strData ); } });
  • 27. JQuery Ajax Methods Method Description $.ajax() Performs an async AJAX request $.ajaxPrefilter() Handle custom Ajax options or modify existing options before ea $.ajaxSetup() Sets the default values for future AJAX requests $.ajaxTransport() Creates an object that handles the actual transmission of Ajax $.get() Loads data from a server using an AJAX HTTP GET request $.getJSON() Loads JSON-encoded data from a server using a HTTP GET request $.getScript() Loads (and executes) a JavaScript from a server using an AJAX H $.param() Creates a serialized representation of an array or object (can $.post() Loads data from a server using an AJAX HTTP POST request ajaxComplete() Specifies a function to run when the AJAX request completes ajaxError() Specifies a function to run when the AJAX request completes wit ajaxSend() Specifies a function to run before the AJAX request is sent ajaxStart() Specifies a function to run when the first AJAX request begins ajaxStop() Specifies a function to run when all AJAX requests have complet ajaxSuccess() Specifies a function to run when an AJAX request completes succ load() Loads data from a server and puts the returned data into the se serialize() Encodes a set of form elements as a string for submission serializeArray() Encodes a set of form elements as an array of names and values
  • 29. JQuery UI • jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library that you can use to build highly interactive web applications. Benefits of JqueryUI Cohesive and Consistent APIs. Comprehensive Browser Support Open Source and Free to Use Good Documentation. Powerful Theming Mechanism. Stable and Maintenance Friendly. Benefits of JqueryUI Cohesive and Consistent APIs. Comprehensive Browser Support Open Source and Free to Use Good Documentation. Powerful Theming Mechanism. Stable and Maintenance Friendly.
  • 30. Integrating JQuery UI <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> Download UI Library from official website / CDNs We can customize the jQuery UI file from Download Builder by selecting the required widgets / themes. We can design custom theme from ThemeRoller. Add the scripts at the footer for better performance.