Jquery 库详解 --- 3.5 Jquery 事件相关方法
Posted le_wenzhong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery 库详解 --- 3.5 Jquery 事件相关方法相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 事件编程相关的方法 </title> </head> <body> <input id="test1" type="button" value="单击我"/><br /> <input id="test2" type="button" value="切换右边复选框的勾选状态"/> <input id="check" type="checkbox" value=""/><br /> <input id="test3" type="button" value="绑定toggle的按钮"/><br /> <script type="text/javascript" src="../jquery-1.8.0.js"> </script> <script type="text/javascript"> // 指定页面加载完成时执行指定函数 $(document).ready(function() { alert("页面加载完成！"); }); // 为id为test1的元素的click事件绑定事件处理函数 $("#test1").on("click" , {book:"疯狂Ajax讲义"} , function(event) { alert("id为test1的按钮被单击!\n" + "事件为：" + event + "\n事件上data的book属性为：" + event.data.book); }); // 为id为test2的元素的click事件绑定事件处理函数 $("#test2").on("click" , function(event) { // 使用代码触发id为check的元素的单击事件，而且执行默认行为 $("#check").trigger("click"); }); // 使用toggle为id为test3的元素绑定3个事件处理函数。 $("#test3").toggle( function(event) { alert("3n次被单击" + event); }, function(event) { alert("3n + 1次被单击"); }, function(event) { alert("3n + 2次被单击"); } ); </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 访问jQuery事件对象 </title>
</head>
<body>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 指定页面加载完成后执行该函数
$(function()
{
// 获取页面上包含飞机图片的div元素
var target = $("body>div:first");
// 为body元素的keydown事件绑定事件处理函数
$("body").keydown(function(event)
{
switch(event.which)
{
// 按下向左键
case 37:
target.offset({left:target.offset().left - 4
, top:target.offset().top});
break;
// 按下向上键
case 38:
target.offset({left:target.offset().left
, top:target.offset().top - 4});
break;
// 按下向右键
case 39:
target.offset({left:target.offset().left + 4
, top:target.offset().top});
break;
// 按下向下键
case 40:
target.offset({left:target.offset().left
, top:target.offset().top + 4});
break;
}
});
})
</script>
<div style="position:absolute;">
<img src="plane.png" alt="飞机"/></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 具体事件相关的方法 </title>
</head>
<body>
<input id="test1" type="button" value="单击我"/><br />
<div id="test2">
鼠标悬停、移除将触发指定函数
</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
$("#test1").click(function(event)
{
alert("id为test1的按钮被单击" + event)
})
.click();
// 使用hover为id为test2的元素绑定2个事件处理函数
// 当鼠标移入该元素时触发第一个函数，移出该元素时触发第二个函数
$("#test2").css("border" , "1px solid black")
.css("background-color" , "#cccccc")
.width(200)
.height(80)
.hover(function(event)
{
alert("鼠标移入该元素之内！");
},
function()
{
alert("鼠标移出该元素！");
}
);
</script>
</body>
</html>
以上是关于Jquery 库详解 --- 3.5 Jquery 事件相关方法的主要内容，如果未能解决你的问题，请参考以下文章