这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战
@[toc]
题外话
前言
身为一个合格的后端开发人员
前端的基础知识也是需要了解的
一. jQuery效果
隐藏、显示、切换，滑动，淡入淡出，以及动画
1. jQuery隐藏/显示
顾名思义
隐藏函数为hide()
显示函数为show()
切换两个函数的函数，也就是同时具有着两个效果的函数：toggle()
代码显示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function (){
$("#hide").click(function (){
$("p").hide();
});
$("#show").click(function (){
$("p").show();
});
$("#toggle").click(function (){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>
无忧无虑，无欲无求
</p>
<button id="hide">点击隐藏</button>
<button id="show">点击显示</button>
<button id="toggle">单击隐藏，再单击显示</button>
</body>
</html>
2. jQuery淡入淡出
jQuery fadeIn() 用于淡入已隐藏的元素。
jQuery fadeOut() 方法用于淡出可见元素。
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function (){
$("p").hide();
$("#fadeTo").show();
$("#in").click(function () {
$("#fadeIn").fadeIn();
});
$("#out").click(function () {
$("#fadeOut").show().fadeOut();
});
$("#to").click(function () {
$("#fadeTo").fadeTo("show", 0.1);
});
$("#toggle").click(function () {
$("#fadeToggle").fadeToggle();
});
});
</script>
</head>
<body>
<p id="fadeIn">我将为你展示fadeIn函数</p>
<p id="fadeOut">我将为你展示fadeOn函数</p>
<p id="fadeTo">我将为你展示fadeTo函数</p>
<p id="fadeToggle">我将为你展示fadeToggle函数</p>
<button id="in">fadeIn</button>
<button id="out">fadeOut</button>
<button id="to">fadeTo</button>
<button id="toggle">fadeToggle</button>
</body>
</html>
3. 滑动
jQuery slideDown() 方法用于向下滑动元素。
jQuery slideUp() 方法用于向上滑动元素。
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("#button").click(function () {
$("#xg").slideUp();
});
$("#button").dblclick(function () {
$("#xg").slideDown();
});
$("#button").click(function () {
$("#xg1").slideToggle();
});
});
</script>
</head>
<body>
<p id="button">点击隐藏</p>
<div id="xg">
<p>我是第一行。</p>
<p>我是第二行。</p>
<p>我是第三行。</p>
<p>我是第四行。</p>
<p>我是第五行。</p>
</div>
<p>
下面是slideToggle
</p>
<div id="xg1">
<p>我是第一行。</p>
<p>我是第二行。</p>
<p>我是第三行。</p>
<p>我是第四行。</p>
<p>我是第五行。</p>
</div>
</body>
</html>
4. 动画
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
代码：将段落字体右移变大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("#dw").click(function () {
$("p").animate({
left: '150px',
fontSize: '50px'
});
});
});
</script>
</head>
<body>
<button id="dw">点我</button>
<p style="position: absolute">点上面的按钮，我就跑了</p>
</body>
</html>
需要把你将要动的标签的position属性设置为： relative、fixed 或 absolute
因为html标签默认是不动的
结语
兴趣是最好的老师，坚持是不变的真理。 学习不要急躁，一步一个脚印，踏踏实实的往前走。 每天进步一点点，日积月累之下，你就会发现自己已经变得很厉害了。
我是布小禅，一枚自学萌新，跟着我每天进步一点点吧！
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！