学习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 相关文章推荐
关于URL中的特殊符号使用介绍
Nov 03 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
JavaScript中Function详解
Feb 27 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 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&amp;mysql(二)
2006/10/09 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
php数组去除空值函数分享
2015/02/02 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
深入理解令牌认证机制(token)
2019/08/22 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python实现求最长回文子串长度
2018/01/22 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
数控技校生自我鉴定
2014/04/19 职场文书
企业承诺书格式
2014/05/21 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
react 路由Link配置详解
2021/11/11 Javascript
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
Python图像处理库PIL详细使用说明
2022/04/06 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL