MySQL의 데이터베이스 체조 자습서 (35 그래픽 버전)
그리고 자신의 과거를 전복 - 사용자 정의보기 튜토리얼 시리즈 (10)
숲 밖으로 생각, 도로에 세트 발은 정교한 고급 에센스 기록을 개발 --Android
전면 튜토리얼 시리즈 (40 개 에피소드 무료 비디오 자습서 + 소스 코드)을 말하고자하는 안드로이드 프로그래머
저작권
- 이 문서 원래 저자 : 컬럼비아 밸리의 동생
- 블로그 주소 : HTTP : //blog.csdn.net/lfdfhl
이 튜토리얼에서, 우리는 바인딩 처리 공통의 프레임 워크의 jQuery 이벤트에 초점을 맞 춥니 다.
jQuery를 이벤트 바인딩 표준
구문은 다음과 같습니다 :
jQuery对象.事件方法(回调函数);
다음 예는 다음과 같다 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery事件绑定及其处理1</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//点击事件
$("#blog").click(function () {
alert("click");
});
//鼠标移入事件
$("#welcome").mouseover(function () {
alert("mouseover");
});
//鼠标移出事件
$("#welcome").mouseout(function () {
alert("mouseout");
});
//事件处理的链式写法
$("#bye").mouseover(function () {
alert("mouseover");
}).mouseout(function () {
alert("mouseout");
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div id="welcome" style="width: 200px;height:200px;background-color:greenyellow">Hello jQuery</div>
<div id="bye" style="width: 200px;height:200px;background-color:seagreen">Bye JavaScript</div>
</body>
</html>
에 넥타이 바인딩 정착 떨어져 사용
구문은 다음과 같습니다 :
jQuery对象.on("事件名称",回调函数);
jQuery对象.off("事件名称");
다음 예는 다음과 같다 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery事件绑定及其处理2</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//利用on绑定点击事件
$("#welcome").on("click",function () {
alert("welcome clicked");
});
$("#bye").on("click",function () {
//利用off解除点击事件的绑定
$("#welcome").off("click");
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div id="welcome" style="width: 200px;height:200px;background-color:greenyellow">Hello jQuery</div>
<div id="bye" style="width: 200px;height:200px;background-color:seagreen">Bye JavaScript</div>
</body>
</html>
바인딩 및 바인딩 해제 바운드 연결 화해를 사용하여
구문은 다음과 같습니다 :
jQuery对象.bind("事件名称",回调函数);
jQuery对象.unbind("事件名称");
다음 예는 다음과 같다 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery事件绑定及其处理3</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//利用bind绑定点击事件
$("#welcome").bind("click",function () {
alert("welcome clicked");
});
$("#bye").on("click",function () {
//利用unbind解除点击事件的绑定
$("#welcome").unbind("click");
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div id="welcome" style="width: 200px;height:200px;background-color:greenyellow">Hello jQuery</div>
<div id="bye" style="width: 200px;height:200px;background-color:seagreen">Bye JavaScript</div>
</body>
</html>
