这里讲到了一条语句运行多个JQuery方法（同一个元素）和动画100%完成后执行的callback方法。

　　

<!DOCTYPE html>

<html>

<head>

    <title>Callback方法和链的解释</title>

    <script type="text/javascript" src="../jquery.min.js"></script>

    <script type="text/javascript">

        // Callback函数在当前动画100%完成后执行。

        // 例子1：在隐藏效果完全实现后回调函数

        // $(function(){

        //     $('button').click(function(){

        //         $('p').hide(1000,function(){

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

        //         })

        //     })

        // })

        // 例子2，没有回调函数，警告框会在隐藏效果完成前弹出

        // $(function(){

        //     $('button').click(function(){

        //         $('p').hide(1000);

        //         alert('没有回调函数，警告框会在隐藏效果完成前弹出');

        //     })

        // });

        // 通过上面两个不同的案例：

        // 可以得出callback回调的用法

        // 令人奇怪的是同时hide()，含有回调函数的，隐藏过程相对慢一点

        // 链（Chaining）准许我们在一条语句上运行多个JQuery方法（

        // 在相同的元素上）

        // 优点，浏览器就不必多次查找相同的元素，如需要链接一个动作，你只需要

        // 简单的把该动作追加到之前的动作上。

        // 我们把css(),slideUp(),slideDown()链接在一起。使元素首先变为红色，然后

        // 向上滑动，再然后向下滑动

        // $(function(){

        //     $('button').click(function(){

        //         $('p').css('color','red').slideUp().slideDown();

        //     })

        // })

        // 提示，当进行链接时，代码行会变得很差，不过，jquery

        // 语法不是很严格。

        $(function(){

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

                $('p').css('color','red')

                .hide(1000)

                .show(1);

            })

        })

        // 通过测试可只对于show()和hide()不能同时链接，如果放在一起需要

        // 加上动画时间才能正确显示出来

    </script>

</head>

<body>

    <!-- <button>隐藏</button>

    <p>隐藏效果完全实现后回调函数</p> -->

    <button>点我</button>

    <p>菜鸟教程！</p>

</body>

</html>

Callback方法和JQuery链的解释的更多相关文章

  1. jQuery.extend()方法和jQuery.fn.extend()方法

    jQuery.extend()方法和jQuery.fn.extend()方法源码分析 这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例, ...

  2. jQuery.extend()方法和jQuery.fn.extend()方法源码分析

    这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: <!doctype html> ...

  3. javascript的window.onload()方法和jQuery的$(document).ready()的对比

    jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

  4. 数组的foreach方法和jQuery中的each方法

    /* * 数组的forEach方法: * 1.返回给回调的参数先是值,然后是下标 * 2.回调函数执行时内部的this指向window * */ /*var arr = [1,2,3,4,5]; ar ...

  5. 关于 jQuery 中的 $.data() 方法和 jQuery 对象上的data 方法

    参见文章:http://www.it165.net/pro/html/201404/11922.html

  6. jquery中prop()方法和attr()方法

    接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...

  7. js进阶 12-13 jquery中one方法和trigger方法如何使用

    js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...

  8. 每日学习心得：$.extend()方法和(function($){...})(jQuery)详解

    2014-02-09 前言: 节后头两天上班,主要是调整工作状态.项目也不是很紧,趁着周末把年前遇到了一些关于JS和JQuery的一些问题给总结一下.主要是介绍JQuery的extend方法和(fun ...

  9. jquery attr方法和prop方法获取input的checked属性问题

    jquery attr方法和prop方法获取input的checked属性问题   问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法 ...

随机推荐

  1. java内存分页计算

    介绍三个最常用的分页算法 First(感觉这个最简单实用) //总记录数int rows=21; //每页显示的记录数int pageSize=5; //页数int pageSum=(rows-1)/ ...

  2. JS日历插件 - My97 DatePicker用法详解

    一.简介 1. 注意事项 (1)My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名: (2)各目录及文件的用途: WdatePicker.js 配 ...

  3. [Swift]LeetCode125. 验证回文串 | Valid Palindrome

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  4. Java IO 导入导出TXT文件

    字节流和字符流 区别: 读写单位:顾名思义,字节流以字节(byte)为读写单位,而字符流以字符为读写单位,根据码表映射字符,一次可能读入多个字符. 处理对象:字节流可以处理所有类型的数据(包括图片等) ...

  5. visualsvn的迁移及svn的一些问题

    从A服务器将visualsvn的内容迁移到B服务器的visualsvn. 1 在B服务器上安装visualsvn 到visualsvn官网https://www.visualsvn.com/下载vis ...

  6. 3.django Model

    django ORM基本配置 django中遵循 Code Frist 的原则,即:根据代码中定义的类来自动生成数据库表 1.修改project数据库配置 (1)settigs.py里面 默认 DAT ...

  7. CentOS开发ASP.NET Core入门教程

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9891346.html 因为之前一直没怎么玩过CentOS,大多数时间都是使用Win10进行开发,然后程序 ...

  8. Python爬虫入门教程 1-100 CentOS环境安装

    简介 你好,当你打开这个文档的时候,我知道,你想要的是什么! Python爬虫,如何快速的学会Python爬虫,是你最期待的事情,可是这个事情应该没有想象中的那么容易,况且你的编程底子还不一定好,这套 ...

  9. 《连连看》算法c语言演示(自动连连看)

    (图片是游戏的示意图,来自互联网,与本文程序无关) 看题目就知道是写给初学者的,没需要的就别看了,自己都觉得怪无聊的. 很多游戏的耐玩性都来自精巧的算法,特别是人工智能的水平.比如前几天看了著名的Al ...

  10. Linux系统的数据写入机制--延迟写入

    我们都知道,在Linux关机的之前都会要运行一个命令那就是sync,这个命令是同步的意思,那为什么要运行这个?而且之前的数据改变我们已经看见了,为什么还要运行这个命令?要回答这个问题就要说一下Linu ...