本文详细介绍了jQuery中的事件处理，包括加载DOM、绑定事件、合成事件、事件传播及坐标获取等内容，并探讨了如何使用unbind移除事件。在动画效果部分，讲解了show/hide、slideUp/slideDown、fadeIn/fadeOut及其toggle方法的运用。
事件处理
一，加载Dom两种方式
1，window.onload方式
2，jQuery方式
二，绑定事件两种方式
1，元素 . on
2，元素 . 事件名
三，合成事件/事件切换
1，hover()：鼠标悬停合成事件
2，toggle()：鼠标点击合成事件
四，事件传播
1，传播：小>中>大
2，阻止传播：事件后面加上return false
五，事件坐标
1，offsetX：当前元素左上角
2，clientX：窗口左上角
3，page：网页左上角
六，移出事件
元素.unbind("事件名")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* a标签属于行内元素，不能设置宽度和高度 */
a{
background-color: red;
/* 转成行内块状 或者块状 */
display: inline-block;
width:150px;
height: 40px;
/* 居中 */
text-align: center;
/* 行高 */
line-height: 40px;
/* 下划线 */
text-decoration: none;
}
/* 伪类选择器 */
a:hover{
background-color: yellow;
color: red;
}
</style>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* 一、事件 */
//1.1 加载DOM两种方式(区别)
// 在一个页面中出现多个window.onload，后者会覆盖前者
// window.onload = function(){
// alert('第一个加载函数');
// }
// window.onload = function(){
// alert('第二个函数');
// }
// window.addEventListener('load',function(){
// alert("周jl");
// });
// window.addEventListener('load',function(){
// alert("猴子");
// });
//jQuery加载函数
// $(document).ready(function(){}
// alert(111);
// );
// $(document).ready(function(){}
// alert(1111);
// );
// $(function(){
// alert(123)
// });
// 2.js的加载函数和jQuery的加载函数出现在一个页面，先后顺序
// 版本有关 jQuery3.0版本以上 js快
// window.onload = function(){
// alert("原生态js")
// }
// $(function(){
// alert('jQuery')
// });
$(function(){
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
//--元素.on/bind()
//--元素.事件名
// 1 直接调用click点击事件的方法即可
// $("#btn1").click(function(){
// alert("aa")
// });
// 2 可以通过标签对象调用on这个方法来绑定一个指定的事件
// $("#btn1").on('click',function(){
// alert("on实现点击")
// }
//可以通过调用bing方法进行绑定一个事件
// $("#btn1").bing('click',function(){
// alert("bing实现点击")
// }
//1.3 合成事件/事件切换
//--hover()悬停控制元素[div]的显示和隐藏
//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
$("#btn2").hover(function(){
console.log('111')
// 标签显示show 属于jQuery中的动画效果
// $("#oDiv").show();
$("#oDiv").css("display","block");
},function(){
console.log('222')
// 标签隐藏
// $("#oDiv").hide();
$("#oDiv").css("display","none");
});
// toggle事件
$("#btn3").click(function(){
console.log("我点击了");
// 在jQuery中所有的动画效果都是默认改变标签的宽度，高度，透明度
$("#oDiv2").toggle(3000);
})
//1.4 事件的传播(事件冒泡) 小p->中div->大body
$(function(){
// p 的点击事件
$("p").click(function(){
alert('p的点击事件')
return false;
});
//div 点击事件
$("#oDiv3").click(function(){
alert('oDiv3的点击事件')
return false;
});
// body 点击事件
$("body").click(function(){
alert('body的点击事件')
});
});
//1.5 事件event的坐标[了解即可 pageX,pageY]
$("body").click(function(){
// 获取鼠标所点击的位置
// 鼠标的坐标
console.log(event.pageX+" "+event.pageY);
// // 偏移量 考虑了外边距,边框,内填充
console.log(event.offsetX+" "+event.offsetY);
// // 如果没有滚动条，与pageX和pageY是一样的
// // client 可视区宽度和高度
console.log(event.clientX+" "+event.clientY)
});
//1.6 事件的移除
//--按钮只能点击一次[2]
//--按钮点击偶数次可行 奇数次不行
$(function(){
// unbind off
$("#btn4").click(function(){
alert("恭喜你中奖了~");
// 调用解绑事件
// $(this).off();
// $(this).disable();//禁用 无效
// disabled 是属性 不是样式 不能用css去设置
$(this).attr("disabled","disabled");
$(this).unbind();
});
var index = 1;
$("#btn5").click(function(){
// 点击（奇数次可以，偶数次不行）
// index为奇数的时候可以 为偶数的时候不行
if(index % 2 == 1){
console.log(index);
}
index++;
});
$("#btn6").one('click',function(){
alert("只有一次机会")
})
});
[2]
});
</script>
</head>
<body>
<button id="btn1" disabled="disabled">按钮</button>
<hr>
<!-- 伪类选择器的使用hover -->
<a href="">周杰伦</a>
<hr>
<button type="button" id="btn2">按钮</button>
<div id="oDiv" style="width:100px;height: 100px;background-color: red;display: none;"></div>
<hr >
<button type="button" id = "btn3">toggle</button>
<div id="oDiv2" style="width:100px;height: 100px;background-color: red;display: none;"></div>
<hr>
<h4>事件传播如何阻止</h4>
<div id = "oDiv3" style="width: 200px;height: 200px;background-color: red;">
<br><br><br><br>
<p style="width:100%;height: 20px;background-color: yellow;">我是p段落</p>
</div>
<hr>
<h4>解绑事件</h4>
<button id="btn4">点击抽象</button>
<button id="btn5">点击（奇数次可以，偶数次不行）</button>
<button id="btn6">one方法 一次性</button></button>
</body>
</html>
动画效果
1,动画隐藏----show
动画显示-----hide
两个方法融合成一个按钮使用-----Toggle
2,动画向上隐藏-----slideUp
动画向下显示-----sliderDown
两个方法融合成一个按钮使用------slideToggle
3,显示动画透明度-----fadeIn
动画变成透明-----fadeOut
两个方法用一个按钮实现-----fadeToggle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript">
</script>
<script type="text/javascript">
// 动画隐藏
function test1(){
$("div").eq(0).show(3000);
}
// 动画显示
function test2(){
$("div").eq(0).hide(3000);
}
// 两个方法用一个按钮使用
function test3(){
$("div").eq(0).toggle(6000);
}
// 动画往上隐藏
function test4(){
$("div").eq(1).slideUp();
}
// 动画往下显示
function test5(){
$("div").eq(1).slideDown();
}
// 两个方法用一个按钮实现
function test6(){
$("div").eq(1).slideToggle();
}
// 显示隐藏动画------更改透明度
function test7(){
$("div").eq(2).fadeIn(1000);
}
// 隐藏动画------更改透明度
function test8(){
$("div").eq(2).fadeOut(1000);
}
// ；两个方法用一个按钮实现
function test9(){
$("div").eq(2).fadeToggle(2000);
}
function test10(){
$("div").last().animate({
width:"+=600px",
height:"+=600px",
opacity:"0.1"
},10000)
}
$(function(){
$("div").last().animate({
left:"800px"
},10000)
})
</script>
</head>
<body>
<!-- 方法按钮 -->
<button onclick="test1()">基本动画show</button>
<button onclick="test2()">基本动画hide</button>
<button onclick="test3()">基本合成动画toggle</button>
<div style="width: 100px; height: 100px; background-color: red;">
</div>
<button onclick="test4()">slideUp</button>
<button onclick="test5()">slideDown</button>
<button onclick="test6()">slidetoggle</button>
<div style="width: 100px; height: 100px; background-color: pink;">
</div>
<button onclick="test7()">fadeIn</button>
<button onclick="test8()">fadeOut</button>
<button onclick="test9()">fadetoggle</button>
<div style="width: 100px; height: 100px; background-color: green;">
</div>
<hr >
<button onclick="test10()">animate</button>
<div style="width: 200px; height: 200px; background-color: blue;">
</div>
<div style="width: 200px; height: 200px; background-color: orange;position: :absolute;left: 0;top: 900px;">
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
