jQuery-jQuery中的事件
2015-09-13 20:22
633 查看
jQuery中的事件 必要的文字描述: 1:加载dom 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法. $(document).ready(function(){});缩写$(function(){}); 2: 事件绑定:对匹配的元素进行特定的事件绑定: bind() 3:合成事件: hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数. toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个. toggle() 的另一个作用: 切换元素的可见状态. 4:事件冒泡 事件会按照 DOM 层次结构像水泡一样不断向上只止顶端 解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为. 案例: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font-size: 13px; line-height: 130%; padding: 60px; } #content{ width: 220px; border: 1px solid #0050D0; background: #96E555; } span{ width: 200px; margin: 10px; background: #666666; cursor: pointer; color: white; display: block; } p{ width: 200px; background: #888; color: white; height: 16px; } </style> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { //事件冒泡:事件会按照DOM层次结构像水泡一样不断向上 直至顶端 $("body").click(function() { alert("body"); }); $("#content").click(function() { alert("content"); }); $("span").click(function() { alert("span"); return false;//通过在相应函数的结尾返回false,会对事件停止冒泡 }); }); </script> </head> <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> <br><br> <a href="http://www.hao123.com">WWW.HAO123.COM</a> </body> </html> 5:事件对象的属性 事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象就被销毁了. event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标. //事件:例如鼠标移动 触发mousemove事件 //如何得到事件对象:在响应函数中添加一个参数就可以,参数名无所谓,event //事件对象的两个属性: $(function() { $("body").mousemove(function(event) { $("#msg").text("x:"+event.pageX+" y:"+event.pageY); }); }); 6:移除事件 移除某按钮上的所有 click 事件: $(“btn”).unbind(“click”) 移除某按钮上的所有事件: $(“btn”).unbind(); one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次. $("li").click(function() { alert(this.firstChild.nodeValue); if("bj"==this.id) { $("#bj").unbind("click"); } }); //one();只为某一个元素添加一次事件,事件响应后不在被触发 $("#rl").one("click",function() { alert("test"); }); 案例: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link href="css/style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { //普通点击事件 /* $(".head").click(function() { var flag = $(".content").is(":hidden"); if(flag) { $(".content").show(); } else { $(".content").hide(); } }); */ //bind()jQuery对象绑定事件, /* $(".head").bind("click",function() { //使用is方法:来判断某个给定jQuery对象是否符合指定的选择器 var flag = $(".content").is(":hidden"); if(flag) { $(".content").show(); } else { $(".content").hide(); } });*/ //光标悬停 mouseover鼠标移上去, mouseout鼠标移出 /* $(".head").mouseover(function() { $(".content").show(); }).mouseout(function() { $(".content").hide(); }); */ //hover(): 模拟光标悬停事件 /* $(".head").hover(function() { $(".content").show(); },function() { $(".content").hide(); });*/ /* //合成事件,第一次点击执行第一个函数,第二次点击执行第二个函数,以此循环 $(".head").toggle( function() { $(".content").show(); },function() { $(".content").hide(); } ); */ }); </script> </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> </html> style.css *{ margin:0; padding:0; } body { font-size:13px; line-height: 130%; padding: 60px; } #panel{ width: 300px; border: 1px solid #0050D0; } .head{ padding: 5px; background: #96E555; cursor: pointer; } .content{ padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0; display: block; display: none; } .highlight{ background: #FF3300 }
相关文章推荐
- JavaScript学习笔记8-jQuery内容过滤选择器、可见性过滤选择器深度解析
- JQuery中$.ajax()方法参数详解
- JQuery动画函数总结
- jQuery 有条件排序
- JQuery学习笔记 选择器 - 代码练习
- JQuery学习笔记 选择器 --- 过滤选择器
- JQuery学习笔记 选择器 --- 基本选择器 和 层次选择器
- 锋利的Jquery【读书笔记】 -- 第三章 jQuery中的DOM操作
- jQuery 模板插件jquery-tmpl
- jquery统一关闭浏览器缓存
- JQuery按原比例显示图片中部最大方形区域
- 因为yii2中jquery位置默认在最下方,可将自定义js位置放在下方
- JQuery源码之“对象的结构解析”
- jquery select三级联动
- bind/on in JavaScript, jQuery, Backbone, Underscore
- JQuery通过$(xxx...)返回对象
- js和jquery获取属性值方式
- jquery 对象不支持此属性或方法
- JQuery中的html(),text(),val()区别
- 在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法