jQuery의 바인딩() method_jquery에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery의 바인딩() method_jquery에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:50:20

원래의

1169명이 탐색했습니다.

bind() 메소드 사용법에 대한 자세한 설명:

이 방법은 자주 사용되는 방법 중 하나입니다. API 매뉴얼에 방법이 소개되어 있지만, 언어가 짧고 자세한 예제가 부족하여 바인드의 사용법을 완전하고 정확하게 파악하지 못할 수 있습니다. ) 방법은 다음과 같이 이 방법의 사용을 소개합니다.

문법 형식:

$(selector).bind(type,[data],function(eventObject))

로그인 후 복사

이 메소드는 이벤트 핸들러를 일치하는 모든 요소의 특정 이벤트에 바인딩할 수 있습니다. 예를 들면 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
div{
 width:150px;
 height:40px;
 background-color:blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#bt").bind("click",function(){$("div").text("脚本之家")}) 
})
</script>
</head>
<body>
<div>您好</div>
<input type="button" id="bt" value="点击测试代码" />
</body>
</html>

로그인 후 복사

위 코드에서 버튼을 클릭하면 div 요소의 텍스트가 "script home"으로 설정됩니다.

bind() 메소드의 구문 구조에서 볼 수 있듯이 선택적인 데이터 매개변수도 사용할 수 있습니다. 이 매개변수는 이벤트 객체의 추가 데이터 객체에 전달하기 위해 event.data 속성 값으로 사용될 수 있습니다. .

예는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
div{
 width:150px;
 height:40px;
 background-color:blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var newtext="脚本之家";
 $("#bt").bind("click",{"mytext":newtext},function(e){
  $("div").text(e.data.mytext);
 }) 
})
</script>
</head>
<body>
<div>您好</div>
<input type="button" id="bt" value="点击测试代码" />
</body>
</html>

로그인 후 복사

위 코드는 data 매개변수를 사용하여 처리를 위한 이벤트 함수의 이벤트 객체에 대한 추가 데이터를 제공하고 첫 번째 인스턴스의 효과도 달성합니다.

여러 이벤트 바인딩:

체인 프로그래밍을 사용하여 여러 이벤트를 일치하는 요소에 바인딩할 수 있습니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
div{
 width:150px;
 height:40px;
 background-color:blue;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var newtext="脚本之家";
 $("#bt").bind("click",{"mytext":newtext},function(e){
  $("div").text(e.data.mytext);
 }).bind("mouseout",function(){
  alert("欢迎下次光临");
 }) 
})
</script>
</head>
<body>
<div>您好</div>
<input type="button" id="bt" value="点击测试代码" />
</body>
</html>

로그인 후 복사

버튼에 두 가지 이벤트 처리 기능이 바인딩되어 있으며, 버튼을 클릭하면 div의 텍스트가 재설정될 수 있습니다.

브라우저 기본 이벤트 비활성화

예를 들어 링크를 클릭하여 지정된 주소로 이동하는 것과 제출 버튼을 클릭하여 양식을 제출하는 것은 모두 브라우저 기본 이벤트입니다. 그러나 실제 작업에서는 이러한 기본 이벤트가 우리가 원하는 작업이 아닙니다. 예를 들어 양식 확인에 실패하면 양식을 제출하고 싶지 않습니다. 이때 브라우저 기본 이벤트가 발생하지 않도록 해야 합니다.

코드 예시는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(":submit").bind("click",function(){
  if($("#username").val()=="")
  {
   alert("用户名不能为空!");
   $("#username").focus();
   return false;
  }
  if($("#pw").val()=="")
  {
   alert("密码不能为空!");
   $("#pw").focus();
   return false;
  }
 })
})
</script>
</head>
<body>
<form action="" name="myform">
<ul>
 <li>用户名:<input type="text" id="username" /></li>
 <li>密码:<input type="password" id="pw" /></li>
 <li><button>提交表单</button></li>
</ul>
</form>
</body>
</html>

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.