2. TOPICS TO BE COVERED
Introduction to JQuery.
Purpose of JQuery.
How to use Jquery.
Syntax of using JQuery.
Functions and Events of JQuery.
Selectors and functions of JQuery.
Example of JQuery.
3. WHAT IS JQUERY?
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on
your website.
jQuery takes a lot of common tasks that require many lines of
JavaScript code to accomplish, and wraps them into methods that you
can call with a single line of code.
• Many of the biggest companies on the Web use jQuery, such as:
• Google
• Microsoft
• IBM
• Netflix
5. PURPOSE OF JQUERY
The purpose of jQuery is to make it much easier to use JavaScript
on your website.
We can take advantages of JavaScript for:-
• It helps to improve the performance of the application
• It helps to develop most browser compatible web page
• It helps to implement UI related critical functionality without writing
hundreds of lines of codes
• It is fast
• It is extensible – jQuery can be extended to implement customized
behavior
6. HOW TO USE JQUERY?
There are two ways to use JQuery.
Download JQuery file from http://jquery.com/download/
And link JQuery file in your HTML page.
<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
Use online JQuery file CDN(Content Delivery Network)
<script type="text/javascript" language="Javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
7. HOW TO USE JQUERY?
IF CDN Doesn’t support you can use your local file.
<script type="text/javascript" language="Javascript"
src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></script>
<script type='text/javascript'>//<![CDATA[
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript
src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));
}//]]>
</script>
8. SYNTAX OF JQUERY
The jQuery syntax is tailor-made for selecting HTML elements and performing
some action on the element(s).
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Syntax:-
$(document).action(function(){
// jQuery methods go here...
});
12. EXAMPLE OF SELECTORS
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
}); });
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
}); });
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
17. EXAMPLE OF CSS STYLES USING JQUERY
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue"); },
click: function(){
$(this).css("background-color", "yellow");
} });});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
18. EXAMPLE OF CSS STYLES USING JQUERY
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue"); },
click: function(){
$(this).css("background-color", "yellow");
} });});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
19. JQUERY EVENTS
All the different visitor's actions that a web page can respond to are called
events.
An event represents the precise moment when something happens.
Examples:
moving a mouse over an element
selecting a radio button
clicking on an element
28. HIDE WITH SPEED
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>