学习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数据结构和算法之图和图算法
Feb 11 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
简述JS控制台的使用
Jul 15 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
基于js实现数组相邻元素上移下移
May 19 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发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
php实现微信支付之退款功能
2018/05/30 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
Python线性回归实战分析
2018/02/01 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
计算s=f(f(-1.4))的值
2014/05/06 面试题
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
儿子婚宴答谢词
2014/01/09 职场文书
美术国培研修感言
2014/02/12 职场文书
大学生年度个人总结
2015/02/15 职场文书
宇宙与人观后感
2015/06/05 职场文书
承兑汇票延期证明
2015/06/23 职场文书
初三数学教学反思
2016/02/17 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
导游词之崇武古城
2019/10/07 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
Java设计模式之代理模式
2022/04/22 Java/Android