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. [转] SSH两种登录方式（公私钥）解析

    转自:https://www.cnblogs.com/hukey/p/6248468.html SSH登录方式主要分为两种: 1. 用户名密码验证方式 说明: (1) 当客户端发起ssh请求,服务器会 ...

  2. python 文件定位

    tell()方法告诉你文件内的当前位置, 换句话说,下一次的读写会发生在文件开头这么多字节之后. seek(offset [,from])方法改变当前文件的位置.Offset变量表示要移动的字节数.F ...

  3. CDOJ 图论专题 A.不是图论 强连通分量+拓扑排序 经典

    题目链接  在其中纠错第一次wa代码 #include <cstdio> #include <cstring> #include <cstdlib> #includ ...

  4. 1502: [NOI2005]月下柠檬树

    一堆圆台平行光的投影 在草稿纸上画一下,发现对于一个圆,它投影完还是一个半径不变的圆. 定义树的轴在投影平面上经过的点为原点,定一个正方向,建立平面直角坐标系, 能发现,对于一个半径为\(r\),高度 ...

  5. js模拟24小时的倒计时效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. [CSP-S模拟测试]:硬币（博弈论+DP+拓展域并查集）

    题目传送门(内部题135) 输入格式 第一行包含一个整数$T$,表示数据组数. 对于每组数据,第一行两个整数$h,w$,表示棋盘大小. 接下来$h$行,每行一个长度为$w$的字符串,每个位置由为$o, ...

  7. Springboot 使用 webSocket

    介绍 WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进 ...

  8. python3笔记五：while语句

    一:学习内容 while语句 while-else语句 while语句练习 二:while语句 1. 格式 while 表达式:    语句 2.逻辑 当程序执行到while语句时,首先计算表达式的值 ...

  9. LeetCode 116/117. 填充同一层的兄弟节点（Populating Next Right Pointers in Each Node）

    题目描述 给定一个二叉树 struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *next; } 填充 ...

  10. javascript - 事件详解（阻止事件冒泡+阻止事件行为）

    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...