学习jQuey中的return false

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=http://www.jb51.net>链接</a>
</div>
</div>
</body>
</html>

从以上代码可以看出，点击链接之后并没有跳转到http://www.jb51.net首页，这是因为return false能够阻止浏览器的默认行为，比如点击超链接就会实现网页跳转就是浏览器的默认行为。下面再看一个表单验证的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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="http://www.jb51.net" 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进行的详细学习，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • JS中的forEach、$.each、map方法推荐

    forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: [1, 2 ,3, 4].forEach(alert); 等同于下面这个for循环 var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) { alert(array[k]); } Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的function回

  • js中return false(阻止)的用法

    return false 阻止表单提交不起今天这个问题困扰了我很久,在网上找了很多资料,基本上关于onsubmit=return false有以下几点要注意的地方: 1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方.如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数:只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处. 复制代码 代码如下

  • 基于jquery实现智能提示控件intellSeach.js

    基于jquery实现智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入"李",系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用.关于autocomplete的介绍也很多,有兴趣的朋友

  • 浅析onsubmit校验表单时利用ajax的return false无效问题

    复制代码 代码如下: /** * 表单提交校验 **/function onSubmit(){    if($('#name').val().length<2){        alert("名称请不少于两个汉字");        return false;    }    var t = new Date().getTime();    $.ajax({        type: "POST",        url: "/users/check

  • javascript中return，return true,return false三者的用法及区别

    1.语法及返回方式 ①返回控制与函数结果 语法为:return 表达式; 语句结果函数的执行,返回调用函数,而且把表达式的值作为函数结果返回出去 ②返回控制无函数结果 语法为:return; 在大多数情况下,为事件处理函数如果让其返回false,可以防止默认的事件行为.例如,默认情况下,点击一个<a>标签元素,页面会跳转到该元素href属性指定的页. 而return false就相当于终止符,return true就相当于执行符. 在js中return false的作用一般是用来取消默认动作的

  • JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别

    JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.each(a, function(index,val) { console.log('index='+index); if(index==2){ return false; } console.log('val='+val); }); 结果如下: 从运行的效果可以看出,return 相当于循环中的br

  • Jquery的each里用return true或false代替break或continue

    复制代码 代码如下: function methodone(){ .... $.each(array,function(){ if(条件成立){ return true; } }); .... } 在一个function里有一个each,在each里某种条件 成立的话,就把这个function返回true或者false 但是在each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用其它的方式 break----用return false; con

  • jQuery.each使用详解

    jQuery.each方法是jQuery的核心工具方法之一,通用例遍方法,可用于例遍对象和数组.不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象.通常需要两个参数 object:需要例遍的对象或数组. callback:每个成员/元素执行的回调函数. 回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容.如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略. 例遍数组,同时使用元素索引和内容.举例如下: //例

  • JavaScript中return false的用法

    在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为. 例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页. Return False 就相当于终止符,Return True 就相当于执行符.在js中return false的作用一般是用来取消默认动作的.比如你单击一个链接除了触发你的onclick事件(如果你指定的话)以外还要触发一个默认事件就是执行页面的跳转.所以如果你想取消对象的默认动作就可以return false. 同样的,return fal

  • 浅析return false的正确使用

    可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件的代码: 复制代码 代码如下: $("a.toggle").click(function () {      $("#mydiv").toggle();      return false; // Prevent browser from visiting `#`  }); 这个函数使用toggle来显示或者隐藏#mydiv,然后阻止浏览器

  • JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍

    •原理: •高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: •forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: •数组中有几项,那么传递进去的匿名回调函数就需要执行几次: •每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: •理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行

  • 详解JavaScript中的forEach()方法的使用

    JavaScript数组的 forEach()方法调用数组中的每个元素. 语法 array.forEach(callback[, thisObject]); 下面是参数的详细信息: callback : 函数测试数组的每个元素. thisObject : 对象作为该执行回调时使用. 返回值: 返回创建数组. 兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现.为了使它工作,你需要添加下面的脚本代码的顶部: if (!Array.prototy

随机推荐