【第五章】jQuery中的事件处理和动画效果

mac2024-05-17 37

5.1jQuery中的事件处理

5.1.1 页面加载响应事件

$(document) .ready()方法是事件模块中最重要的一个函数，它极大地提高了Web响应速度。 $(document) 是获取整个文档对象，从这个方法名称来理解，就是获取文档就绪的时候。书写格式： $(document).ready(function(){ //在这里编写代码 }); 可以简写成： $().ready(function(){ //在这里编写代码 }); 进一步简写： $ (function(){ //在这里编写代码 });

5.1.3事件绑定

1.为元素绑定事件

<body> <div id="first"> <h3 class="title">什么是编程？</h3> </div> <div id="content"> 明日编程词典系列软件是由近百位软件开发人士联手打造热卖热卖 </div> <script> $(document).ready(function(){ $("#first h3.title").bind("click",function(){ $(this).next().show(); }) }); </script> </body> </html>

模拟用户操作

1,模拟用户的操作触发事件

TriggerHandle()方法的语法格式与trigger()方法完全相同。所不同的是：TriggerHandle()方法，不会导致浏览器同名的默认行为被执行，而trigger()方法会导致浏览器同名的默认行为的执行. 例如，使用trigger()触发一个名称为，submit的事件，同样会导致浏览器执行提交表单的操作。要阻止浏览器的默认行为，只需要返回 false。另外，使用工trigger()方法和TriggerHandle()方法还可以触发bind()绑定的自定义事件，并且还可以为事件传递参数。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>5.1.4模拟用户操作1.模拟用户的操作触发事件</title> <script type="text/javascript"src="js/jquery-1.11.1.min.js"></script> </head> <body> <input type="button" name="button" id="button" value="普通按钮"/> <script> $(document).ready(function(){ $("input:button").bind("click",function(event,msg1,msg2){ alert(msg1+msg2); //弹出对话框 }).trigger("click",["欢迎访问","明日科技"]);//页面加载弹出单击事件 }); </script> </body> </html>

2.模仿悬停事件

模仿悬停是指模仿鼠标移动到一个对象上面又从该对象上面移出的事件。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>5.1.4模拟用户操作2.模仿悬停事件</title> <script language="JavaScript" src="js/jquery-1.11.1.min.js"></script> </head> <body> <div style="float:right;text-align: right;"> <a href="10313.html">首页</a> <a href="10313.html" class="main">登录</a> <a href="10313.html" class="main">注册</a> <a href="10313.html" class="main">找回密码</a> </div> <script> $(document).ready(function(){ $("a.main").hover(function(){ window.status="http://www.baidu.com"; return true; },function(){ window.status="完成"; return true; }); }); </script> </body> </html>

最新回复(0)