jQuery 事件
常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
jQuery 效果
jQuery 效果- 隐藏和显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery 效果- 隐藏和显示</title>
</head>
<body>
<h1>jQuery 效果- 隐藏和显示</h1>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<p id="p1">这是一个段落</p>
<script>
$(document).ready(function(){
// 隐藏
$("#btn1").click(function(){
$("#p1").hide();
});
// 显示
$("#btn2").click(function(){
$("#p1").show();
});
});
</script>
</body>
</html>
jQuery 效果 - 淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery 效果 - 淡入淡出</title>
</head>
<body>
<h1>jQuery 效果 - 淡入淡出</h1>
<p class="p1"> jQuery fadeIn() 用于淡入已隐藏的元素。</p>
<p class="p2"> jQuery fadeOut() 方法用于淡出可见元素。</p>
<p class="p3"> jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 </p>
<p class="p4"> jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。 </p>
<script>
$(document).ready(function(){
$(".p1").hover(function(){
$(this).fadeOut(1000); //淡出
}, function(){
$(this).fadeIn(1000); //淡入
});
$(".p2").hover(function(){
$(this).fadeIn(1000); //淡入
}, function(){
$(this).fadeOut(1000); //淡出
});
$(".p3").hover(function(){
$(this).fadeToggle(1000); //淡入淡出
});
$(".p4").hover(function(){
$(this).fadeTo(1000, 0.5); //淡入淡出
});
});
</script>
</body>
</html>
jQuery 效果 - 滑动
jQuery slideDown() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery slideDown() 方法</title>
</head>
<body>
<h1>jQuery slideDown() 方法</h1>
<p>jQuery slideDown() 方法用于显示隐藏的元素。</p>
<button id="btn">点击显示/隐藏</button>
<div id="div1" style="display:none;">
这是隐藏的元素,点击按钮后将显示。
</div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#div1").slideDown();
});
});
</script>
</body>
</html>
jQuery slideUp() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery slideUp() 方法</title>
</head>
<body>
<h1>jQuery slideUp() 方法</h1>
<p>jQuery slideUp() 方法用于隐藏或显示元素。</p>
<button id="btn">点击显示/隐藏</button>
<div id="box">这是要隐藏或显示的元素。</div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#box").slideUp(1000);
});
});
</script>
</body>
</html>
jQuery slideToggle() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery slideToggle() 方法</title>
</head>
<body>
<h1>jQuery slideToggle() 方法</h1>
<p>点击按钮,显示或隐藏段落:</p>
<button id="btn">显示/隐藏</button>
<p id="p1">jQuery slideToggle() 方法可以用来显示或隐藏 HTML 元素。</p>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#p1").slideToggle(1000);
});
});
</script>
</body>
</html>
jQuery 效果- 动画
jQuery 动画 - animate() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery 动画 - animate() 方法</title>
</head>
<body>
<div id="box" style="background:#98bf21;height:200px;width:200px;position:absolute;">
<p>jQuery 动画 - animate() 方法</p>
</div>
<script>
$(document).ready(function(){
$("#box").click(function(){
$(this).animate({
width: '400px',
height: '400px',
left: '250px',
top: '100px',
fontSize: '45px'
}, 1000);
});
});
</script>
</body>
</html>
jQuery animate() - 使用相对值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery 动画 - animate() 方法</title>
</head>
<body>
<div id="box" style="background:#98bf21;height:200px;width:200px;position:absolute;">
<p>jQuery 动画 - animate() 方法-使用相对值</p>
</div>
<script>
$(document).ready(function(){
$("#box").click(function(){
$(this).animate({
width: '+=200px',
height: '+=200px',
left: '250px',
top: '100px',
fontSize: '+=20px'
}, 1000);
});
});
</script>
</body>
</html>
jQuery animate() - 使用预定义的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery animate() - 使用预定义的值</title>
</head>
<body>
<div id="box">Hello World!</div>
<button id="btn">toggle</button>
<button id="btn1">show</button>
<button id="btn2">hide</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#box").animate({
height: "toggle",
}, 1000);
});
$("#btn1").click(function(){
$("#box").animate({
height: "show",
}, 1000);
});
$("#btn2").click(function(){
$("#box").animate({
height: "hide",
}, 1000);
});
});
</script>
</body>
</html>
jQuery animate() - 使用队列功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery animate() - 使用队列功能</title>
</head>
<body>
<div id="box" style="background-color: brown; height: 100px; width: 100px; top: 50px; left: 50px;">
<p>Hello World!</p>
</div>
<button id="btn">点击切换动画</button>
<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>
</body>
</html>
jQuery 停止动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery stop() 方法</title>
</head>
<body>
<button id="btn">点击停止</button>
<p id="p" style="background-color: yellow; position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; opacity: 1;">jQuery stop() 方法</p>
<script>
$("#p").click(function() {
$(this).animate({
left: "200px",
width: "500px",
height: "500px",
opacity: 0.5
}, 5000);
});
$("#btn").click(function() {
$("#p").stop().animate({
left: "200px"
}, 5000);
});
</script>
</body>
</html>
jQuery Callback 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery Callback 方法</title>
</head>
<body>
<button id="btn">点我</button>
<script>
$("#btn").click(function(){
$.ajax({
url: "test.php",
type: "POST",
data: {
name: "张三",
age: 20
},
success: function(data){
alert(data);
},
error: function(){
alert("出错了");
}
});
});
</script>
</body>
</html>
jQuery - 链(Chaining)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<title>jQuery - 链(Chaining),通过 jQuery,可以把动作/方法链接在一起。</title>
</head>
<body>
<div id="box">
<p>Hello, world!</p>
</div>
<script>
$(document).ready(function() {
$("#box").css("background-color", "yellow")
.css("padding", "20px")
.css("border", "1px solid black")
.append("<p>jQuery is awesome!</p>");
});
</script>
</body>
</html>
标签:jQuery,function,教程,animate,方法,click,1000
From: https://blog.csdn.net/2401_82471222/article/details/139865980