学习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效率调优经验
Jun 04 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JQuery实现图片轮播效果
May 08 jQuery
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
JS中的三个循环小结
Jun 20 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 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
php将文本文件转换csv输出的方法
2014/12/31 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
js返回顶部实例分享
2016/12/21 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Python中的Matplotlib模块入门教程
2015/04/15 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
基层工作经历证明
2014/01/13 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
房产协议书范本
2014/10/18 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
离婚代理词范文
2015/05/23 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书