学习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 相关文章推荐
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
Javascript玩转继承(二)
May 08 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
原生JS实现多条件筛选
Aug 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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php中final关键字用法分析
2016/12/07 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
Python时间的精准正则匹配方法分析
2017/08/17 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
python实现单向链表详解
2018/02/08 Python
Python中的取模运算方法
2018/11/10 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
4s客服专员岗位职责
2013/12/01 职场文书
项目专员岗位职责
2013/12/04 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
给小学生的新年寄语
2014/04/04 职场文书
铅球加油稿100字
2014/09/26 职场文书
党校学习个人总结
2015/02/15 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js