jQuery学习笔记三

jquery停止动画

stop函数的初步功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

        $(document).ready(function(){

            $("#flip").click(function(){

                $("#panel").slideDown(8000);

            });

            $("#stop").click(function(){

                $("#panel").stop();

            });

        });

    </script>

    <style>

        #panel,#flip{

            text-align: center;

            padding: 5px;

            background-color:#e5eecc;

            border: solid 1px #803636;

        }

        #panel{

            padding: 50px;

            display: none;

        }

    </style>

</head>

<body>

    <button id="stop">

        点击我停止

    </button>

    <div id="flip">

        点我向下滑动面板

    </div>

    <div id="panel">

        面板

    </div>

</body>

</html>

现象:当调用stop()函数的时候动画会结束

stop函数的三种参数形式的功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

        $(document).ready(function(){

            $("#start").click(function(){

                $("div").animate({left:"100px"},5000);

                $("div").animate({fontSize:"3em"},5000);

            })

            $("#stop").click(function(){

                $("div").stop();//停止当前的动画执行，队列后面的可以执行

            })

            $("#stop2").click(function(){

                $("div").stop(true);//停止所有的动画

            })

            $("#stop3").click(function(){//停止所有动画，但是会显示最后的结果

                $("div").stop(true,true);

            })

        })

    </script>

</head>

<body>

    <button id="start">开始</button>

    <button id="stop">停止</button>

    <button id="stop2">停止所有</button>

    <button id="stop3">停止动画，但完成动作</button>

    <p>点击 "开始" 按钮开始动画。</p>

    <p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p>

    <p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p>

    <p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p>

    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

</html>

总结

1.函数调用格式

$(selector).stop(stopToAll,goToAnd)

2.参数含义

  • stopAll决定是否清空动画的队列
  • goToEnd决定是否完成当前动画
  • 参数的默认值都是false

jquery的callback()方法

jquery中很多的函数都具有speed和duration两个参数，除此之外还有一个callback的参数，其需要传进一个函数，这个函数会在动画结束之后来执行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

        $(document).ready(function(){

            $("button").click(function(){

                $("p").hide("slow",function(){

                    alert("文字已经成功隐藏!");

                });

            });

        })

    </script>

</head>

<body>

    <button>隐藏</button>

    <p>文本的内容，点击隐藏按钮之后会消失</p>

</body>

</html>

没有回调

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").hide(1000);

    alert("现在段落被隐藏了");

  });

});

</script>

</head>

<body>

<button>隐藏</button>

<p>这是一个段落，内容很少</p>

</body>

</html>

总结:

  • callback函数作为动画函数的一个参数，在动画执行完了之后会被调用。
  • 假如调用的内容不写在回调函数里面，会不执行动画，而执行调用内容

jquery 链

通过jquery可以将动画/方法链接在一起。chaining允许我们在一条语句中运行多个jquery方法，且这些方法作用于相同的元素。

之前写jquery语句都是一条接着一条，不过通过链接的技术，允许我们在相同的元素上运行多条jquery命令,一条接着一条的执行。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

        $(document).ready(function(){

            $("button").click(function(){

                $("p").css("color","red").slideUp(2000).slideDown(2000);//顺序执行

            })

        })

    </script>

</head>

<body>

    <p id="p1">文字</p>

    <button>点我</button>

</body>

</html>

总结

1.使用链的好处是不需要多次查找相同的元素

2.方法按照写的方法顺序执行

初步学习jquery学习笔记（三）的更多相关文章

  1. 初步学习jquery学习笔记（六）

    jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...

  2. 初步学习jquery学习笔记（五）

    jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...

  3. 初步学习jquery学习笔记（一）

    什么是jquery? Jquery是javascript的一个函数库包含以下功能: html元素选取 html元素的操作 css操作 html事件的函数 javacript的特效 html的遍历和修改 ...

  4. 初步学习jquery学习笔记（四）

    Jquery HTML Jquery 捕获内容 什么是dom? DOM = Document Object Model(文档对象模型) 获取内容 text()获取所选元素的文本内容 html()获取所 ...

  5. 初步学习jquery学习笔记（二）

    jQuery事件 jquery是为事件处理而设计的 什么是事件? 页面对不同访问者的相应叫做事件. 事件处理程序指的是html中发生某些事件所调用的方法 实例: 在元素上移动鼠标 选取单选按钮 点击元 ...

  6. Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染

    Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...

  7. jquery基础 笔记三

    一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...

  8. jQuery整理笔记文件夹

    jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...

  9. jquery学习笔记(三)：事件和应用

    内容来自[汇智网]jquery学习课程 3.1 页面加载事件 在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...

随机推荐

  1. c语言 - 关键字const的作用

    const修饰的数据类型是指常类型,常类型的变量或对象的值是不能被更新的. 1.const char * p1;              //表示p1指向了的字符串不可更改 2.char const ...

  2. jQuery_页面加载问题

    运行如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. Python3学习笔记（一）： 环境安装

    一.下载Python软件包 进入官网https://www.python.org/downloads/,下载符合你当前OS的版本 我用的是Win7 64位系统,在这里下载的是Windows 64位可执 ...

  4. USACO2018DEC GOLD

    好简单啊.. T1裸分层图最短路. T2裸容斥. T3更水的DP. 代码 T1 #include <bits/stdc++.h> #define rin(i,a,b) for(regist ...

  5. SQLMAP自注入--INJECTION TECGBUQUES FINGERPRINT

    -p参数 指定扫描的参数 ,使--level失效 -p“user-agent,refer”这些参数也可以通过-p来指定 sqlmap.py -u "http://127.0.0.1/muti ...

  6. 为什么要使用 Go 语言，Go 语言的优势在哪里？

    1.Go有什么优势 可直接编译成机器码,不依赖其他库,glibc的版本有一定要求,部署就是扔一个文件上去就完成了. 静态类型语言,但是有动态语言的感觉,静态类型的语言就是可以在编译的时候检查出来隐藏的 ...

  7. JSTL标签语言

    ******概述: JSTL是apache对EL表达式的扩展(也就是说JSTL依赖EL),JSTL是标签语言! JSTL标签使用以来非常方便,它与JSP动作标签一定,只不过它不是JSP内置的标签,需要 ...

  8. LocalDateTime自动转化格式

    开发中,遇到这样的问题.一个LocalDateTime类型的属性返回给前端是中间带T的格式,前端说转不了. 可以引入jackson包转换一下 <properties> <jackso ...

  9. awk命令2

    提取文件后四行 注释:NR==FNR表示第一个文件,执行{a++},计算出第一个文件10的行数,NR!=FNR表示第二个文件10,执行{if(FNR<=a-4){print $0}},打印出第二 ...

  10. web安全之如何防止CSRF跨站请求伪造(转载)

    https://www.cnblogs.com/blibli/p/7658168.html CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click ...