What is jQuery?
jQuery is a JavaScript function library.
jQuery is a lightweight "write less, do more" JavaScript library.
The jQuery library contains the following functions:
- HTML element selection
- HTML element operation
- CSS operation
- HTML event function
- JavaScript effects and animation
- HTML DOM traversal and modification
- AJAX
- Utilities
Common jQuery event methods
$(document).ready()
$(document). The ready () method allows us to execute the function after the document is fully loaded. The event method is in jQuery syntax Already mentioned in the chapter.
click()
The click() method calls a function when the button click event is triggered.
This function is executed when the user clicks on an HTML element.
In the following example, when a click event is triggered on a < p > element, the current < p > element is hidden:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie tutorial(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you touch me, I'll disappear.</p>
<p>Point I disappear!</p>
<p>I'll disappear!</p>
</body>
</html>The running result is
If you touch me, I'll disappear.
Let me disappear!
I'll disappear!
dblclick()
When you double-click an element, the dblclick event occurs.
The dblclick() method triggers the dblclick event, or specifies the function to run when the dblclick event occurs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie tutorial(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Double click the left mouse button and I disappear.</p>
<p>Double click me to disappear!</p>
<p>Double click me to disappear!</p>
</body>
</html>mouseenter()
The mouseenter event occurs when the mouse pointer passes through the element.
The mouseenter() method triggers a mouseenter event, or specifies the function to run when a mouseenter event occurs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie tutorial(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert('Your mouse has moved to id="p1" On the element of!');
});
});
</script>
</head>
<body>
<p id="p1">When the mouse pointer enters here, you will see a pop-up window.</p>
</body>
</html>jQuery Fading method
With jQuery, you can fade elements in and out.
jQuery has the following four fade methods:
fadeIn()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>The following example demonstrates fadeIn() The effects of different parameters are used.</p>
<button>Click fade in div Element.</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>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>The following example demonstrates fadeOut() The effects of different parameters are used.</p>
<button>Click fade out div Element.</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>
fadeToggle()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie tutorial(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>An example demonstrates fadeToggle() Different methods are used speed(speed) Parameters.</p>
<button>Click fade in/Fade out</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>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/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.7);
});
});
</script>
</head>
<body>
<p>demonstration fadeTo() Use different parameters</p>
<button>I'll lighten the color</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>
jQuery animation - animate() method
The jQuery animate() method is used to create custom animations.
Syntax:
$(selector).animate({params},speed,callback);
The required params parameter defines the CSS properties that form the animation.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to be executed after the animation is completed.
The following example demonstrates a simple application of the animate() method. It moves the < div > element 250 pixels to the right:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>Start animation</button>
<p>By default, all HTML The element has a static position and is immovable.
If we need to change to, we need to change the element's position Property is set to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>jQuery stop() method
The jQuery stop() method is used to stop animations or effects before they are complete.
The stop() method applies to all jQuery effect functions, including sliding, fading, and custom animation.
Syntax:
$(selector).stop(stopAll,goToEnd);
The optional stopAll parameter specifies whether the animation queue should be cleared. The default is false, that is, only the active animation is stopped, and any animation queued is allowed to execute backward.
The optional goToEnd parameter specifies whether to complete the current animation immediately. The default is false.
Therefore, by default, stop() clears the current animation specified on the selected element.
The following example demonstrates the stop() method without parameters:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>