主要学习了以下几种:
1.隐藏/显示
2.淡入淡出
3.滑动
4.动画
5.stop()
6.Callback()
7.Chaining()
先学习了前四类,在这里总结一下:
隐藏/显示:
主要用到hide()和show()两个方法。
实例1:通过两个按钮来实现显示和隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#hide").click(function () {
$("#p1").hide();
});
$("#show").click(function () {
$("#p1").show();
});
});
</script>
</head>
<body>
<p id="p1">疏疏帘幕映娉婷,初试晓妆新。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>
效果:
实例2:使用toggle()来回切换,点击一次隐藏,再点击一次则显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#toggle1").click(function () {
$("#p1").toggle();
});
});
</script>
</head>
<body>
<p id="p1">疏疏帘幕映娉婷,初试晓妆新。</p>
<button id="toggle1">隐藏/显示</button>
</body>
</html>
淡入淡出
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
使用fadein进行渐入:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("#div1").fadeIn()
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
$("#div4").fadeIn(5000);
});
});
</script>
</head>
<body>
<p>淡入淡出效果:</p>
<button>点击这里进行预览</button>
<div id="div1" style="display:none;">
<p>国破山河在,城春草木深。</p>
</div>
<div id="div2" style="display:none;">
<p>感时花溅泪,恨别鸟惊心。</p>
</div>
<div id="div3" style="display:none;">
<p>烽火连三月,家书抵万金。</p>
</div>
<div id="div4" style="display:none;">
<p>白头搔更短,浑欲不胜簪。</p>
</div>
</body>
</html>
(注意这时要把div的display设置为none)
使用fadeout进行渐出:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
$("#div4").fadeOut(5000);
});
});
</script>
</head>
<body>
<p>淡入淡出效果:</p>
<button>点击这里进行预览</button>
<div id="div1" ">
<p>国破山河在,城春草木深。</p>
</div>
<div id="div2" ">
<p>感时花溅泪,恨别鸟惊心。</p>
</div>
<div id="div3" ">
<p>烽火连三月,家书抵万金。</p>
</div>
<div id="div4" ">
<p>白头搔更短,浑欲不胜簪。</p>
</div>
</body>
</html>
(这时就要把div设置为可见的啦!)
使用toggle:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
$("#div4").fadeToggle(5000);
});
});
</script>
</head>
<body>
<p>淡入淡出效果:</p>
<button>点击这里进行预览</button>
<div id="div1">
<p>国破山河在,城春草木深。</p>
</div>
<div id="div2">
<p>感时花溅泪,恨别鸟惊心。</p>
</div>
<div id="div3">
<p>烽火连三月,家书抵万金。</p>
</div>
<div id="div4">
<p>白头搔更短,浑欲不胜簪。</p>
</div>
</body>
</html>
滑动效果
jQuery 拥有以下滑动方法:
slideDown()——下
slideUp()——上
slideToggle()——来回
向下滑动:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#div1").slideDown();
});
});
</script>
</head>
<body>
<p>滑动效果:</p>
<button>实现向下滑动</button>
<div id="div1" " style="display:none;">
<p>国破山河在,城春草木深。</p>
<p>感时花溅泪,恨别鸟惊心。</p>
<p>烽火连三月,家书抵万金。</p>
<p>白头搔更短,浑欲不胜簪。</p>
</div>
</body>
</html>
向上滑动:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#div1").slideUp();
});
});
</script>
</head>
<body>
<p>滑动效果:</p>
<button>实现向上滑动</button>
<div id="div1" ">
<p>国破山河在,城春草木深。</p>
<p>感时花溅泪,恨别鸟惊心。</p>
<p>烽火连三月,家书抵万金。</p>
<p>白头搔更短,浑欲不胜簪。</p>
</div>
</body>
</html>
来回滑动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#div1").slideToggle();
});
});
</script>
</head>
<body>
<p>滑动效果:</p>
<button>实现来回滑动</button>
<div id="div1" ">
<p>国破山河在,城春草木深。</p>
<p>感时花溅泪,恨别鸟惊心。</p>
<p>烽火连三月,家书抵万金。</p>
<p>白头搔更短,浑欲不胜簪。</p>
</div>
</body>
</html>
动画效果
animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
把div进行移动:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
$(document).ready(function () {
$("#div1").click(function () {
$("#div1").animate({ left: '250px' });
});
});
</script>
</head>
<body>
<p>自定义动画效果:</p>
<div style="position:absolute;"id="div1">
<p>国破山河在,城春草木深。</p>
<p>感时花溅泪,恨别鸟惊心。</p>
<p>烽火连三月,家书抵万金。</p>
<p>白头搔更短,浑欲不胜簪。</p>
</div>
</body>
</html>
运行前:
运行后:
(需要注意的是,在默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。)
同理,也可以进行多个属性的操作:
例如,我想让一个div变大的同时改变其透明度:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery学习第一天</title>
<script type="text/javascript" src="jquery-3.5.1.js"></Script>
<script type="text/javascript">
$(document).ready(function () {
$("#div1").click(function () {
$("#div1").animate({
opacity:'0.5',
height:'200px',
width:'600px'});
});
});
</script>
</head>
<body>
<p>自定义动画效果:</p>
<div style="background-color:green;height:100px;width:300px;position:absolute;"id="div1" align="center">
<p style="color: #FFFFFF">我是个盒子</p>
</div>
</body>
</html>
效果: