一、动画

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. ER图VISIO 引入Mysql 反向工程

    1. 先到MySQL官方站点下载 MySQL Connector/ODBC 5.1并安装.下载地址为http://dev.mysql.com/downloads/connector/odbc/5.1. ...

  2. Vue3.0结合bootstrap做多页面应用（2）基础配置

    接下来就是多页面应用的配置啦,安装完vue 3.0可以发现目录比2.0的精简了很多, public相当于原来的static,里面的index.html是项目的入口 ,src同以前一样,cli3.0没有 ...

  3. C# vb .net图像合成-合成椭圆

    在.net中,如何简单快捷地实现图像合成呢,比如合成文字,合成艺术字,多张图片叠加合成等等?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码 ...

  4. Spring怎么管理事务？

    我们一般通过aop管理事务,就是把代码看成一个纵向有序的,然后通过aop管理事务,就好比增删改的时候需要开启一个事务,我们给他配置一个required,required就是有事务就执行事务,没有就给他 ...

  5. Django的安全攻击

    目录 Django的安全攻击 XSS XSS(跨站脚本攻击) 危害 原理 防护 csrf(Cross Site Request Forgery) csrf(跨站域请求伪造) 过程 Django 提供的 ...

  6. Vue: 解决打包后element-ui图标字体不显示的问题

    在build/utils.js下找到 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: ...

  7. 12、微信小程序实现授权

    在index.wxml中: <!--index.wxml--> <view wx:if="{{isHide}}"> <view wx:if=" ...

  8. OSPF 虚链路

    通过配置OSPF虚链路连接到骨干区域. 实验拓扑 如图所示连接,地址规划如下: 名称 接口 IP地址 R1 f0/0 192.168.10.1/24 R1 f0/1 192.168.20.1/24 R ...

  9. ZYNQ7000性能分析

    提到自动驾驶,机器人视觉,高清摄像机,都要想到摄像头这个单元,先前本侠也讲过一些FPGA应用在高清摄像头和机器视觉中的深度摄像头以及双目摄像头等,FPGA在里面的作用主要是对采集的图像进行处理,对图像 ...

  10. Linux运维技术之scp命令使用

    命令格式: scp -P 8031  -r 路径1 路径2 命令解释, 其中-P中的P一定要大写,小写不行(这个也是问题的关键,这个大小写耽搁了好长时间) -P 2424表示更改SSH端口后的端口,如 ...