jQuey の return false_javascript トリックを学ぶ-jsチュートリアル-php.cn

jQuey の return false_javascript トリックを学ぶ

WBOY

リリース： 2016-05-16 15:24:59

オリジナル

1150 人が閲覧しました

jQuey の return false の関数は何ですか?
return false は多くのステートメントで使用されており、これに慣れている開発者は、このステートメントの基本と機能を理解していますが、初心者は必ずしもそれを理解しているとは限りません。例を通して return false ステートメントの機能を紹介しましょう。
return ステートメントの機能は通常、関数の値を返し、以降のステートメントを実行するのではなく、関数が呼び出された場所に直接ジャンプすることです。もう 1 つの重要な機能は、デフォルトのイベント動作の発生をキャンセルすることです。
コード例は次のとおりです:

<!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 によってブラウザのエラーが防止されるためです。ハイパーリンクをクリックするなどのデフォルトの動作は、Web ページにジャンプします。これはブラウザのデフォルトの動作です。フォーム検証の別の例を見てみましょう:

<!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 はデフォルトで非同期であり、コールバック関数を返す代わりに、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 を行わないでください。 > jq には $().each(function(){return false;}); などの特別な使用法がいくつかあります。 false が返されない場合はすべての要素がループされ、一度 false が返されるとそれ以降の走査は実行されずループから抜け出します。

上記は jQuey における return false の詳細な研究であり、皆さんの研究に役立つことを願っています。