文章目录
- 前言
- 一、pandas是什么？
- 二、使用步骤
- 1.引入库
- 2.读入数据
- 总结
本章目标
- 使用常用简单事件制作网页特效
- 使用鼠标事件制作主导航特效
- 使用hover()方法制作下拉菜单特效
- 使用鼠标事件及动画制作页面特效
一.Jquery事件概述
二.基础事件
鼠标事件
演示案例：
鼠标停留在某个标签上时改变背景颜色，如下图。
拓展：
innerHTML是JavaScript中一个常用的属性，它可以用来获取或设置指定元素的HTML内容。
当我们使用innerHTML来获取元素的HTML内容时，它会返回该元素包含的所有HTML标签和文本。而在Jquery中通常使用如下代码来替代innerHTML在JS中实现的功能
#JS中innerHTML的应用
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<h2>Hello World!</h2>";
#innerHTML在JQ中的语法
var myDiv = document.getElementById("myDiv");
myDiv.html() = "<h2>Hello World!</h2>";上述代码会在页面上找到id为myDiv的元素，并使用innerHTML属性将其内容替换为
<h2>Hello World!</h2>。结果会在页面上显示一个标题为Hello World的h2元素。
键盘事件
演示案例：
在密码框中按下键盘显示出"按下"，释放按键显示“弹起”；
<script src="jq/jquery-3.7.1.js"></script>
<script type="text/javascript">
$(function(){
//针对密码框使用键盘函数进行相应操作
$("#password").keydown(function(e){
//使用append函数追加内容
$("#events").append("按下");
}).keyup(function(){
$("#events").append("弹起");
}).keypress(function(){
$("enents").append("按到了有字符的按钮");
});
});
$(document).keydown(function(event){
//使用keycode属性输出键盘输入字母的键盘码,esc键盘码=27
if(event.keyCode == "27"){
//confirm函数用于显示一个确认/取消的对话框并根据结果返回布尔值true/false
var flag = window.confirm("确认要退出了嘛？")
if(flag == true){
window.close();
}.else{
window.alert("没事儿别乱点");
}
}
});
</script>
绑定事件
HTML代码
<button id="myButton">Click Me</button>JS代码
$(document).ready(function(){
$('#myButton').bind('click', function(){
alert('Button clicked!');
});
});上面的代码中，我们使用bind函数给id为myButton的按钮绑定了一个点击事件处理函数。当按钮被点击时，会弹出一个提示框显示"Button clicked!"。
三.复合事件
hover()方法
演示案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background-color: blue;
color: white;
text-align: center;
line-height: 200px;
cursor: pointer;
}
</style>
<script src="jq/jquery-3.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#box").hover(
//鼠标移入时触发函数
function() {
$(this).css("background-color", "red");
//使用text函数对JQ对象“"#box”传入参数Hovering参
$(this).text("Hovering");
},
//鼠标移除时触发函数
function() {
$(this).css("background-color", "blue");
$(this).text("Hover over me");
}
);
});
</script>
<body>
<div id="box">Hover over me</div>
</body>
</html>以上代码中，当鼠标悬停在
#box元素上时，会将它的背景颜色改为红色，并将文本内容改为"Hovering"。当鼠标离开时，背景颜色和文本内容都会恢复为初始值。
toggle()方法
演示案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="toggleButton">切换元素</button>
<div id="toggleDiv" style="display: none;">
这是要切换的元素
</div>
<script src="jq/jquery-3.7.1.js"></script>
<script type="text/javascript">
$(function(){
//toggle函数模拟鼠标连续点击用于切换背景颜色
$("#toggleButton").toggle(
function(){$("body").css("background-color","red")},
function(){$("body").css("background-color","yellow")},
function(){$("body").css("background-color","green")}
);
});
</script>
</body>
</html>toggle函数模拟click函数 即鼠标连续点击用于切换背景颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="toggleButton">切换元素</button>
<div id="toggleDiv" style="display: none;">
这是要切换的元素
</div>
<script src="jq/jquery-3.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#toggleButton").click(function(){
$("#toggleDiv").toggle();
});
});
</script>
</body>
</html>在这个示例中，当按钮被点击时，toggle()函数会被调用，然后切换id为toggleDiv的元素的可见状态。初始状态下，toggleDiv是隐藏的，点击按钮后，它会显示出来；再次点击按钮，它又会隐藏起来。
四.Jquery动画效果
- 控制元素显示与隐藏
- 改变元素透明度
- 改变元素高度
淡入或淡出
//2s淡出
$("#element").fadeIn(2000);
$("#element").fadeOut(4000);
滑动效果
$("#element").slideUp();
$("#element").slideDown();改变尺寸
$("#element").animate({
width: "300px",
height: "200px"
});
旋转效果
$("#element").animate({
rotate: "180deg"
});
跳动效果
$("#element").animate({
top: "+=50px"
}, 500).animate({
top: "-=50px"
}, 500);
链式动画效果
$("#element").hide().slideDown().delay(2000).fadeOut();
自定义动画效果
$.fn.myAnimation = function() {
$(this).animate({
opacity: 0.5,
left: "+=50px"
}, 1000);
};
$("#element").myAnimation();
总结
