1.SELECTOR
<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();
});
$("#n1").click(function(){
$("p").show();
});
});
</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>
<button id="n1">Click me
to show paragraphs</button>
</body>
</html>
2.EVENTS
DOUBLE
CLICK
<!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").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>
MOUSEENTER
<!DOCTYPE
html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p2").mouseenter(function(){
alert("You entered p2!");
});
});
</script>
</head>
<body>
<p
id="p1">Enter this paragraph.</p>
<p
id="p2">Enter this paragraph.</p>
</body>
</html>
MOUSEUP
<!DOCTYPE
html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p
id="p1">This is a paragraph.</p>
</body>
</html>
HOVER
<!DOCTYPE
html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("k");
});
});
</script>
</head>
<body>
<p
id="p1">This is a paragraph.</p>
</body>
</html>
FOCUS
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "blue");
});
$("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>
CLICK
<!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("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>
</html>
ANIMATION
<!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>
3.EFFECT
FADEIN
<!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(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(30);
});
});
</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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#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>
FADETO
<!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(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0);
});
});
</script>
</head>
<body>
<p>Demonstrate
fadeTo() with different parameters.</p>
<button>Click
to fade 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>
FADETOOGLE
<!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(){
$("#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>
ANIMATION HIDE
<!DOCTYPE
html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#b").click(function(){
$("p").hide(1000);
});
$("#b1").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<button
id="b">Hide</button>
<button
id="b1">Show</button>
<p>This is
a paragraph with little content.</p>
<p>This is
another small 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>
$(document).ready(function(){
$("#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>
SLIDE UPDOWN
<!DOCTYPE
html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("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
down panel</div>
<div
id="panel">Hello world!</div>
</body>
</html>
SLIDEUP
<!DOCTYPE
html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide
up panel</div>
<div
id="panel">Hello world!</div>
</body>
</html>
5.ANIMATION
<!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(){
$("div").animate({left:
'500px'});
});
});
</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 FOUR
FRAME
<!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(){
var div = $("div");
div.animate({height: '300px', opacity:
'0.4'}, "slow");
div.animate({width: '300px', opacity:
'0.8'}, "slow");
div.animate({height: '100px', opacity:
'0.4'}, "slow");
div.animate({width: '100px', opacity:
'0.8'}, "slow");
});
});
</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
RELATIVE
<!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(){
$("div").animate({
left: '500px',
height: '+=1000px',
width: '+=1000px'
});
});
});
</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 SLOW
DOWN
<!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(){
var sabari = $("div");
sabari.animate({left: '100px'},
"slow");
sabari.animate({fontSize: '3em'},
"slow");
});
});
</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:200px;position:absolute;">HELLO</div>
</body>
</html>
ANIMATION STOP
<!DOCTYPE
html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
font-size: 30px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<button id="stop">Stop
sliding</button>
<div
id="flip">Click to slide down panel</div>
<div
id="panel">Hello world!</div>
</body>
</html>
ANIMATION TOOGLE
<!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(){
$("div").animate({
width: '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>
6.CALL BACK
<!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("slow",
function(){
alert("The paragraph is now
hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is
a paragraph with little content.</p>
</body>
</html>
7.CHAINING
<!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(){
$("#p1").css("color",
"red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p
id="p1">jQuery is fun!!</p>
<button>Click
me</button>
</body>
</html>
8.ALERT
<!DOCTYPE
html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " +
$("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " +
$("#test").html());
});
});
</script>
</head>
<body>
<p
id="test">This is some <b>bold</b> text in a
paragraph.</p>
<button
id="btn1">Show Text</button>
<button
id="btn2">Show HTML</button>
</body>
</html>
ALERT WITH HREF
<!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(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a
href="https://www.w3schools.com"
id="w3s">W3Schools.com</a></p>
<button>Show
href Value</button>
</body>
</html>
ALERT WITH VALUE
<!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(){
alert("Value: " +
$("#test").val());
});
});
</script>
</head>
<body>
<p>Name:
<input type="text" id="test" value="Mickey
Mouse"></p>
<button>Show
Value</button>
</body>
</html>
9.SET
<!DOCTYPE
html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello
world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly
Duck");
});
});
</script>
</head>
<body>
<p
id="test1">This is a paragraph.</p>
<p
id="test2">This is another paragraph.</p>
<p>Input
field: <input type="text" id="test3" value="Mickey
Mouse"></p>
<button
id="btn1">Set Text</button>
<button
id="btn2">Set HTML</button>
<button
id="btn3">Set Value</button>
</body>
</html>
10.REMOVE
<!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").remove();
});
});
</script>
</head>
<body>
<div
id="div1" style="height:100px;width:300px;border:1px solid
black;background-color:yellow;">
This is some
text in the div.
<p>This is
a paragraph in the div.</p>
<p>This is
another paragraph in the div.</p>
</div>
<br>
<button>Remove
div element</button>
</body>
</html>
11.JQUERY WITH
CSS
<!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(){
$("h1, h2,
p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1>Heading
1</h1>
<h2>Heading
2</h2>
<p>This is
a paragraph.</p>
<p>This is
another paragraph.</p>
<div>This
is some important text!</div><br>
<button>Add
classes to elements</button>
</body>
</html>
13.PREPANED
<!DOCTYPE
html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>Prepended text</b>.
");
});
$("#btn2").click(function(){
$("ol").prepend("<li>Prepended
item</li>");
});
});
</script>
</head>
<body>
<p>This is
a paragraph.</p>
<p>This is
another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button
id="btn1">Prepend text</button>
<button
id="btn2">Prepend list item</button>
</body>
</html>
TEXT APPEND
<!DOCTYPE
html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function
appendText() {
var txt1 = "<p>Text.</p>"; // Create text with HTML
var txt2 =
$("<p></p>").text("Text."); // Create text with jQuery
var txt3 =
document.createElement("p");
txt3.innerHTML = "Text."; // Create text with DOM
$("body").append(txt1, txt2,
txt3); // Append new elements
}
</script>
</head>
<body>
<p>This is
a paragraph.</p>
<button
onclick="appendText()">Append text</button>
</body>
</html>
BEFORE AFTER
<!DOCTYPE
html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img
src="/images/w3jquery.gif" width="100"
height="140"><br><br>
<button
id="btn1">Insert before</button>
<button
id="btn2">Insert after</button>
</body>
</html>
ADD
<!DOCTYPE
html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append("
<b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended
item</li>");
});
});
</script>
</head>
<body>
<p>This is
a paragraph.</p>
<p>This is
another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button
id="btn1">Append text</button>
<button
id="btn2">Append list items</button>
</body>
</html>
