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元素
