1、JQuery
上文仅对动画修改了持续时间，页面一加载出来就播放了，并没有添加相应的触发事件，下面利用jQuery来实现这一功能。
Query 是一个 JavaScript 库，它极大地简化了 JavaScript 编程。
使用：
- 下载
使用前先去官网下载jquery.js文件并复制到项目中进行导入。
下载地址：https://jquery.com/download/常用的选择器
常用选择器.png
ready() 方法
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
允许三种语法:
(1)$(document).ready(function(){ 内容 })
(2)$().ready(function(){ 内容 })
(3)$(function(){ 内容 })
常见 DOM 事件：
常见DOM事件.png
2、测试
常用方法
- val() 获取、设置表单的值（取值只取第一个，赋值批量操作）
- attr() 方法设置或返回被选元素的属性值。
- css() 方法设置或返回被选元素的一个或多个样式属性。
- html() 方法设置或返回被选元素的标签之间内容（innerHTML）
- addClass() 方法向被选元素添加一个或多个类。
- hide() 方法将所选元素隐藏
- hover(functionIN(){}，functionOUT(){}) 添加移入移出方法
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
$(function(){
$('#div1').click(function(){
$(this).css('background-color','#00F7DE')
})
$('#div2').hover(function(){
$(this).css('background-color','#FF0000')
},(function(){
$(this).css('background-color','#00FF00')
}))
$('#div3').keydown(function(){
$(this).hide()
})
})
</script>
</head>
<body>
<div id="div1" style="height: 100px;lighting-color: currentColor;100px">
点击我变成蓝色
</div>
<div id="div2"style="height: 100px;lighting-color: currentColor;100px">
鼠标移出我变为绿色，移入我变成红色
</div>
<input type="text" id="div3" value="按下键盘我就消失"style="width: 200px;" />
</body>
</html>
测试效果
测试效果.png
3、为动画添加触发事件
上次添加的layui-anim动画一加载上来就播放了，这次我们为他添加触发事件，便于我们方便的使用动画。
- 例：点击按钮为div添加一个持续时常5s的layui-anim-up动画
- 思路：
（1）通过addClass（）方法为div添加layui-anim layui-anim-up类来实现动画。
（2）通过css（）方法修改持续时间（-webkit-animation-duration等）为5s。
（3）5s过后通过removeClass（）方法移除layui-anim layui-anim-up类，以便重复使用（通过setTimeout(function () { }, 时间）方法来延迟5s执行程序，不延迟的话刚添加类就又移除类，没有动画效果)。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script>
$(document).ready(function(){})
$(function(){
$('#div1').click(function(){
$('#div2').addClass('layui-anim layui-anim-up ');
$('#div2').css('-webkit-animation-duration','5s');
setTimeout(function(){
$('#div2').removeClass('layui-anim layui-anim-up');
},5000);
})
})
</script>
</head>
<body>
<div id="div2" style="height: 100px;width: 100px;background-color: #00F7DE;">
从最底部往上滑入
</div>
<input class="layui-bg-gray" id="div1" value="点我一下" />
</body>
</html>
结语：学习编程时，思路和勤奋是最重要的，方法、属性忘记辽，查一查就好咯。
推荐两个非常全面的学习网站：
菜鸟教程：Jquery教程https://www.runoob.com/jquery/jquery-tutorial.html
W3school：Jquery教程https://www.w3school.com.cn/jquery/index.asp
网友评论