Web 前端学习 之jQuery 事件操作
程序员文章站
2024-02-29 21:43:22
...
Web 前端学习 之jQuery 事件操作
1.文档的加载
jq与js页面初始函数的区别
$(function(){})
等价于
$(document).ready(function(){})
window.onload = function(){}
标签显示需要的内容只的是如img标签里面的src等需要解析,所以原生js的页面加载函数会比jq慢一点
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.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")
});
// jquery的页面加载完成 之后
$(function () {
alert("jquery的页面加载完成 之后--2")
});
$(function () {
alert("jquery的页面加载完成 之后--3")
});
</script>
</head>
<body>
<button>我是按钮</button>
<iframe src="https://www.baidu.com"></iframe>
<img src="http://localhost:8080/1.jpg" alt=""/>
</body>
</html>
如上代码,可以看到执行的顺序如下
因为window.onload = function ()是赋值语句,所以前面两次都被覆盖了
2.事件绑定
<!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>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//*1.通常绑定事件的方式
//给元素绑定事件
//jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 })
//绑定事件可以链式操作
$(".head").click(function(){
$(".content").toggle();
}).mouseover(function(){
$(".content").toggle();
});
//*2.jQuery提供的绑定方式：bind(type,[data],fn)函数把元素和事件绑定起来
//type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法
//bind(事件字符串,回调函数),后来添加的元素不会绑定事件
//使用bind()绑定多个事件 type可以接受多个事件类型，使用空格分割多个事件
/* $(".head").bind("click mouseover",function(){
$(".content").toggle();
}); */
//3.one()只绑定一次,绑定的事件只会发生一次one(type,[data],fn)函数把元素和事件绑定起来
//type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法
/* $(".head").one("click mouseover",function(){
$(".content").toggle();
}); */
//4.live方法会为现在及以后添加的元素都绑定上相应的事件
/** $(".head").live("click",function(){
$(".content").toggle();
});
$("#panel").before("<h5 class='head'>什么是jQuery?</h5>");
*/
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
3.事件移除
unbind方法的应用
<script type="text/javascript">
$(function(){
//给li绑定两种事件：单击和鼠标移入
$("li").bind("click mouseenter" , function(){
alert(this.innerHTML);
});
//点击第一个button，将#bj上的mouseenter事件移除
//unbind()可以移除指定的事件，只需要传一个事件名作为参数
//unbind(type,[data|fn]])
//type事件类型 当传入type的时候会解除type事件
//如果没有传入type值，会移除所有事件
$("button:eq(0)").click(function(){
$("li").unbind("click mouseenter");
});
//点击第二个button，将#rl上的所有事件移除
$("button:eq(1)").click(function(){
});
});
</script>
4.事件冒泡
简单的说
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
对于上述代码,如果为div设置了点击事件,为div中的span也设置了点击事件
那么在点击span的时候,div的事件也会生效,这就是冒泡
为了避免这种情况,可以在span的事件中加入 return false
<script type="text/javascript">
$(function(){
//冒泡就是事件的向上传导，子元素的事件被触发，父元素的响应事件也会触发
//解决冒泡问题：return false;
//给span绑定一个单击响应函数
$("span").click(function(){
alert("我是span的单击响应函数");
return false;
});
//给id为content的div绑定一个单击响应函数
$("#content").click(function(){
alert("我是div的单击响应函数");
return false;
});
//给body绑定一个单击响应函数
$("body").click(function(){
//alert("我是body的单击响应函数");
});
//取消默认行为
/* $("a").click(function(){
return false;
}) */
})
</script>
5.事件对象
案例 图片跟随
实现目标如下
简单的分析后得知,需要下面几个事件
- 1.鼠标滑入
- 2.鼠标滑出
- 3.鼠标移动
代码实现如下,这里需要注意的点是在设置大图片坐标的时候需要稍微大一点,不然会影响鼠标的位置判定,导致闪屏的现象
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove",function (event) {
if (event.type == "mouseover") {
$("#showBig").show();
} else if (event.type == "mousemove") {
console.log(event);
$("#showBig").offset({
left: event.pageX + 10,
top: event.pageY + 10
});
} else if (event.type == "mouseout") {
$("#showBig").hide();
}
});
});
</script>
上一篇： Redis的主从复制实现原理
下一篇： node中的ajax提交小例子