这里讲到了一条语句运行多个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. DCOS实践分享(2)：基于Docker Compose和Swarm的Docker化之路

    2016 年1 月 23 日,北京史上气温最低的一天. 在下午 1 点半的时候,由 DaoCloud 赞助的 2016 年度首次 Docker Meetup 准时开始. 在这次Meetup中,我分享了 ...

  2. 2018 大湾区（深圳） .NET技术分享交流会 第一期

    .NET Core 2.1 已于2018年5月30日正式发布,邀请粤港澳大湾区.NET技术专家和从业人员,一起分享与交流.NET技术的发展方向,提高粤港澳大湾区.NET技术交流氛围,挖掘.NET高级人 ...

  3. touchweb网站常见问题，手机网站注意问题

    一.h5网站input 设置为type=number的问题 h5网页input 的type设置为number一般会产生三个问题,一个问题是maxlength属性不好用了.另外一个是form提交的时候, ...

  4. [Swift]LeetCode653. 两数之和 IV - 输入 BST | Two Sum IV - Input is a BST

    Given a Binary Search Tree and a target number, return true if there exist two elements in the BST s ...

  5. [Swift]LeetCode860. 柠檬水找零 | Lemonade Change

    At a lemonade stand, each lemonade costs $5. Customers are standing in a queue to buy from you, and ...

  6. Java面向对象特征之封装

    package practice;/** * @功能 创建动物类,对动物的属性进行封装 * @author square 凉 * */public class Animal { /**  * 动物姓名 ...

  7. 微信小程序day01-JSON配置

    微信小程序 小程序代码构成 JSON配置WXML模板WXSS样式JS逻辑 1.JSON配置 小程序配置 app.json app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径.界面表 ...

  8. 【Impala篇】---Hue从初始到安装应用

    一.前述 Cloudera公司推出,提供对HDFS.Hbase数据的高性能.低延迟的交互式SQL查询功能.基于Hive使用内存计算,兼顾数据仓库.具有实时.批处理.多并发等优点 是CDH平台首选的PB ...

  9. Python爬虫入门教程 33-100 《海王》评论数据抓取 scrapy

    1. 海王评论数据爬取前分析 海王上映了,然后口碑炸了,对咱来说,多了一个可爬可分析的电影,美哉~ 摘录一个评论 零点场刚看完,温导的电影一直很不错,无论是速7,电锯惊魂还是招魂都很棒.打斗和音效方面 ...

  10. Linux 终端下解压文件失败问题

    Linux 终端下解压文件失败: # tar -zxvf *****.tar.bz2 tar 命令出错gzip: stdin: not in gzip format tar: Child return ...