學習jQuey中的return false

更新時間：2015年12月18日 09:09:26 投稿：lijiao

這篇文章主要介紹了jQuey中的return false作用，以及解決jquery中的return false不起作用的方法，感興趣的小伙伴們可以參考一下

jQuey中的return false作用是什么？
在眾多的語句中都有return false的使用，當然對于熟悉它的開發(fā)者來說，當然是知根知底，知道此語句的作用，當然也就知道在什么時候使用此語句，不過對于初學者可能未必掌握的很清晰明了，下面通過實例介紹一下return false語句的作用。
return語句的作用一般是返回函數(shù)值，并不再執(zhí)行下面的語句，直接跳到函數(shù)調(diào)用的地方，另外還有一個重要的作用，那就是取消默認事件行為的發(fā)生。
代碼實例如下:

<!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://m.fzitv.net>鏈接</a> 
</div> 
</div> 
</body> 
</html>

從以上代碼可以看出，點擊鏈接之后并沒有跳轉(zhuǎn)到http://m.fzitv.net首頁，這是因為return false能夠阻止瀏覽器的默認行為，比如點擊超鏈接就會實現(xiàn)網(wǎng)頁跳轉(zhuǎn)就是瀏覽器的默認行為。下面再看一個表單驗證的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://m.fzitv.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://m.fzitv.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設(shè)置為同步的，需要使用$.ajax，$.get默認是異步的，并且不是在回調(diào)函數(shù)內(nèi)return，而是在CheckUserName函數(shù)中聲明一個變量來接受回調(diào)函數(shù)的返回值，然后CheckUserName返回這個值。
修改后的代碼：　

　function CheckUserName(){
    var username = $("#username").val();
    var result=false;
    $.ajax({async:false//要設(shè)置為同步的，要不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的返回值，回調(diào)函數(shù)返回值沒有意義
  }

OK! 測試一下，沒問題了！

js/jquery中什么時候用return，什么時候用return false？這也是大家疑惑的地方。

根本的說 return 是函數(shù)的返回結(jié)果用，如果你一個函數(shù)需要執(zhí)行結(jié)果那就return 你需要的結(jié)果，不需要結(jié)果就不用return；
而在jq中有些特殊的用法，比如$().each(function(){return false;})；
其中如果不return false就會循環(huán)所有元素，而如果在其中一次return false則不在進行后續(xù)的遍歷，跳出循環(huán)。

以上就是針對jQuey中的return false進行的詳細學習，希望對大家的學習有所幫助。

您可能感興趣的文章: