jQuey中的return false作用是什么?
在众多的语句中都有return
false的使用,当然对于熟悉它的开发者来说,当然是知根知底,知道此语句的作用,当然也就知道在什么时候使用此语句,不过对于初学者可能未必掌握的很清晰明了,下面通过实例介绍一下return
false语句的作用。
return语句的作用一般是返回函数值,并不再执行下面的语句,直接跳到函数调用的地方,另外还有一个重要的作用,那就是取消默认事件行为的发生。
代码实例如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "author" content = "http://www.softwhy.com/" />
< title >脚本之家</ title >
< script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js" ></ script >
< script type = "text/javascript" >
$(document).ready(function(){
$("a").click(function(){
return false;
})
})
</ script >
</ head >
< body >
< div id = "first" >
< div id = "second" >
< a id = "third" href=<A href = "http://www.jb51.net" >http://www.jb51.net</ A >>链接</ a >
</ div >
</ div >
</ body >
</ html >
|
从以上代码可以看出,点击链接之后并没有跳转到http://www.jb51.net首页,这是因为return
false能够阻止浏览器的默认行为,比如点击超链接就会实现网页跳转就是浏览器的默认行为。下面再看一个表单验证的例子:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "author" content = "http://www.jb51.net/" />
< title >脚本之家</ title >
< script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js" ></ script >
< script type = "text/javascript" >
$(document).ready(function(){
$(":submit").click(function(){
if($("#username").val()=="")
{
alert("用户名不能为空!");
$("#username").focus();
return false;
}
if($("#pw").val()=="")
{
alert("密码不能为空!");
$("#pw").focus();
return false;
}
})
})
</ script >
</ head >
< body >
< form action = "http://www.jb51.net" name = "myform" >
< ul >
< li >用户名:< input type = "text" id = "username" /></ li >
< li >密码:< input type = "password" id = "pw" /></ li >
< li >< input type = "submit" value = "提交表单" ></ li >
</ ul >
</ form >
</ body >
</ html >
|
以上代码中,每一个判断语句的最后都添加了return false语句,如果用户名或者密码为空的话,则会弹出提示框,如果没有return
false语句的话,那么尽管还能够弹出提示框,但是表单依然会被提交,因为点击提交表单就是点击提交按钮的默认事件行为。
那为什么jquery中的return false不起作用,有什么解决方法?
写了个表单验证js代码如下:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function CheckUserName(){
var username = $( "#username" ).val();
$.get( "b.php" ,{ name:username},
function (data){
if (data == 1){
$( "#warnning" ).html( "<font color=#FF3300>Account is used.</font>" );
return false ; //为啥不管用捏?
} else {
$( "#warnning" ).html( "<font color=#00CC66>You can register.</font>" );
return true ; //为啥不管用捏?
}
}
);
}
|
原因:逻辑没弄清楚,要将ajax设置为同步的,需要使用$.ajax,$.get默认是异步的,并且不是在回调函数内return,而是在CheckUserName函数中声明一个变量来接受回调函数的返回值,然后CheckUserName返回这个值。
修改后的代码:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function CheckUserName(){
var username = $( "#username" ).val();
var result= false ;
$.ajax({async: false //要设置为同步的,要不CheckUserName的返回值永远为false
,url: ‘b.php‘ ,data:{name:username}
,success: function (data){
if (data == 1){
$( "#warnning" ).html( "<font color=#FF3300>Account is used.</font>" );
result= false ;
} else {
$( "#warnning" ).html( "<font color=#00CC66>You can register.</font>" );
result= true ;
}
}});
return result; //==========这里才是CheckUserName的返回值,回调函数返回值没有意义
}
|
OK! 测试一下,没问题了!
js/jquery中什么时候用return,什么时候用return false?这也是大家疑惑的地方。
根本的说 return 是函数的返回结果用, 如果你一个函数需要执行结果那就return
你需要的结果,不需要结果就不用return;
而在jq中有些特殊的用法,比如$().each(function(){return
false;});
其中如果不return false就会循环所有元素, 而如果在其中一次return false则不在进行后续的遍历,跳出循环。
以上就是针对jQuey中的return false进行的详细学习,希望对大家的学习有所帮助。
时间: 2024-10-20 21:16:05