JQuery学习笔记-JQuery中的事件

来源：互联网发布：网文枪手知乎编辑：程序博客网时间：2024/05/22 18:20

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

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

<!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><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="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>

<!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;}#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}</style><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="text/javascript">$(function() {/*$(".head").click(function(){var flag = $(".content").is(":hidden");if(flag){//content是隐藏的$(".content").show();}else{$(".content").hide();}});*///绑定click事件/*$(".head").bind("click", function(){//使用is()方法来判断content是不是hiddenvar flag = $(".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><div id="panel"><h5 class="head">什么是JQuery？</h5><div class="content">JQuery是一个JavaScript库。</div></div>    </body></html>

事件冒泡

<!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="js/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){//事件的冒泡: 什么是事件的冒泡$("body").click(function(){alert("body click");});$("#content").click(function(){alert("div click");});$("span").click(function(){alert("span click");//如何解决事件的冒泡: 通过在响应函数的结尾返回 false, 可以阻止冒泡. return 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>

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

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

<!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><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("body").mousemove(function(event){$("#msg").text("x:" + event.pageX + ", y:" + event.pageY);});})</script></head><body><div id="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>

移除事件

<!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><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="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><ul id="city"><li id="bj" name="beijing">北京</li><li id="sh">上海</li><li id="sz">深圳</li><li id="sz2">深圳2</li></ul><p>你喜欢哪本书？</p><ul id="book"><li id="xyj" name="xyj">西游记</li><li>三国演义</li><li>水浒传</li><li>水浒传2</li></ul><br /> gender:<input type="radio" name="gender" value="male" />Male<input type="radio" name="gender" value="female" />Female<br /><input type="text" name="username" value="umgsai" /></body></html>

本文出自 “优赛工作室” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1565173

0 0