標籤：元素 圖片 document 網頁
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
JQuery學習筆記-JQuery中的事件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
