这里讲到了一条语句运行多个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. ASP.NET Core Web App应用第三方Bootstrap模板

    引言 作为后端开发来说,前端表示玩不转,我们一般会选择套用一些开源的Bootstrap 模板主题来进行前端设计.那如何套用呢?今天就简单创建一个ASP.NET Core Web MVC 模板项目为例, ...

  2. HashMap 相关面试题及其解答

    Q:HashMap 的数据结构? A:哈希表结构(链表散列:数组+链表)实现,结合数组和链表的优点.当链表长度超过 8 时,链表转换为红黑树. transient Node<K,V>[] ...

  3. 【安富莱专题教程第1期】基于STM32的硬件RGB888接口实现emWin的快速刷新方案，32位色或24

    说明:1. 首先感谢ST终于推出了ARGB格式的emWin库,可谓千呼万唤始出来,使用STM32的硬件RGB888接口刷新图片慢的问题终于得到解决.2. 这个问题由来已久,是之前为我们的STM32-V ...

  4. [Swift]LeetCode894. 所有可能的满二叉树 | All Possible Full Binary Trees

    A full binary tree is a binary tree where each node has exactly 0 or 2 children. Return a list of al ...

  5. 一张图看懂STM32芯片型号的命名规则

    意法半导体已经推出STM32基本型系列.增强型系列.USB基本型系列.增强型系列:新系列产品沿用增强型系列的72MHz处理频率.内存包括64KB到256KB闪存和 20KB到64KB嵌入式SRAM.新 ...

  6. AI - TensorFlow - 起步（Start）

    01 - 基本的神经网络结构 输入端--->神经网络(黑盒)--->输出端 输入层:负责接收信息 隐藏层:对输入信息的加工处理 输出层:计算机对这个输入信息的认知 每一层点开都有它相应的内 ...

  7. H5 页面调试小帮手-UC 开发者工具

    调试web页面难 接触过app自动化的同学都比较清楚,如果想要对web应用或者Hybrid应用进行调试时(获取页面元素信息等等),必定绕不开的就是chrome浏览器的inspect功能了:在chrom ...

  8. Python内置函数(50)——print

    英文文档: print(*objects, sep=' ', end='\n', file=sys.stdout, flush=False) Print objects to the text str ...

  9. DDD实战进阶第一波(一)：开发一般业务的大健康行业直销系统（概述）

    本系列文章 DDD实战进阶第一波(一):开发一般业务的大健康行业直销系统(概述) DDD实战进阶第一波(二):开发一般业务的大健康行业直销系统(搭建支持DDD的轻量级框架一) 近年来,关于如何开发基于 ...

  10. CSRF攻击原理及防御

    一.CSRF攻击原理 CSRF是什么呢?CSRF全名是Cross-site request forgery,是一种对网站的恶意利用,CSRF比XSS更具危险性.想要深入理解CSRF的攻击特性我们有必要 ...