资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

JQuery学习笔记-JQuery中的事件

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

创新互联建站作为成都网站建设公司,专注网站建设、网站设计,有关成都企业网站建设方案、改版、费用等问题,行业涉及卫生间隔断等多个领域,已为上千家企业服务,得到了客户的尊重与认可。

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





Untitled Document


	$(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);
		}
	});









Untitled Document

*{
	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
}




	$(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();
		});
		*/
		
	})



	
		什么是JQuery?
		
			JQuery是一个JavaScript库。
		
    

事件冒泡



	
		
		Untitled Document
		
			*{
				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;
			}
		
		
		
		
			$(function(){
				//事件的冒泡: 什么是事件的冒泡
				$("body").click(function(){
					alert("body click");
				});
				
				$("#content").click(function(){
					alert("div click");
				});
				
				$("span").click(function(){
					alert("span click");
					//如何解决事件的冒泡: 通过在响应函数的结尾返回 false, 可以阻止冒泡. 
					return false;
				});
			})
		
		
	
	
		
			外层div元素
			内层span元素
			外层div元素
		


WWW.HAO123.COM


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

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



	
		
		Untitled Document
		
		
		
			$(function(){
				$("body").mousemove(function(event){
					$("#msg").text("x:" + event.pageX + ", y:" + event.pageY);
				});
			})
		
	
	
		
		
		





























移除事件





Untitled Document


	$(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();
	});



	

你喜欢哪个城市?

北京 上海 深圳 深圳2

你喜欢哪本书?

西游记
  • 三国演义
  • 水浒传
  • 水浒传2
  •  gender: Male Female

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

    名称栏目:JQuery学习笔记-JQuery中的事件
    新闻来源:http://www.cdkjz.cn/article/ghodpc.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220