SlideShare a Scribd company logo
BY: HARESH C. MAHTANI JR
BS-IT 3RD YEAR
jQuery
• What is JQuery
• is free, open source software licensed under
the MIT License. jQuery's syntax is designed to
make it easier to navigate a document,
selectDOM elements, create animations,
handle events, and develop Ajax
applications. jQuery also provides capabilities
for developers to create plug-inson top of the
JavaScript library. This enables developers to
create abstractions for low-level interaction
and animation, advanced effects and high-
level, theme-able widgets. The modular
approach to the jQuery library allows the
creation of powerful dynamic web pages
and web applications
JQuery
• Features of Jquery
• DOM element selections using the multi-browser open source selector engine Sizzle, a spin-off
of the jQuery project
• DOM traversal and modification (including support for CSS 1–3)
• DOM manipulation based on CSS selectors that uses node elements name and node elements
attributes (id and class) as criteria to build selectors
• Events
• Effects and animations
• AJAX
• Extensibility through plug-ins
• Utilities - such as user agent information, feature detection
• Compatibility methods that are natively available in modern browsers but need fall backs for
older ones - For example the inArray() and each() functions.
• Multi-browser (not to be confused with cross-browser) support.
JQuery
• The jQuery library is a single JavaScript
file, containing all of its common
DOM, event, effects, and Ajax functions. It
can be included within a web page by
linking to a local copy, or to one of the
many copies available from public servers.
jQuery has a CDN sponsored by Media
Temple(previously at Amazon).
Google and Microsoft host it as well.
The JQuery Library
<script type="text/javascript"
src="jquery.js"></script>
• It is also possible to include jQuery directly
from content delivery networks.
<script
src="http://ajax.googleapis.com/ajax/libs/j
query/1.9.1/jquery.min.js"></script>
Examples of How to include
JQuery
• jQuery has two usage styles:
• Via the $ function, which is a factory
method for the jQuery object. These
functions, often called commands,
are chainable as they all return jQuery
objects.
• Via $.-prefixed functions. These are utility
functions, which do not act upon the
jQuery object directly.
Usage Styles
• This is an example of a jquery being use to
add manipulation of multiple DOM nodes
beginning in a $ function being called with
a CSS selector string which results in a
Jquery object referencing matching
elements in an HTML
Examples of a Jquery
• Besides accessing DOM nodes
through jQuery object hierarchy, it is
also possible to create new DOM
elements if a string passed as the
argument to $() looks like HTML. For
example, this line finds an HTML
SELECT element with ID="carmakes",
and adds an OPTION element with
value "VAG" and text "Volkswagen"
• $("div.test").add("p.quote").addClass(
"blue").slideDown("slow");
Examples of a JQuery
• the methods prefixed with $. are
convenience methods or affect global
properties and behaviour.
• $('select#carmakes').append($('<option
/>').attr({value:"VAG"}).append("Volkswage
n"));
Examples of a JQuery
• This writes "234" to the document.
• $.each([1,2,3], function() {
document.write(this + 1); });
Examples of a JQuery
• This example posts the
data name=John and location=Boston to example.ph
p on the server. When this request finishes
successfully, the success function is called to alert the
user. If the request fails, it will alert the user to the
failure, the status of the request, and the specific error.
$.ajax({ type: "POST", url: "example.php", data:
"name=John&location=Boston" }).done( function(msg)
{ alert( "Data Saved: " + msg ); }).fail( function(
xmlHttpRequest, statusText, errorThrown ) { alert( "Your
form submission failed.nn" + "XML Http Request: " +
JSON.stringify( xmlHttpRequest ) + ",nStatus Text: " +
statusText + ",nError Thrown: " + errorThrown ); });
Examples of a JQuery
• JQuery's architecture allows developers to
create plug-in code to extend its
functionality. Currently there are thousands
of jQuery plug-ins available on the
web that cover a wide range of
functionality such as Ajax helpers, web
services, datagrids, dynamic
lists, XML and XSLT tools, drag and
drop, events, cookie handling, modal
windows, and even a jQuery-
based Commodore 64emulator.
jQuery plug-ins
• Wikipedia
• http://en.wikipedia.org/wiki/JQuery
Reference
Ad

More Related Content

What's hot (16)

jQuery Effects
jQuery EffectsjQuery Effects
jQuery Effects
Adelon Zeta
 
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Ayes Chinmay
 
JavaScript JQUERY AJAX
JavaScript JQUERY AJAXJavaScript JQUERY AJAX
JavaScript JQUERY AJAX
Makarand Bhatambarekar
 
Simplify AJAX using jQuery
Simplify AJAX using jQuerySimplify AJAX using jQuery
Simplify AJAX using jQuery
Siva Arunachalam
 
jQuery
jQueryjQuery
jQuery
sgrover
 
jQuery - Chapter 5 - Ajax
jQuery - Chapter 5 -  AjaxjQuery - Chapter 5 -  Ajax
jQuery - Chapter 5 - Ajax
WebStackAcademy
 
Web Development Introduction to jQuery
Web Development Introduction to jQueryWeb Development Introduction to jQuery
Web Development Introduction to jQuery
Laurence Svekis ✔
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
Sergey Romaneko
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
Richard Leland
 
jQuery
jQueryjQuery
jQuery
Ivano Malavolta
 
Ajax and Jquery
Ajax and JqueryAjax and Jquery
Ajax and Jquery
People Strategists
 
KnockoutJS and MVVM
KnockoutJS and MVVMKnockoutJS and MVVM
KnockoutJS and MVVM
Manvendra Singh
 
jQuery
jQueryjQuery
jQuery
Vishwa Mohan
 
22 j query1
22 j query122 j query1
22 j query1
Fajar Baskoro
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
Richard Leland
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
Mark Rackley
 

Similar to J query resh (20)

Jquery beltranhomewrok
Jquery beltranhomewrokJquery beltranhomewrok
Jquery beltranhomewrok
Catherine Beltran
 
J query presentation
J query presentationJ query presentation
J query presentation
sawarkar17
 
J query presentation
J query presentationJ query presentation
J query presentation
akanksha17
 
Top 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | EdurekaTop 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | Edureka
Edureka!
 
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSONAn introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
Syed Moosa Kaleem
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
Gurpreet singh
 
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
 
JQuery UI
JQuery UIJQuery UI
JQuery UI
Gary Yeh
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
Anil Kumar
 
AJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdfAJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdf
SreeVani74
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
Salvatore Fazio
 
jQuery Tips Tricks Trivia
jQuery Tips Tricks TriviajQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
Cognizant
 
Web2 - jQuery
Web2 - jQueryWeb2 - jQuery
Web2 - jQuery
voicerepublic
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Mark Roden
 
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
 
Difference between java script and jquery
Difference between java script and jqueryDifference between java script and jquery
Difference between java script and jquery
Umar Ali
 
Introduction to Jquery
Introduction to Jquery Introduction to Jquery
Introduction to Jquery
Tajendar Arora
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Collaboration Technologies
 
Web Components v1
Web Components v1Web Components v1
Web Components v1
Mike Wilcox
 
Building Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan DieboltBuilding Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan Diebolt
QuickBase, Inc.
 
J query presentation
J query presentationJ query presentation
J query presentation
sawarkar17
 
J query presentation
J query presentationJ query presentation
J query presentation
akanksha17
 
Top 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | EdurekaTop 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | Edureka
Edureka!
 
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSONAn introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
Syed Moosa Kaleem
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
Gurpreet singh
 
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
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
Anil Kumar
 
AJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdfAJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdf
SreeVani74
 
jQuery Tips Tricks Trivia
jQuery Tips Tricks TriviajQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
Cognizant
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Mark Roden
 
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
 
Difference between java script and jquery
Difference between java script and jqueryDifference between java script and jquery
Difference between java script and jquery
Umar Ali
 
Introduction to Jquery
Introduction to Jquery Introduction to Jquery
Introduction to Jquery
Tajendar Arora
 
Web Components v1
Web Components v1Web Components v1
Web Components v1
Mike Wilcox
 
Building Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan DieboltBuilding Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan Diebolt
QuickBase, Inc.
 
Ad

Recently uploaded (20)

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
Procurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptxProcurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptx
Jon Hansen
 
HCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser EnvironmentsHCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser Environments
panagenda
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxDevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
Justin Reock
 
Heap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and DeletionHeap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and Deletion
Jaydeep Kale
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
Electronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploitElectronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploit
niftliyevhuseyn
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
organizerofv
 
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
Procurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptxProcurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptx
Jon Hansen
 
HCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser EnvironmentsHCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser Environments
panagenda
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxDevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
Justin Reock
 
Heap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and DeletionHeap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and Deletion
Jaydeep Kale
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
Electronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploitElectronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploit
niftliyevhuseyn
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
organizerofv
 
Ad

J query resh

  • 1. BY: HARESH C. MAHTANI JR BS-IT 3RD YEAR jQuery
  • 2. • What is JQuery • is free, open source software licensed under the MIT License. jQuery's syntax is designed to make it easier to navigate a document, selectDOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-inson top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high- level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications JQuery
  • 3. • Features of Jquery • DOM element selections using the multi-browser open source selector engine Sizzle, a spin-off of the jQuery project • DOM traversal and modification (including support for CSS 1–3) • DOM manipulation based on CSS selectors that uses node elements name and node elements attributes (id and class) as criteria to build selectors • Events • Effects and animations • AJAX • Extensibility through plug-ins • Utilities - such as user agent information, feature detection • Compatibility methods that are natively available in modern browsers but need fall backs for older ones - For example the inArray() and each() functions. • Multi-browser (not to be confused with cross-browser) support. JQuery
  • 4. • The jQuery library is a single JavaScript file, containing all of its common DOM, event, effects, and Ajax functions. It can be included within a web page by linking to a local copy, or to one of the many copies available from public servers. jQuery has a CDN sponsored by Media Temple(previously at Amazon). Google and Microsoft host it as well. The JQuery Library
  • 5. <script type="text/javascript" src="jquery.js"></script> • It is also possible to include jQuery directly from content delivery networks. <script src="http://ajax.googleapis.com/ajax/libs/j query/1.9.1/jquery.min.js"></script> Examples of How to include JQuery
  • 6. • jQuery has two usage styles: • Via the $ function, which is a factory method for the jQuery object. These functions, often called commands, are chainable as they all return jQuery objects. • Via $.-prefixed functions. These are utility functions, which do not act upon the jQuery object directly. Usage Styles
  • 7. • This is an example of a jquery being use to add manipulation of multiple DOM nodes beginning in a $ function being called with a CSS selector string which results in a Jquery object referencing matching elements in an HTML Examples of a Jquery
  • 8. • Besides accessing DOM nodes through jQuery object hierarchy, it is also possible to create new DOM elements if a string passed as the argument to $() looks like HTML. For example, this line finds an HTML SELECT element with ID="carmakes", and adds an OPTION element with value "VAG" and text "Volkswagen" • $("div.test").add("p.quote").addClass( "blue").slideDown("slow"); Examples of a JQuery
  • 9. • the methods prefixed with $. are convenience methods or affect global properties and behaviour. • $('select#carmakes').append($('<option />').attr({value:"VAG"}).append("Volkswage n")); Examples of a JQuery
  • 10. • This writes "234" to the document. • $.each([1,2,3], function() { document.write(this + 1); }); Examples of a JQuery
  • 11. • This example posts the data name=John and location=Boston to example.ph p on the server. When this request finishes successfully, the success function is called to alert the user. If the request fails, it will alert the user to the failure, the status of the request, and the specific error. $.ajax({ type: "POST", url: "example.php", data: "name=John&location=Boston" }).done( function(msg) { alert( "Data Saved: " + msg ); }).fail( function( xmlHttpRequest, statusText, errorThrown ) { alert( "Your form submission failed.nn" + "XML Http Request: " + JSON.stringify( xmlHttpRequest ) + ",nStatus Text: " + statusText + ",nError Thrown: " + errorThrown ); }); Examples of a JQuery
  • 12. • JQuery's architecture allows developers to create plug-in code to extend its functionality. Currently there are thousands of jQuery plug-ins available on the web that cover a wide range of functionality such as Ajax helpers, web services, datagrids, dynamic lists, XML and XSLT tools, drag and drop, events, cookie handling, modal windows, and even a jQuery- based Commodore 64emulator. jQuery plug-ins