学习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 相关文章推荐
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
详解flask入门模板引擎
2018/07/18 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Python3如何判断三角形的类型
2020/04/12 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
英语辞职信怎么写
2015/02/28 职场文书
导游词之桂林山水
2019/09/20 职场文书