JQuery学习笔记-JQuery中的事件

2025-02-13 技术教程

window.onlaod 必须等网页中所有内容（包括图片）加载完毕才能执行，不能同时编写多个

$(document).ready() 网页中所有DOM结构绘制完毕后执行，可能DOM元素关联的东西并没有加载完毕，能同时编写多个，简写$()

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>UntitledDocument</title><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">$(function(){//加载DOM的两种方式：JQuery的和window.onload()$(document).ready(function(){alert(1);});$(document).ready(function(){//可以写多个alert(2);});$(function(){//缩写alert(4);});window.onload=function(){//相当于给window.onload赋值alert(3);}});</script></head><body></body></html>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>UntitledDocument</title><styletype="text/css">*{margin:0;padding:0;}body{font-size:13px;line-height:130%;padding:60px;}#panel{width:300px;border:1pxsolid#0050D0;}.head{padding:5px;background:#96E555;cursor:pointer;}.content{padding:10px;text-indent:2em;border-top:1pxsolid#0050D0;display:block;display:none;}.highlight{background:#FF3300}</style><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">$(function(){/*$(".head").click(function(){varflag=$(".content").is(":hidden");if(flag){//content是隐藏的$(".content").show();}else{$(".content").hide();}});*///绑定click事件/*$(".head").bind("click",function(){//使用is()方法来判断content是不是hiddenvarflag=$(".content").is(":hidden");if(flag){//content是隐藏的$(".content").show();}else{$(".content").hide();}});*///鼠标经过事件/*$(".head").mouseover(function(){$(".content").show();}).mouseout(function(){$(".content").hide();});*///合成事件hover鼠标移上去执行第一个函数，移除执行第二个函数/*$(".head").hover(function(){$(".content").show();},function(){$(".content").hide();});*///合成事件toggle第一次点击执行第一个函数，第二次点击执行第二个函数。循环执行。/*$(".head").toggle(function(){$(".content").show();},function(){$(".content").hide();});*///双击事件/*$(".head").dblclick(function(){$(".content").show();});*/})</script></head><body><divid="panel"><h6class="head">什么是JQuery？</h6><divclass="content">JQuery是一个JavaScript库。</div></div></body></html>

事件冒泡

事件对象：当触发事件时，事件对象就被创建了。在程序中使用事件只需要为函数添加一个函数。该事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁了。

event.pageX event.pageY 过去到光标相对于页面的x y坐标

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>UntitledDocument</title><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">$(function(){$("body").mousemove(function(event){$("#msg").text("x:"+event.pageX+",y:"+event.pageY);});})</script></head><body><divid="msg"></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></body></html>

移除事件

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>UntitledDocument</title><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">$(function(){/*$("li").click(function(){alert(this.firstChild.nodeValue);//北京#bj节点，点击一次后就没有click事件响应函数if(this.id=="bj"){$("#bj").unbind("click");}});*///只添加一次响应事件$("li").one("click",function(){alert(this.firstChild.nodeValue);});//移除某个按钮上所有的click事件$("btn").unbind("click");//移除某个按钮上所有的事件$("btn").unbind();});</script></head><body><p>你喜欢哪个城市？</p><ulid="city"><liid="bj"name="beijing">北京</li><liid="sh">上海</li><liid="sz">深圳</li><liid="sz2">深圳2</li></ul><p>你喜欢哪本书？</p><ulid="book"><liid="xyj"name="xyj">西游记</li><li>三国演义</li><li>水浒传</li><li>水浒传2</li></ul><br/>gender:<inputtype="radio"name="gender"value="male"/>Male<inputtype="radio"name="gender"value="female"/>Female<br/><inputtype="text"name="username"value="umgsai"/></body></html>

附件：http://down.51cto.com/data/2364960