jQuery成功之路——jQuery动画效果和遍历效果概述
一、jQuery动画效果
1.1显示效果
- 方法
| 方法名称 | 解释 |
|---|---|
| show([speed],[easing],[fn]]) | 显示元素方法 |
| hide([speed],[easing],[fn]]) | 隐藏元素方法 |
| toggle([speed],[easing],[fn]) | 切换元素方法，显示的使之隐藏，隐藏的使之显示 |
- 参数
| 参数名称 | 解释 |
|---|---|
| speed | 三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) |
| easing | 用来指定切换效果，默认是”swing”(摆动)，可用参数”linear”(直线) |
| fn | 在动画完成时执行的函数，每个元素执行一次 |
示例
<!DOCTYPE html>
Insert title here
div显示和隐藏
示例效果图
1.2滑动效果" class="reference-link">
1.2滑动效果
- 方法
| 方法名称 | 解释 |
|---|---|
| slideDown([speed,[easing],[fn]]) | 向下滑动方法 |
| slideUp([speed,[easing],[fn]]) | 向上滑动方法 |
| slideToggle([speed],[easing],[fn]) | 切换元素方法，向下使之向下,向下使之向上 |
- 参数
| 参数名称 | 解释 |
|---|---|
| speed | 三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) |
| easing | 用来指定切换效果，默认是”swing”，可用参数”linear” |
| fn | 在动画完成时执行的函数，每个元素执行一次 |
示例
<!DOCTYPE html>
Insert title here
div显示和隐藏
示例效果图
1.3淡入淡出效果" class="reference-link">
1.3淡入淡出效果
- 方法
| 方法名称 | 解释 |
|---|---|
| fadeIn([s],[e],[fn]) | 淡入方法 |
| fadeOut([s],[e],[fn]) | 淡出方法 |
| fadeTo([[s],o,[e],[fn]]) | 设置元素的透明度 |
| fadeToggle([s,[e],[fn]]) | 淡入淡出之间切换 |
- 参数
| 参数名称 | 解释 |
|---|---|
| speed | 三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) |
| easing | 用来指定切换效果，默认是”swing”，可用参数”linear” |
| fn | 在动画完成时执行的函数，每个元素执行一次 |
| opacity | 一个0至1之间表示透明度的数字 |
示例
<!DOCTYPE html>
Insert title here
div显示和隐藏
二、jQuery的遍历
jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。
2.1原始方式遍历
语法
for(var i=0;i<元素数组.length;i++){
元素数组[i];
}
代码
<!DOCTYPE html>
- 北京
- 上海
- 天津
- 重庆
代码效果
2.2jquery对象方法遍历" class="reference-link">
2.2jquery对象方法遍历
语法
jquery对象.each(function(index,element){});
其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象代码
<!DOCTYPE html>
<head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){var $lis = $("#city li");$lis.each(function(index,element){console.log(index+"--"+$(element).html());});});</script></head><body><ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重庆</li></ul></body>
代码效果
2.3 jquery的全局方法遍历" class="reference-link">
2.3 jquery的全局方法遍历
语法
$.each(jquery对象,function(index,element){});
其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象代码
<!DOCTYPE html>
<head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){var $lis = $("#city li");$.each($lis, function(index,element) {console.log(index+"--"+$(element).html());});});</script></head><body><ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重庆</li></ul></body>
代码效果
2.4 jQuery3.0新特性for、of语句遍历" class="reference-link">
2.4 jQuery3.0新特性for、of语句遍历
语法
for(变量 of jquery对象){
变量；
}
其中，
变量:定义变量依次接受jquery数组中的每一个元素
jquery对象：要被遍历的jquery对象代码
<!DOCTYPE html>
<meta charset="UTF-8"><title></title><!-- 版本是3以上 --><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){var $lis = $("#city li");for(li of $lis){console.log($(li).html());}});</script>
<ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重庆</li></ul>
代码效果
左手的ㄟ右手
分手后的思念是犯贱
- 日理万妓
还没有评论，来说两句吧...