jquery中的回调函数怎么用

jquery中的回调函数怎么用,第1张

     因为javascript的运行机制的原弯滚答因,jquery作为成熟的工具,为javascript提供了大量的回埋慧调函数(callback)。

     因为回调函数的工作原理以及工作时机,很多新手对回调函数不能熟练运用。回调函数的重要作用之一,就是在某项 *** 作完成时,进行下一项 *** 作。这两项 *** 作功能上不一定耦合,但是逻辑上却必须耦合。意思是前一个 *** 作实现的功能(效果)可以和回调函数实现的功能毫无联系,但是二者在代码逻辑上却是耦合的。耦合的意思是说,当一 *** 作进行后,二 *** 作会紧跟进行,二者的运行关系密不可分。回调函数增加了程序的耦合性,使代码的逻辑更容易理解。

     回调函数的用处在javascript中可谓处处体现,比如最为重要的就是AJAX回调。

     Jquery中提供了大量大回调函数,比如complete,success,fail等 *** 作。这些 *** 作的调用时机就如同他们的名字一样。success以为着成功的时候调用,等。

    举个简单的例子,以jquery中的动画为例,现在我想实现一个让id为animate的dom对象宽度边长的动画,在这个对象变长之后,我想要提示用户,这个对象已经变长了。因此,我得使用以下的代码:

$("#animate").animate({

    width: 200

}, {

    duration: 500,

    success: function() {

        alert("width 已经变长了")

    },

    error: function() {

        alert("出现了错误")

    }

})

以上的代码定义了两个回调函数success和error,顾名思义,success是在成功的时候就会调用,error是在出错误之后调用。

这就是回调函数的基本运用。

看到这儿,或许你会问,为什么我不直接用这样的代码呢?

try {

    $("#animate").animate({

        width: 2000

    }, 500, "linear")

    alert(""width已经变长了)

} catch(error) {

    alert("出错了")

}

如果你测试你会发现,动画并未完成,就出现了alertd窗。

这就是javascript的运行机制所造成的,javascript的运行机制分为同步和异步,异步 *** 作会破坏脚本的执行流,使得程序跳过异步(异步仍然在进行)而进入接下来的程序,异步 *** 作即使在进行,也不会影响javascript的继续执行,也就是不会产生备羡阻塞。同步 *** 作中的定时 *** 作有着与异步很相似的运行机制,但是依然是同步 *** 作。以上的错误正是由于定时 *** 作引起的。

回调函数的作用,最为重要的运用,就是运用在异步 *** 作和定时 *** 作。

jquery中运用回调函数最重要的地方有两个,一个是动画回调(就是在动画执行完成,或者执行错误,或者执行失败的时候调用),以及ajax(同动画)。ajax与回调是密不可分的。

jquery ajax 回调函数只要配置正确就可以使用

$.ajax({ url: "test.html", context: document.body, success: function(){

alert("回调函数")

}})

使用代码如上

回调函数实现的机制是:

⑴定义一个回调函数;

⑵提供函数实现的一方在山握初始镇唯旅化的时候,将回调函数的函数指针注册给调用者;

⑶当特定的事件或条件发生的时候,调用者使用函数指针调用回调函数对事件进行处理。

知道拓展

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的 *** 作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。

回调函数是应用程序提供给御凳Windows系统DLL或其它DLL调用的函数,一般用于截获消息、获取系统信息或处理异步事件。在计算机程序设计中,回调函数,或简称回调,是指通过函数参数传递到其它代码的,某一块可执行代码的引用。这一设计允许了底层代码调用在高层定义的子程序。

1、新建一个html文件,命名为test.html,用于讲解如何用jquery实现点击按钮文本框内的文字加粗。

2、在test.html文件内,使用input标签创建一个文本框,用于文字的输入。

3、在test.html文件内,设置input标签的没启袜id为testid,主要用于下面通过该id获得input对象。

4、在test.html文件内,使用button标签创建一个按钮,按钮名称为“加粗文字”。

5、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行addstrong()函数。

6、在js标签中,创建addstrong()函枯激数,在函数内,通过id(testid)获得input对象,使用css()方法设置input对象内文字的font-weight属性值为bolder,从旁猛而实现文字的加粗。

7、在浏览器打开test.html文件,点击按钮,查看实现的效果。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/bake/11984509.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存