JQuery學(xué)習(xí)筆記-JQuery中的事件

window.onlaod 必須等網(wǎng)頁(yè)中所有內(nèi)容（包括圖片）加載完畢才能執(zhí)行，不能同時(shí)編寫多個(gè)

創(chuàng)新互聯(lián)建站作為成都網(wǎng)站建設(shè)公司，專注網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，有關(guān)成都企業(yè)網(wǎng)站建設(shè)方案、改版、費(fèi)用等問(wèn)題，行業(yè)涉及衛(wèi)生間隔斷等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

$(document).ready()網(wǎng)頁(yè)中所有DOM結(jié)構(gòu)繪制完畢后執(zhí)行，可能DOM元素關(guān)聯(lián)的東西并沒(méi)有加載完畢，能同時(shí)編寫多個(gè)，簡(jiǎn)寫$()

<!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(){//可以寫多個(gè)
			alert(2);
		});
		
		$(function(){//縮寫
			alert(4);
		});
		
		window.onload = function(){//相當(dāng)于給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()方法來(lái)判斷content是不是hidden
			var flag = $(".content").is(":hidden");
			if(flag){//content是隱藏的
				$(".content").show();
			}else{
				$(".content").hide();
			}
		});
		*/
		//鼠標(biāo)經(jīng)過(guò)事件
		/*
		$(".head").mouseover(function(){
			$(".content").show();
		}).mouseout(function(){
			$(".content").hide();
		});
		*/
		//合成事件hover 鼠標(biāo)移上去執(zhí)行第一個(gè)函數(shù)，移除執(zhí)行第二個(gè)函數(shù)
		/*
		$(".head").hover(function(){
			$(".content").show();
		},function(){
			$(".content").hide();
		});
		*/
		//合成事件 toggle 第一次點(diǎn)擊執(zhí)行第一個(gè)函數(shù)，第二次點(diǎn)擊執(zhí)行第二個(gè)函數(shù)。循環(huán)執(zhí)行。
		/*
		$(".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是一個(gè)JavaScript庫(kù)。
		</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");
					//如何解決事件的冒泡: 通過(guò)在響應(yīng)函數(shù)的結(jié)尾返回 false, 可以阻止冒泡. 
					return false;
				});
			})
		
		</script>
	</head>
	<body>
		<div id="content">
			外層div元素
			<span>內(nèi)層span元素</span>
			外層div元素
		</div>
		
		<div id="msg"></div>	
		
		<br><br>
		<a >WWW.HAO123.COM</a>	
	</body>
</html>

事件對(duì)象：當(dāng)觸發(fā)事件時(shí)，事件對(duì)象就被創(chuàng)建了。在程序中使用事件只需要為函數(shù)添加一個(gè)函數(shù)。該事件對(duì)象只有事件處理函數(shù)才能訪問(wèn)到。事件處理函數(shù)執(zhí)行完畢后，事件對(duì)象就被銷毀了。

event.pageX event.pageY 過(guò)去到光標(biāo)相對(duì)于頁(yè)面的x y坐標(biāo)

<!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節(jié)點(diǎn)，點(diǎn)擊一次后就沒(méi)有click事件響應(yīng)函數(shù) 
			if(this.id == "bj"){
				$("#bj").unbind("click");
			}
		});
		*/
		//只添加一次響應(yīng)事件
		$("li").one("click", function() {
			alert(this.firstChild.nodeValue);
		});
		//移除某個(gè)按鈕上所有的click事件 $("btn").unbind("click");
		//移除某個(gè)按鈕上所有的事件  $("btn").unbind();
	});
</script>
</head>
<body>
	<p>你喜歡哪個(gè)城市？</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>三國(guó)演義</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://down.51cto.com/data/2364960

新聞名稱：JQuery學(xué)習(xí)筆記-JQuery中的事件
URL鏈接：http://jinyejixie.com/article32/ghodpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、微信公眾號(hào)、網(wǎng)站維護(hù)、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站制作、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

JQuery學(xué)習(xí)筆記-JQuery中的事件