您的位置：首页 > Web前端 > JQuery

jQuery中的事件

2014-02-01 14:45 375 查看
* jQuery中的事件：特殊的事件

        * ready()方法：和window.onload

        * ready()和onload的区别：面试

            * 执行时机

            * 编写个数

            * 简写方法

        * 绑定事件和解绑事件：bind()和unbind()

        * hover()：一个模仿悬停事件

        * toggle()

 ready()方法：和window.onload

<script>

// ready的三种写法
$(document).ready(function(){});
$().ready(function(){});
$(function(){});
</script>

<script type="text/javascript">
var startTime = new Date().getTime();
$(document).ready(function(){
test1();
})

function test1(){
var endTime2 = new Date().getTime();
var a = endTime2 - startTime;
$("<div>jQuery的ready() : "+a+" ms</div>").appendTo("body");
}

function test2(){
var endTime1 = new Date().getTime();
var b = endTime1 - startTime;
$("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("body");
}

</script><body  onload="test2();">

事件绑定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>02_事件绑定.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<div id="panel">
<input type="button" id="stop" value="取消事件">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
<script language="JavaScript">
$().ready(function(){
//常规事件，灵活性不好
//				$("h5").click(function(){
//					if($(this).next().is(":hidden")){
//						$(this).next().show();
//					}else{
//						$(this).next().hide();
//					}
//				});

//				/*
//				 * 事件绑定：bind(type,data,fn)
//				 * 	* type：指定要绑定的事件
//				 * 			一共有以下这些：blur, focus, focusin, focusout, load, resize,
//				 * 			scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
//				 * 			mouseover, mouseout, mouseenter, mouseleave, change, select,
//				 * 			submit, keydown, keypress, keyup, error 。
//				 * 	* data：作为event.data属性值传递给事件对象的额外数据对象
//				 * 	* fn：绑定到每个匹配元素的事件上面的处理函数
//				 */
//				$("h5").bind("click",function(){
//					if($(this).next().is(":hidden")){
//						$(this).next().show();
//					}else{
//						$(this).next().hide();
//					}
//				});
//
//				/*
//				 * 事件解绑：unbind(type,fn)
//				 * 	* type：指定要解绑的事件
//				 * 	* fn：处理函数
//				 */
//				$("#stop").click(function(){
//					$("h5").unbind("click");
//				});

//				$("h5").mouseover(function(){
//					$(this).next().show();
//				}).mouseout(function(){
//					$(this).next().hide();
//				});

//				//绑定多个事件：多个事件之间用空格隔开
//				$("h5").bind("mouseover mouseout",function(){
//					if($(this).next().is(":hidden")){
//						$(this).next().show();
//					}else{
//						$(this).next().hide();
//					}
//				});
//
//				$("#stop").click(function(){
//					$("h5").unbind("mouseover mouseout");
//				});

//				$("#stop").click(function(){
//					confirm("你确认要推出吗?")
//				});

$("#stop").bind("click",{btn:"你确认要推出吗?"},function(event){
confirm(event.data.btn);
});

});
</script>
</html>

hover方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>hover方法</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
<script language="JavaScript">
$().ready(function(){
$("h5").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
});
</script>
</html>

toggle方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>toggle方法</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
<script language="JavaScript">
$().ready(function(){
$("h5").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
},function(){
$(this).css("background","red");
$(this).next().show();
},function(){
$(this).css("background","blue");
$(this).next().hide();
});
});
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航