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 在动画完成时执行的函数,每个元素执行一次
  • 示例
html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
      function hideFn(){
        $("#showDiv").hide("slow","swing");
      }
      function showFn(){
        $("#showDiv").show("normal","swing");
      }
      function toggleFn(){
        $("#showDiv").toggle(5000,"linear");
      }
    </script>
  </head>
  <body>
    <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    <input type="button" value="点击按钮显示div" onclick="showFn()">
    <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
​
    <div id="showDiv" style="width:300px;height:300px;background:red">
      div显示和隐藏
    </div>
  </body>
</html>
  • 示例效果图

1.2滑动效果

  • 方法
方法名称 解释
slideDown([speed,[easing],[fn]]) 向下滑动方法
slideUp([speed,[easing],[fn]]) 向上滑动方法
slideToggle([speed],[easing],[fn]) 切换元素方法,向下使之向下,向下使之向上
  • 参数
参数名称 解释
speed 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing 用来指定切换效果,默认是"swing",可用参数"linear"
fn 在动画完成时执行的函数,每个元素执行一次
  • 示例
html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
      function hideFn(){
        $("#showDiv").fadeOut("slow","swing");
      }
      function showFn(){
        $("#showDiv").fadeIn("normal","swing");
      }
      function toggleFn(){
        $("#showDiv").fadeToggle(5000,"linear");
      }
    </script>
  </head>
  <body>
    <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    <input type="button" value="点击按钮显示div" onclick="showFn()">
    <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
​
    <div id="showDiv" style="width:300px;height:300px;background:red">
      div显示和隐藏
    </div>
  </body>
</html>
  • 示例效果图

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之间表示透明度的数字
  • 示例
html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    function hideFn(){
        $("#showDiv").fadeOut(1000);//1秒钟淡出(隐藏)
    }
    
    function showFn(){
        $("#showDiv").fadeIn(1000);//1秒钟淡入(显示)
    }
    
    function toggleFn(){
        $("#showDiv").fadeToggle(1000);//1秒钟淡入淡出之间切换
    }
    
    function fadeTofn(){
        $("#showDiv").fadeTo(2000,0.5);//2秒钟设置div的透明度为50%
    }
</script>
</head>
<body>
    <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    <input type="button" value="点击按钮显示div" onclick="showFn()">
    <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
    <input type="button" value="点击按钮设置div透明度" onclick="fadeTofn()">
​
    <div id="showDiv" style="width:300px;height:300px;background:red">
        div显示和隐藏
    </div>
</body>
</html>

二、jQuery的遍历

jQuery对象本身就是数组对象,通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。

2.1原始方式遍历

  • 语法
java 复制代码
for(var i=0;i<元素数组.length;i++){
    元素数组[i];
}
  • 代码
html 复制代码
<!DOCTYPE html>
<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");
                //1、原始循环方式
                for(var i=0;i<$lis.length;i++){
                    console.log($($lis[i]).html());
                }
            });
        </script>
    </head>
    <body>
        <ul id="city">
            <li>北京</li>
            <li>上海</li>
            <li>天津</li>
            <li>重庆</li>
        </ul>
    </body>
</html>
  • 代码效果

2.2jquery对象方法遍历

  • 语法
html 复制代码
jquery对象.each(function(index,element){});
​
其中,
index:就是元素在集合中的索引
element:就是集合中的每一个元素对象
  • 代码
html 复制代码
<!DOCTYPE html>
<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>
</html>
​
  • 代码效果

2.3 jquery的全局方法遍历

  • 语法
java 复制代码
$.each(jquery对象,function(index,element){});
​
其中,
index:就是元素在集合中的索引
element:就是集合中的每一个元素对象
  • 代码
html 复制代码
<!DOCTYPE html>
<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>
</html>
​
  • 代码效果

2.4 jQuery3.0新特性for、of语句遍历

  • 语法
java 复制代码
for(变量 of jquery对象){
    变量;
}
​
其中,
变量:定义变量依次接受jquery数组中的每一个元素
jquery对象:要被遍历的jquery对象
  • 代码
html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>
    <ul id="city">
      <li>北京</li>
      <li>上海</li>
      <li>天津</li>
      <li>重庆</li>
    </ul>
  </body>
</html>
​
复制代码
代码效果
相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架