1.页面事件操作
jQuery:$( function () {} );
JavaScript:window.onload = function () {}
区别:
1.执行顺序:jQuery页面加载完成之后先执行
原生js页面加载完成之后后执行
2.触发条件:jQuery的页面加载完成之后是在浏览器的内核解析完页面的标签创建好DOM对象之 后就会马上执行。
原生js的页面加载完成之后,除了要等浏览器内核解析完标签创建好DOM对象,还 要等标签显示时需要的内容加载完成。
3.执行次数:“jQuery的页面加载完成之后”是把全部注册的function函数,依次全部执行。
“原生js的页面加载完成之后”,只会执行最后一次。
由下图可知1.jpg图片正在加载,而jQuery已经执行完毕
js则在图片加载后出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../jquery-1.7.js"></script>
<script type="text/javascript">
window.onload = function(){
alert("原生js的页面加载完成---1");
};
window.onload = function(){
alert("原生js的页面加载完成---2");
};
window.onload = function(){
alert("原生js的页面加载完成---3");
};
$(function () {
alert("jQuery的页面加载完成---1");
});
$(function () {
alert("jQuery的页面加载完成---2");
});
$(function () {
alert("jQuery的页面加载完成---3");
});
</script>
</head>
<body>
<button>按钮</button>
<iframe src="http://localhost:8080"></iframe>
<img src="http://localhost:8080/1.jpg" alt=""/>
</body>
</html>
2.事件处理方法
click() 它可以绑定单击事件,以及触发单击事件,仅第一个标签有效
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
格式:(以上一致)
$(" 标签名 ").事件名( function () {
});
bind() 给元素一次性绑定一个或多个事件
one() 与bind()事件一样,但每个事件只会相应一次
unbind() 跟bing()方法相反的事件
live() 绑定事件,可以用来绑定选择器匹配的所有元素的事件,多个标签均有效
格式:(以上一致)
$(" 标签名 ").事件名( "click,mouseover,mouseout ",function () {
});
3.事件的冒泡
事件的冒泡是指,父子元素同时监听同一个事件。当触发子元素的事件的同时,同一个事件也被传递到了父元素的事件里去响应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../jquery-1.7.js"></script>
<script type="text/javascript">
$(function () {
$("#btn01").click(function () {
alert("div标签");
});
$("span").click(function () {
alert("span标签");
});
});
</script>
</head>
<body>
<div id="btn01">
div标签
<br/>
<span>
span标签<br/>
</span>
div标签
</div>
</body>
</html>
如何阻止事件冒泡
在事件函数体内return false;可以阻止事件的冒泡传递
$("span").click(function () {
alert("span标签");
return false;
});