学习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 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
js 动态校验开始结束时间的实现代码
May 25 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
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Python中关于使用模块的基础知识
2015/05/24 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python框架django基础指南
2016/09/08 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
创建Django项目图文实例详解
2019/06/06 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
Python 串口通信的实现
2020/09/29 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
公司借条范本
2015/05/25 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js