學(xué)習(xí)jQuey中的return false
jQuey中的return false作用是什么?
在眾多的語句中都有return false的使用,當(dāng)然對于熟悉它的開發(fā)者來說,當(dāng)然是知根知底,知道此語句的作用,當(dāng)然也就知道在什么時候使用此語句,不過對于初學(xué)者可能未必掌握的很清晰明了,下面通過實例介紹一下return false語句的作用。
return語句的作用一般是返回函數(shù)值,并不再執(zhí)行下面的語句,直接跳到函數(shù)調(diào)用的地方,另外還有一個重要的作用,那就是取消默認(rèn)事件行為的發(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://chabaoo.cn>鏈接</a> </div> </div> </body> </html>
從以上代碼可以看出,點擊鏈接之后并沒有跳轉(zhuǎn)到http://chabaoo.cn首頁,這是因為return false能夠阻止瀏覽器的默認(rèn)行為,比如點擊超鏈接就會實現(xiàn)網(wǎng)頁跳轉(zhuǎn)就是瀏覽器的默認(rèn)行為。下面再看一個表單驗證的例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://chabaoo.cn/" /> <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://chabaoo.cn" 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語句的話,那么盡管還能夠彈出提示框,但是表單依然會被提交,因為點擊提交表單就是點擊提交按鈕的默認(rèn)事件行為。
那為什么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默認(rèn)是異步的,并且不是在回調(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的返回值永遠(yuǎn)為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進行的詳細(xì)學(xué)習(xí),希望對大家的學(xué)習(xí)有所幫助。
- javascript中return,return true,return false三者的用法及區(qū)別
- Jquery的each里用return true或false代替break或continue
- 淺析return false的正確使用
- js中return false(阻止)的用法
- 淺析onsubmit校驗表單時利用ajax的return false無效問題
- JavaScript中return false的用法
- 基于jquery實現(xiàn)智能提示控件intellSeach.js
- jQuery.each使用詳解
- JavaScript中的數(shù)組遍歷forEach()與map()方法以及兼容寫法介紹
- JS中的forEach、$.each、map方法推薦
- 詳解JavaScript中的forEach()方法的使用
- JavaScript使用forEach()與jQuery使用each遍歷數(shù)組時return false 的區(qū)別
相關(guān)文章
JavaScript模擬可展開、拖動與關(guān)閉的聊天窗口實例
這篇文章主要介紹了JavaScript模擬可展開、拖動與關(guān)閉的聊天窗口,實例分析了javascript實現(xiàn)可拖動的div層相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05