首頁 > web前端 > js教程 > 學習jQuey中的return false_javascript技巧

學習jQuey中的return false_javascript技巧

WBOY
發布: 2016-05-16 15:24:59
原創
1168 人瀏覽過

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=<a href="http://www.jb51.net">http://www.jb51.net</a>>链接</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進行的詳細學習,希望對大家的學習有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板