一、动画

1. 动画

    1. 三种方式显示和隐藏元素

        1. 默认显示和隐藏方式

            1. show([speed,[easing],[fn]])

                1. 参数：

                    1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)

                    2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"

                        * swing：动画执行时效果是 先慢，中间快，最后又慢

                        * linear：动画执行时速度是匀速的

                    3. fn：在动画完成时执行的函数，每个元素执行一次。

            2. hide([speed,[easing],[fn]])

            3. toggle([speed],[easing],[fn])

        2. 滑动显示和隐藏方式

            1. slideDown([speed],[easing],[fn])

            2. slideUp([speed,[easing],[fn]])

            3. slideToggle([speed],[easing],[fn])

        3. 淡入淡出显示和隐藏方式

            1. fadeIn([speed],[easing],[fn])

            2. fadeOut([speed],[easing],[fn])

            3. fadeToggle([speed,[easing],[fn]])

----------------------

<!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>

        //隐藏div

        function hideFn(){

           /* $("#showDiv").hide("slow","swing",function(){

                alert("隐藏了...")

            });*/

/*

           //默认方式

            $("#showDiv").hide(5000,"swing");

*/

/*

            //滑动方式

            $("#showDiv").slideUp("slow");

            */

            //淡入淡出方式

            $("#showDiv").fadeOut("slow");

        }

        //显示div

        function showFn(){

            /*$("#showDiv").show("slow","swing",function(){

                alert("显示了...")

            });*/

            /*

            //默认方式

            $("#showDiv").show(5000,"linear");

            */

/*

            //滑动方式

            $("#showDiv").slideDown("slow");

            */

            //淡入淡出方式

            $("#showDiv").fadeIn("slow");

        }

        //切换显示和隐藏div

        function toggleFn(){

            /*

            //默认方式

            $("#showDiv").toggle("slow");

*/

            /*

            //滑动方式

            $("#showDiv").slideToggle("slow");

*/

            //淡入淡出方式

            $("#showDiv").fadeToggle("slow");

        }

    </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:pink">

    div显示和隐藏

</div>

</body>

</html>

二、遍历

1. js的遍历方式

    * for(初始化值;循环结束条件;步长)

2. jq的遍历方式

    1. jq对象.each(callback)

        1. 语法：

            jquery对象.each(function(index,element){});

                * index:就是元素在集合中的索引

                * element：就是集合中的每一个元素对象

                * this：集合中的每一个元素对象

        2. 回调函数返回值：

            * true:如果当前function返回为false，则结束循环(break)。

            * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

    2. $.each(object, [callback])

    3. for..of: jquery 3.0 版本之后提供的方式

        for(元素对象 of 容器对象)

--------------------------

<!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">

/*

        遍历

            1. js的遍历方式

             * for(初始化值;循环结束条件;步长)

            2. jq的遍历方式

                1. jq对象.each(callback)

                2. $.each(object, [callback])

                3. for..of:jquery 3.0 版本之后提供的方式

*/

            $(function () {

               //1.获取所有的ul下的li

                var citys = $("#city li");

               /* //2.遍历li

                for (var i = 0; i < citys.length; i++) {

                    if("上海" == citys[i].innerHTML){

                        //break; 结束循环

                        //continue; //结束本次循环，继续下次循环

                    }

                    //获取内容

                    alert(i+":"+citys[i].innerHTML);

                }*/

/*

                //2. jq对象.each(callback)

                citys.each(function (index,element) {

                    //3.1 获取li对象 第一种方式 this

                    //alert(this.innerHTML);

                    //alert($(this).html());

                    //3.2 获取li对象 第二种方式 在回调函数中定义参数   index（索引） element（元素对象）

                    //alert(index+":"+element.innerHTML);

                    //alert(index+":"+$(element).html());

                    //判断如果是上海，则结束循环

                    if("上海" == $(element).html()){

                        //如果当前function返回为false，则结束循环(break)。

                        //如果返回为true，则结束本次循环，继续下次循环(continue)

                        return true;

                    }

                    alert(index+":"+$(element).html());

                });*/

                //3 $.each(object, [callback])

               /* $.each(citys,function () {

                    alert($(this).html());

                });*/

               //4. for ... of:jquery 3.0 版本之后提供的方式

                for(li of citys){

                    alert($(li).html());

                }

            });

    </script>

</head>

<body>

<ul id="city">

    <li>北京</li>

    <li>上海</li>

    <li>天津</li>

    <li>重庆</li>

</ul>

</body>

</html>

jQuery动画和遍历的更多相关文章

  1. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  2. Jquery动画，排队与并发

    一.事件绑定 1.鼠标事件:模拟触发 什么是模拟触发? 虽然没有点在按钮上,也可以触发按钮的事件处理函数. 如何:$元素.trigger("事件名") 即使没有点在指定的元素上,也 ...

  3. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  4. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  5. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  6. jquery动画，基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  7. 让网站动起来！12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  8. 原生js使用forEach()与jquery使用each遍历数组，return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...

  9. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

随机推荐

  1. VS 发布MVC网站缺少视图

    mvc项目发布之后会有一些视图文件缺少,不包含在发布文件中,虽然可以直接从项目文件中直接拷贝过来,但还是想知道是什么原因,发布文件好像没有找到哪里有设置这个的地方 把生成操作:无-改成内容即可 原文

  2. 象棋中“车”的攻击范围_Java

    代码如下: String[][] a = new String[8][8]; int h, l; Scanner scan = new Scanner(System.in); System.out.p ...

  3. Pika 连接 rabbitmq 集群

    原文:https://blog.csdn.net/Tech_Salon/article/details/82890431 使用 Pika 连接 rabbitmq 集群使用 python 编程经常会用到 ...

  4. npm升级到最新版本、指定版本

    npm 升级到最新版本 //linux下 npm install -g npm npm升级到指定版本 //比如升级到5.6.0 npm install -g npm@5.6.0

  5. [linux]查找最大的文件

    查找最大的日志文件,命令: find ./ -type f | xargs -I{} du -m {}|sort -rnk1|head -10 offline一台机器保留限产,其他机器删除日志,命令: ...

  6. Apache Hive

    1.Hive简介 Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能. 本质是将SQL转换为MapReduce程序. 主要用途:操作接口采用 ...

  7. tp5 模型中配置数据库连接信息

    namespace app\api\model; use think\Model; class BaseModel extends Model { protected $connection = [ ...

  8. prometheus学习系列八： Prometheus Grafana展示平台

    在prometheus中,我们可以使用web页面进行数据的查询和展示, 不过展示效果不太理想,这里使用一款专业的展示平台进行展示. grafana安装 # 下载wget https://dl.graf ...

  9. Omapl138中AIS文件分析(参照Using the OMAP-L138 Bootloader)（转）

    Omapl138中AIS文件分析(参照Using the OMAP-L138 Bootloader) 转载链接:https://blog.csdn.net/qq_40788950/article/de ...

  10. 【转】学习ARM为什么首选IMAX6？？

    ARM作为目前嵌入式行业主流的架构,已经让越来越多从事电子行业的朋友了解,并且高校对于嵌入式的学习,很多直接从ARM开始,目前ARM的嵌入式培训也越来越多,足以说明现在嵌入式行业有多火.目前主流的AR ...