学习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与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
JS 表单验证大全
Nov 23 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
js实现表格筛选功能
Jan 18 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
event.srcElement+表格应用
2006/08/29 Javascript
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
Python实现的检测网站挂马程序
2014/11/30 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
python将unicode转为str的方法
2017/06/21 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
java程序员面试交流
2012/11/29 面试题
社团活动总结模板
2014/06/30 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS