李莎_20210120李莎
知识点总结
jQuery相关应用
@TOC
1.1 jQuery动画
1.1.1 默认效果
- show([speed],[easing],[fn]) 显示
- hide([speed],[easing],[fn]) 隐藏
- toggle([speed],[easing],[fn]) 切换
- 参数介绍 : slow,数字
jQuery效果实现相关学习网站
https://animate.style/
http://kristofferandreasen.github.io/wickedCSS/
https://www.swiper.com.cn/
动画效果
show():显示
hide()隐藏
$().toggle():显示和隐藏效果切换
都可以传入参数，speed.fadeOut(淡出)
fadeIn(淡入)
fadeToggle();淡入淡出切换
fadeTo(2000,0.3)将图片显示到透明度为30%的程度1.1.2 滑动效果
- slideDown 向下滑入显示
- slideUp 向上滑入隐藏
滑动显示
slideDown()：
slideUp():
slideToggle():
都可以传入一个speed参数。\((':animated');获取正在执行动画的元素。
将正在执行动画的元素停止：
\)(':animated').stop():停止当前的动画。
stop(true)表示清除队列中的所有的动画，即动画立即停止，如果不传递参数，只是立刻停止当前的动画。
$(':animated').stop(false,true)第二个参数为true表示停止当前正在执行的动画，并且将元素设置为当前动画执行结束处的位置。1.1.3 淡入淡出效果
相关效果实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 500px;
height: 600px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div class="box">
</div>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="toggle">切换</button>
<button id="slideDown">下滑</button>
<button id="slideUp">上滑</button>
<button id="fadeIn">淡入</button>
<button id="fadeOut">淡出</button>
<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
var showBtn=$("#show");
var hideBtn=$("#hide");
var toggleBtn=$("#toggle");
var slideDownBtn=$("#slideDown");
var slideUpBtn=$("#slideUp");
var fadeInBtn=$("#fadeIn");
var fadeOutBtn=$("#fadeOut");
var box=$(".box");
showBtn.click(function(){
box.show('slow');
});
hideBtn.on('click',function(){
box.hide('slow');
})
toggleBtn.on('click',function(){
box.toggle(1000);
})
slideDownBtn.on('click',function(){
box.slideDown(1000);
})
slideUpBtn.on('click',function(){
box.slideUp(1000);
})
fadeInBtn.on('click',function(){
box.fadeIn(1000);
})
fadeOutBtn.on('click',function(){
box.fadeOut(1000);
})
</script>
</body>
</html>
1.2 遍历
jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
遍历 DOM
jQuery 提供了多种遍历 DOM 的方法。
遍历方法中最大的种类是树遍历（tree-traversal）。
1.3 事件
事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。
学习心得
今天主要学习了jQuery的应用，运用jQuery实现各种动画效果，并学习了jQuery的相关事件。
通过学习jQuery，我们了解导论更多在前端界面能够实现的功能，能够做出更好的界面。
今天开始做自己的网站，我们知道做好一个网站是很不容易的，之前的学习都是铺垫，只有自己真正做页面的时候才能学习到更多的知识，应用是相当重要的。学习前端界面，不只要了解每个功能的单独实现，更重要的是能够让功能在自己的界面中应用自如。
评论留言