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是不是hidden
var 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">
<h6 class="head">什么是JQuery？</h6>
<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 >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>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
