一、动画

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. asp.net core 系列之Reponse caching 之 Response Caching Middleware(4)

    这篇文章介绍 Response Caching Middleware . Response Caching Middleware in ASP.NET Core 通过在ASP.NET Core应用中 ...

  2. 重温拉格朗日乘子法和KKT条件

    在求取有约束条件的优化问题时,拉格朗日乘子法(Lagrange Multiplier) 和KKT条件是非常重要的两个求取方法,对于等式约束的优化问题,可以应用拉格朗日乘子法去求取最优值:如果含有不等式 ...

  3. java List深拷贝示例

    示例一 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.util.ArrayList; import java ...

  4. idea2018破解

    准备:ideaIU-2018.1.4.exe 安装程序 JetbrainsCrack-2.10-release-enc.jar 破解jar包 第一步:打开安装目录/bin,找到idea.exe.vmo ...

  5. VirtualDub在处理WMV文件时显示“MISSING CODEC”怎么办

    以下内容主要来自:http://www.brilliantcode.com/virtualdub-is-showing-missing-codec-when-i-play-a-wmv-movie-ev ...

  6. Keras上实现简单线性回归模型

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/marsjhao/article/detai ...

  7. IDEA创建本地Spark程序，并本地运行

    1   IDEA创建maven项目进行测试 v创建一个新项目,步骤如下: 选择“Enable Auto-Import”,加载完后:选择“Enable Auto-Import”,加载完后: 添加SDK依 ...

  8. ingress controller 注解使用

    ingress controller 注解使用 官网github注解地址: https://github.com/kubernetes/ingress-nginx/blob/master/docs/u ...

  9. linux 账户控制

    用户 用户是能够获取系统资源的权限的集合. linux用户组的分类: 管理员 root :具有使用系统所有权限的用户,其UID 为0. 普通用户 : 即一般用户,其使用系统的权限受限,其UID为500 ...

  10. JVM&G1 GC 学习笔记（一）

    在入门学习JVM的过程中,我们需要先了解关于JVM的知识中有哪些关键词或关键术语,今天在看完书后我想记录下来. Xms64mb    虚拟机初始化时设置内存大小为64mb Xmx256mb  设定虚拟 ...