这里讲到了一条语句运行多个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. High Availability手册(1): 环境

    三台KVM虚拟机 首先我们得有一个pacemaker的环境,需要三台机器,如果没有那么多物理机器,可以用kvm虚拟机 创建一个bridge ovs-vsctl add-br ubuntu_br ifc ...

  2. 从协议入手，剖析OAuth2.0(译 RFC 6749)

    1.介绍      https://tools.ietf.org/html/rfc6749  传统的client-server授权模型,客户端通过使用凭证(通常的用户名和明文密码)访问服务端受保护的资 ...

  3. 常见的java设计模式

    单例模式 简单点说,就是一个应用程序中,某个类的实例对象只有一个,你没有办法去new,因为构造器是被private修饰的,一般通过getInstance()的方法来获取它们的实例. getInstan ...

  4. Web前端-Vue.js必备框架（四）

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  5. [Swift]LeetCode456. 132模式 | 132 Pattern

    Given a sequence of n integers a1, a2, ..., an, a 132 pattern is a subsequence ai, aj, ak such that  ...

  6. 非对称加密技术里面，最近出现了一种奇葩的密钥生成技术，iFace人脸密钥技术

    要说到非对称加密技术啊,得先说说对称加密技术 什么是对称加密技术 对称加密采用了对称密码编码技术,它的特点是文件加密和解密使用相同的密钥加密. 也就是密钥也可以用作解密密钥,这种方法在密码学中叫做对称 ...

  7. 专访 | 新浪架构师：0-5年Java工程师的职业规划如何做？

    经历了2018年末的阵痛,大家都积攒着一股暗劲蠢蠢欲动. 3月初即将迎来2019年互联网行业换工作的大潮,技术工程师的升级换位对于一家互联网公司来说无疑是命脉般的存在——技术强则公司强! 如何做一个抢 ...

  8. php 定时任务

    crontab第一次使用真是个坑 第一次使用crontab 时,会出现no crontab for root - using an empty one“Select a editor ......”下 ...

  9. Android Studio升级到3.1.4后打开旧项目警告：The `android.dexOptions.incremental` property is deprecated and it has no effect on the build process.

    现象截图 问题原因&解决方案 在build.gralde中,对Android开发过程中突破的方法数的限制,做了如下解决配置: dexOptions { incremental true jav ...

  10. 计蒜客：Entertainment Box

    Ada, Bertrand and Charles often argue over which TV shows to watch, and to avoid some of their fight ...