学习jQuey中的return false


Posted in Javascript onDecember 18, 2015

jQuey中的return false作用是什么?
在众多的语句中都有return false的使用,当然对于熟悉它的开发者来说,当然是知根知底,知道此语句的作用,当然也就知道在什么时候使用此语句,不过对于初学者可能未必掌握的很清晰明了,下面通过实例介绍一下return false语句的作用。
return语句的作用一般是返回函数值,并不再执行下面的语句,直接跳到函数调用的地方,另外还有一个重要的作用,那就是取消默认事件行为的发生。
代码实例如下: 

<!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=https://3water.com>链接</a> 
</div> 
</div> 
</body> 
</html>

从以上代码可以看出,点击链接之后并没有跳转到https://3water.com首页,这是因为return false能够阻止浏览器的默认行为,比如点击超链接就会实现网页跳转就是浏览器的默认行为。下面再看一个表单验证的例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://3water.com/" />
<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="https://3water.com" 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代码如下:

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返回这个值。
修改后的代码: 

 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进行的详细学习,希望对大家的学习有所帮助。

Javascript 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 #Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 #Javascript
javascript实现保留两位小数的多种方法
Dec 18 #Javascript
原生js实现图片轮播特效
Dec 18 #Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 #Javascript
浏览器兼容性问题大汇总
Dec 17 #Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 #Javascript
You might like
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
php实现分页显示
2015/11/03 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
python中的装饰器详解
2015/04/13 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python复制文件到指定目录的实例
2018/04/27 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python异常处理操作实例详解
2018/08/28 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python序列类型种类详解
2020/02/26 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
简历自我评价范文
2019/04/24 职场文书