学习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 Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 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验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
js对象的比较
2011/02/26 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
自荐信的两点禁忌
2013/10/30 职场文书
质量提升方案
2014/06/16 职场文书