jQuey에서 return false_javascript 트릭을 알아보세요.-JS 튜토리얼-php.cn

jQuey에서 return false_javascript 트릭을 알아보세요.

WBOY

풀어 주다： 2016-05-16 15:24:59

원래의

1122명이 탐색했습니다.

jQuey에서 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 홈페이지로 점프하지 않습니다. 이는 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에서 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的返回值，回调函数返回值没有意义
  }

로그인 후 복사

테스트해 보세요. 문제없습니다!

js/jquery에서 언제 return을 사용하고 언제 return false를 사용합니까? 모두가 헷갈려하는 부분이기도 합니다.

기본적으로 return은 함수의 결과를 반환하는 데 사용됩니다. 결과를 실행하기 위해 함수가 필요한 경우 결과가 필요하지 않으면 반환하지 마세요. > jq에는 $().each(function(){return false;}); false가 반환되지 않으면 모든 요소가 반복되며, false가 한 번 반환되면 이후 순회는 수행되지 않고 루프가 점프됩니다.

이상은 jQuey의 return false에 대한 자세한 연구입니다. 모든 분들의 연구에 도움이 되기를 바랍니다.