SlideShare a Scribd company logo
JQuery
JQuery
A small and lightweight JavaScript library.
Cross-platform
To simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS
animation, and Ajax.
Features
DOM Selection
Selectors to retrieve DOM element based on different criteria like tag name,
id, css class name, attribute name, value, nth child in hierarchy etc.
DOM Manipulation
Adding or removing elements, modifying html content, css class
Special Effects
show or hide elements, fade-in or fade-out of visibility, sliding effect,
animation etc
Events
click, dblclick, mouseenter, mouseleave, blur, keyup, keydown etc.
Ajax
To load data from servers without reloading whole page.
DOM Structure
Document Ready Event
Before we execute any jQuery statement,
we would like to wait for the document to be fully loaded.
This is because jQuery works on DOM
if complete DOM is not available before executing jQuery statements, then we will not get desired
result.
$(document).ready(function(){
// jQuery code goes here...
});
Syntax
$(document).ready(function(){
$(selector).action()
});
jQuery Selectors
To select and manipulate HTML elements.
Used to select one or more HTML elements
once the element is selected then you can perform various operation on that.
Every jQuery selector start with thiis sign $() - factory function
Find or select HTML elements based on their id, classes, attributes, types
3 ways to select elements
1)Tag Name
Tag name available in the DOM.
example: $('p') selects all paragraphs'p'in the document.
2)Tag ID
Tag available with a specific ID in the DOM.
example: $('#real-id') selects a specific element in the document that has an ID of real-id.
3)Tag Class
Tag available with a specific class in the DOM.
example: $('real-class') selects all elements in the document that have a class of real-
class.
How to use Selectors ?
S.No. Selector Description
1) Name: It selects all elements that match with the given
element name.
2) #ID: It selects a single element that matches with the given
id.
3) .Class: It selects all elements that matches with the given
class.
4) Universal(*) It selects all elements available in a DOM.
5) Multiple Elements
A,B,C
It selects the combined results of all the specified
selectors A,B and C.
Examples
jQuery Effects
Events are often triggered by the user's interaction with the web page
Examples
when a link or button is clicked,
text is entered into an input box or textarea,
selection is made in a select box,
key is pressed on the keyboard,
The mouse pointer is moved etc.
the Browser itself can trigger the events, such as the page load and
unload events.
Jquery Effects Types
• Form events
• Keyboard events
• Mouse events
• Browser events
• Document loading
Example
<script>
$(document).ready(function()
{
$("p").click(function()
{
$(this).slideUp();
});
});
</script>
Jquery Effect Examples
<script>
$(document).ready(function() {
$("h1").hover(function() {
$(this).css("color", "green");
}, function() {
$(this).css("color", "red");
});
});
</script>
Jquery Effects : Forms
• Blur
• Change
• Focus
• Focusin
• Select
• submit
Jquery Effects : Keyboard
• keydown
• Keypress
• Keyup
• focusout
Jquery Effects : Mouse
• Click
• Dblclick
• Focusout
• Hover
• Mousedown
• Mouseenter
• Mouseleave
• Mousemove
• Mouseout
• Mouseover
• Mouseup
• Toggle
Jquery Effects: Document
Load
Ready
Unload

More Related Content

PDF
Unit 1 - What is jQuery_Why jQuery_Syntax_Selectors.pdf
PPTX
PPTX
Unit3.pptx
PPTX
Jquery Basics
PPTX
Introduction to JQuery
PPTX
jQuery
PDF
jQuery -Chapter 2 - Selectors and Events
PPTX
JQuery_and_Ajax.pptx
Unit 1 - What is jQuery_Why jQuery_Syntax_Selectors.pdf
Unit3.pptx
Jquery Basics
Introduction to JQuery
jQuery
jQuery -Chapter 2 - Selectors and Events
JQuery_and_Ajax.pptx

Similar to Jquery Tutorials for designing Dynamic Web Site (20)

PPTX
Unit-III_JQuery.pptx engineering subject for third year students
PDF
PPT
J Query(04 12 2008) Foiaz
PPTX
Introduction to JavaScript DOM and User Input.pptx
PPT
Document_Object_Model_in_javaScript..................................ppt
PPTX
A to Z about JQuery - Become Newbie to Expert Java Developer
PDF
PPT
Introduction To Dojo
PPTX
JS basics
PPTX
Jquery Complete Presentation along with Javascript Basics
PPTX
jQuery basics for Beginners
PPTX
Jquery fundamentals
PPTX
Javascript
PDF
Client-side JavaScript
PPTX
Getting Started with jQuery
PPT
J Query Public
PDF
JavaScript
PDF
JavaScript - Chapter 12 - Document Object Model
PPTX
Web Development Introduction to jQuery
Unit-III_JQuery.pptx engineering subject for third year students
J Query(04 12 2008) Foiaz
Introduction to JavaScript DOM and User Input.pptx
Document_Object_Model_in_javaScript..................................ppt
A to Z about JQuery - Become Newbie to Expert Java Developer
Introduction To Dojo
JS basics
Jquery Complete Presentation along with Javascript Basics
jQuery basics for Beginners
Jquery fundamentals
Javascript
Client-side JavaScript
Getting Started with jQuery
J Query Public
JavaScript
JavaScript - Chapter 12 - Document Object Model
Web Development Introduction to jQuery
Ad

More from Pyingkodi Maran (20)

PDF
Defining Identity as a Service (IDaaS) in Cloud Computing
PDF
Data Science Normal Distribution Z-Score
PDF
Data Science Introduction and Process in Data Science
PDF
Database Manipulation with MYSQL Commands
PDF
Working with AWS Relational Database Instances
DOC
Health Monitoring System using IoT.doc
PPT
IoT Industry Adaptation of AI.ppt
PPT
IoT_Testing.ppt
PDF
Azure Devops
PDF
Creation of Web Portal using DURPAL
PDF
AWS Relational Database Instance
PDF
AWS S3 Buckets
PDF
Creation of AWS Instance in Cloud Platform
PDF
Amazon Web Service.pdf
PDF
Cloud Security
PDF
Cloud Computing Introduction
PDF
Supervised Machine Learning Algorithm
PDF
Unsupervised Learning in Machine Learning
PDF
Feature Engineering in Machine Learning
PDF
Normalization in DBMS
Defining Identity as a Service (IDaaS) in Cloud Computing
Data Science Normal Distribution Z-Score
Data Science Introduction and Process in Data Science
Database Manipulation with MYSQL Commands
Working with AWS Relational Database Instances
Health Monitoring System using IoT.doc
IoT Industry Adaptation of AI.ppt
IoT_Testing.ppt
Azure Devops
Creation of Web Portal using DURPAL
AWS Relational Database Instance
AWS S3 Buckets
Creation of AWS Instance in Cloud Platform
Amazon Web Service.pdf
Cloud Security
Cloud Computing Introduction
Supervised Machine Learning Algorithm
Unsupervised Learning in Machine Learning
Feature Engineering in Machine Learning
Normalization in DBMS
Ad

Recently uploaded (20)

PPTX
Strings in CPP - Strings in C++ are sequences of characters used to store and...
PPTX
Internet of Things (IOT) - A guide to understanding
PPTX
FINAL REVIEW FOR COPD DIANOSIS FOR PULMONARY DISEASE.pptx
PPTX
Recipes for Real Time Voice AI WebRTC, SLMs and Open Source Software.pptx
PDF
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
PPTX
Lesson 3_Tessellation.pptx finite Mathematics
PPTX
CYBER-CRIMES AND SECURITY A guide to understanding
PPTX
MCN 401 KTU-2019-PPE KITS-MODULE 2.pptx
PPTX
Construction Project Organization Group 2.pptx
PDF
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
PDF
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
DOCX
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
PPTX
UNIT-1 - COAL BASED THERMAL POWER PLANTS
PPTX
Lecture Notes Electrical Wiring System Components
PDF
Arduino robotics embedded978-1-4302-3184-4.pdf
PDF
Digital Logic Computer Design lecture notes
PPTX
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
PDF
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
DOCX
573137875-Attendance-Management-System-original
PPTX
IOT PPTs Week 10 Lecture Material.pptx of NPTEL Smart Cities contd
Strings in CPP - Strings in C++ are sequences of characters used to store and...
Internet of Things (IOT) - A guide to understanding
FINAL REVIEW FOR COPD DIANOSIS FOR PULMONARY DISEASE.pptx
Recipes for Real Time Voice AI WebRTC, SLMs and Open Source Software.pptx
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
Lesson 3_Tessellation.pptx finite Mathematics
CYBER-CRIMES AND SECURITY A guide to understanding
MCN 401 KTU-2019-PPE KITS-MODULE 2.pptx
Construction Project Organization Group 2.pptx
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
UNIT-1 - COAL BASED THERMAL POWER PLANTS
Lecture Notes Electrical Wiring System Components
Arduino robotics embedded978-1-4302-3184-4.pdf
Digital Logic Computer Design lecture notes
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
573137875-Attendance-Management-System-original
IOT PPTs Week 10 Lecture Material.pptx of NPTEL Smart Cities contd

Jquery Tutorials for designing Dynamic Web Site

  • 2. JQuery A small and lightweight JavaScript library. Cross-platform To simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. Features DOM Selection Selectors to retrieve DOM element based on different criteria like tag name, id, css class name, attribute name, value, nth child in hierarchy etc. DOM Manipulation Adding or removing elements, modifying html content, css class Special Effects show or hide elements, fade-in or fade-out of visibility, sliding effect, animation etc Events click, dblclick, mouseenter, mouseleave, blur, keyup, keydown etc. Ajax To load data from servers without reloading whole page.
  • 4. Document Ready Event Before we execute any jQuery statement, we would like to wait for the document to be fully loaded. This is because jQuery works on DOM if complete DOM is not available before executing jQuery statements, then we will not get desired result. $(document).ready(function(){ // jQuery code goes here... }); Syntax $(document).ready(function(){ $(selector).action() });
  • 5. jQuery Selectors To select and manipulate HTML elements. Used to select one or more HTML elements once the element is selected then you can perform various operation on that. Every jQuery selector start with thiis sign $() - factory function Find or select HTML elements based on their id, classes, attributes, types 3 ways to select elements 1)Tag Name Tag name available in the DOM. example: $('p') selects all paragraphs'p'in the document. 2)Tag ID Tag available with a specific ID in the DOM. example: $('#real-id') selects a specific element in the document that has an ID of real-id. 3)Tag Class Tag available with a specific class in the DOM. example: $('real-class') selects all elements in the document that have a class of real- class.
  • 6. How to use Selectors ? S.No. Selector Description 1) Name: It selects all elements that match with the given element name. 2) #ID: It selects a single element that matches with the given id. 3) .Class: It selects all elements that matches with the given class. 4) Universal(*) It selects all elements available in a DOM. 5) Multiple Elements A,B,C It selects the combined results of all the specified selectors A,B and C. Examples
  • 7. jQuery Effects Events are often triggered by the user's interaction with the web page Examples when a link or button is clicked, text is entered into an input box or textarea, selection is made in a select box, key is pressed on the keyboard, The mouse pointer is moved etc. the Browser itself can trigger the events, such as the page load and unload events.
  • 8. Jquery Effects Types • Form events • Keyboard events • Mouse events • Browser events • Document loading Example <script> $(document).ready(function() { $("p").click(function() { $(this).slideUp(); }); }); </script>
  • 9. Jquery Effect Examples <script> $(document).ready(function() { $("h1").hover(function() { $(this).css("color", "green"); }, function() { $(this).css("color", "red"); }); }); </script>
  • 10. Jquery Effects : Forms • Blur • Change • Focus • Focusin • Select • submit
  • 11. Jquery Effects : Keyboard • keydown • Keypress • Keyup • focusout
  • 12. Jquery Effects : Mouse • Click • Dblclick • Focusout • Hover • Mousedown • Mouseenter • Mouseleave • Mousemove • Mouseout • Mouseover • Mouseup • Toggle