J Query (Complete Course) by Muhammad Ehtisham Siddiqui

JQUERY
MUHAMMAD EHTISHAM SIDDIQUI
APTECH COMPUTER EDUCATION

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.

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

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

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>

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>

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...
});

SELECTING ELEMENTS IN JQUERY(CSS SELECTORS)

SELECTING ELEMENTS IN JQUERY(CUSTOM SELECTORS)

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>
$("#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>

EXAMPLE OF SELECTORS(CSS SELECTORS)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>animated demo</title> <style>
div {
background: yellow;
border: 1px solid #AAA;
width: 80px;
height: 80px;margin: 0 5px;float: left;}
div.colored {background: green;}</style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body>
<button id="run">Run</button>
<div></div>
<div id="mover"></div><div></div><script> $( "#run" ).click(function() { $( "div:animated" ).toggleClass( "colored" );});function animateIt() {
$( "#mover" ).slideToggle( "slow", animateIt );}
animateIt();
</script>
</body>
</html>

EXAMPLE OF CSS STYLES USING JQUERY
<!DOCTYPE html>
<html>
<head>
<script>
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>

EXAMPLE OF CSS STYLES USING JQUERY
<!DOCTYPE html>
<html>
<head>
<script>
$("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>

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

JQUERY 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

JQUERY EVENTS(MOUSE) -> CLICK
<!DOCTYPE html>
<html>
<head>
<script>
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>

JQUERY EVENTS(MOUSE) -> DBL CLICK
<!DOCTYPE html>
<html>
<head>
<script>
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

JQUERY EVENTS(MOUSE) -> MOUSE ENTER
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>

JQUERY EVENTS(MOUSE) -> HOVER
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").hover(function(){
}, function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>

JQUERY EVENTS(MOUSE) -> BLUR
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").hover(function(){
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>

HIDE/SHOW
<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

HIDE WITH SPEED
<!DOCTYPE html>
<html>
<head>
<script>
$("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>

TOGGLE
<!DOCTYPE html>
<html>
<head>
<script>
$("button").hover(function(){
$("p").toggle(1000);
});
});
</script>
</head>
<body>
<button>Toggle between hiding and showing the paragraphs</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

FADEIN()
<!DOCTYPE html>
<html>
<head>
<script>
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000) ; }); });
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body></html>

FADEOUT()
<!DOCTYPE html>
<html>
<head>
<script>
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
}); });
</script></head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></html>

FADEIN() & FADEOUT()
<!DOCTYPE html>
<html>
<head>
<script>
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}); });
</script>
</head><body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></html>

SLIDE
<!DOCTYPE html>
<html>
<head>
<script>
$("#flip").click(function(){
$("#panel").slideToggle("slow"); }); }); </script> <style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3; }#panel {
padding: 50px;
display: none;}</style></head><body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>

ANIMATION
<!DOCTYPE html>
<html>
<head>
<script>
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
}); }); });</script> </head><body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of
the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

ANIMATION
<!DOCTYPE html>
<html>
<head>
<script>
$("div").animate({
height: 'toggle' }); }); });
</script>
</head>
<body>
<p>Click the button multiple times to toggle the animation.</p>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of
the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

J Query (Complete Course) by Muhammad Ehtisham Siddiqui

J Query (Complete Course) by Muhammad Ehtisham Siddiqui

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to J Query (Complete Course) by Muhammad Ehtisham Siddiqui

Similar to J Query (Complete Course) by Muhammad Ehtisham Siddiqui (20)

More from Muhammad Ehtisham Siddiqui

More from Muhammad Ehtisham Siddiqui (20)

Recently uploaded

Recently uploaded (20)

J Query (Complete Course) by Muhammad Ehtisham Siddiqui