这次在项目中遇到了不少jquery代码,之前没怎么用过,通过这次机会正好熟悉一下。
jquery可以理解为封装好的js代码,用起来很简洁,方便。重要说一下项目中遇到的回调函数。
因为函数和变量一样,可以一样被复制,删除,拷贝等。所以也可以把函数当做一个参数传入到另外一个函数中。回调函数可以这样定义:一个函数A被当做参数传入函数B中,并在B中执行A,那么A叫做B的回调函数。如果没有名称,则称作匿名回调函数。
先看一下jquery的回调函数:
jquery封装了很多动画函数,比如
$(selector).hide(speed,callback)
这就是一个隐藏的函数,隐藏之后想做一件事情的时候,就可以利用这个callback函数。
如果直接利用
$(selector).hide(speed)在后面直接写后续的操作不行吗,为什么一定要用callback。如果这样操作,会在hide还未执行完毕的时候就会执行后面的操作。如果想在动画执行完毕后在执行相应的操作,那么必须使用回调函数。
从网上扒了一个关于js回调函数的小例子:写了一遍之后感觉对它的理解加深了一层。
HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="1.js" type="text/javascript"></script>
<title>无标题文档</title>
<script type="text/javascript">
function test(){
var p=document.getElementById("pp");
pp.innerText="";
var num=document.getElementById("score").value;
f(num,function(){ //匿名高层处理函数
if(num<60) alert("未及格!");
else if(num<=90) alert("该生成绩优良!");
else alert("该生成绩优秀!"); })
pp.innerText="by since1978 qq558064!"
}
</script>
</head>
<body>
<p>
回调函数示例:当学生成绩score<=0分时候,由底层处理;当score>0时,由高层处理。
</p>
请输入学生成绩<input type="text" id="score">
<input type="button" onClick="test()" value=" 看看结果">
<p id="pp"></p>
</body>
</html>
js代码:
function f(num,callback){
if(num<0) {
alert("调用低层函数处理!");
alert("分数不能为负,输入错误!");
}else if(num==0){
alert("调用低层函数处理!");
alert("该学生可能未参加考试!");
}else{
alert("调用高层函数处理!");
callback();
}
}
自己做一下小例子测试下吧。