【16.0】前端基础jQuery之jQuery事件
【一】jQuery绑定事件的两种方式
【1】使用.on()方法：
- 使用
.on()方法可以绑定一个或多个事件处理程序到选择器匹配的元素上。该方法可以为动态添加的元素提供事件绑定。
语法：
-
$(selector).on(eventName, eventHandler);
示例：
$('#myButton').on('click', function() {
// 处理点击事件的代码
});
-
上述示例将为具有
id为myButton的元素绑定点击事件，当按钮被点击时，执行相应的处理函数。 -
可以使用
.on()方法绑定多个事件处理程序，或者为多个事件同时绑定同一个处理程序。例如：
$('#myElement').on({
click: function() {
// 处理点击事件的代码
},
mouseenter: function() {
// 处理鼠标进入事件的代码
}
});
【2】使用快捷事件方法：
jQuery 提供了一系列的快捷事件方法，用于常见的事件类型，例如点击、鼠标移入、键盘按下等。这些方法具有对应事件类型的简洁命名，可以更方便地进行事件绑定。
语法：
$(selector).eventName(eventHandler);
示例：
$('#myButton').click(function() {
// 处理点击事件的代码
});
-
上述示例使用
.click()方法为具有id为myButton的元素绑定点击事件，当按钮被点击时，执行相应的处理函数。 -
快捷事件方法的命名通常与对应的事件类型相同
- 例如：
.click()、.mouseenter()、.keydown()等。
- 例如：
【3】示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
</head>
<body>
<button id="b1">吻我</button>
<button id="b2">抱我</button>
<script>
// 绑定事件的两种方式
// （1）第一种
// jQuery
$('#b1').click(function () {
alert('别说话 吻我!')
})
// JavaScript
// document.getElementById('b2').onclick(function () {})
// （2）第二种 - 功能更加强大：支持事件委托
$("#b2").on('click', function () {
alert('抱紧我!')
})
</script>
</body>
</html>
【二】克隆事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
<style>
#b1 {
height: 100px;
width: 100px;
background-color: red;
border: 1px solid orange;
}
</style>
</head>
<body>
<button id="b1">
倚天屠龙剑,你敢要我就敢送!
</button>
<script>
// 绑定点击事件
$("#b1").on("click", function () {
// console.log(this) // this 指代的永远是当前被操作的对象
$(this).clone(true).insertAfter($('body')) // clone 默认情况下只克隆 html 和 css 不克隆事件本身
// clone 加参数 即可克隆事件
})
</script>
</body>
</html>
【三】自定义模态框
本质就是给标签添加或移除 hidden 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
<style>
.cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(128, 128, 128, 0.4);
z-index: 99;
}
.modal {
position: fixed;
height: 400px;
width: 400px;
background-color: white;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 100;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div>我是最下面的</div>
<button id="d1">点我登陆</button>
<div class="cover hide"></div>
<div class="modal hide">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<input type="button" value="确认">
<input type="button" value="取消" id="d2">
</div>
<script>
let $coverEle = $(".cover");
let $modalEle = $(".modal");
// 去除hide属性
$("#d1").click(function () {
// 将两个div标签的hide属性移除
$coverEle.removeClass("hide");
$modalEle.removeClass("hide");
})
// 绑定 hide属性
$('#d2').on('click', function () {
$coverEle.addClass("hide");
$modalEle.addClass("hide");
})
</script>
</body>
</html>
【四】左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
<style>
.left {
float: left;
background-color: darkgray;
width: 20%;
height: 100%;
position: fixed;
}
.title {
font-size: 24px;
color: white;
text-align: center;
}
.items {
border: 1px solid blue;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left">
<dic class="menu">
<div class="title">菜单一
<div class="items">1111</div>
<div class="items">2222</div>
<div class="items">3333</div>
</div>
<div class="title">菜单二
<div class="items">1111</div>
<div class="items">2222</div>
<div class="items">3333</div>
</div>
<div class="title">菜单三
<div class="items">1111</div>
<div class="items">2222</div>
<div class="items">3333</div>
</div>
<div class="title">菜单四
<div class="items">1111</div>
<div class="items">2222</div>
<div class="items">3333</div>
</div>
</dic>
</div>
<script>
$('.title').click(function () {
// 先给所有的items 加 hidden
$('.items').addClass('hide');
// 再将被点击的 items 标签内部的hidden移除
$(this).children().removeClass('hide');
})
</script>
</body>
</html>
【五】返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
<style>
.hide {
display: none;
}
#d1 {
position : fixed;
background-color: blue;
right: 20px;
bottom:20px;
height:50px;
width:50px;
}
</style>
</head>
<body>
<a href="" id="d1"></a>
<div style="height: 500px;background-color: red;"></div>
<div style="height: 500px;background-color: green;"></div>
<div style="height: 500px;background-color: orange;"></div>
<a href="#d1" class="hide">回到顶部</a>
<script>
$(window).scroll(function(){
if ($(window).scrollTop() > 100){
$('#d1').removeClass('hide');
}else{
$('#d1').addClass('hide');
}
})
</script>
</body>
</html>
【六】自定义登录校验
- 在获取用户名和密码的时候，如果用户没有输入用户名和密码，自动提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
</head>
<body>
<p>username:
<input type="text" id="username">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="password">
<span style="color: red"></span>
</p>
<button id="button">提交</button>
<script>
let $userName = $("#username");
let $password = $("#password");
$("#button").click(function () {
// 获取用户名和密码。进行校验
let username = $userName.val();
let password = $password.val();
if (!username) {
$userName.next().text("用户名不能为空!")
}
if (!password) {
$password.next().text("密码不能为空!")
}
});
$('input').focus(function () {
$(this).next().text('')
})
</script>
</body>
</html>
【七】input框实时监控
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
</head>
<body>
<input type="text" id="d1">
<script>
$('#d1').on('input', function () {
console.log(this.value);
})
</script>
</body>
</html>
【八】hover事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
</head>
<body>
<p id="d1">花前月下酒香封</p>
<script>
$("#d1").hover( function(){ // 鼠标悬浮
alert(" enter")
},function(){
alert(" leave") // 鼠标离开
})
</script>
</body>
</html>
【九】键盘按键监控事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
</head>
<body>
<script>
$(window).keydown(function(event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert("shift key 触发")
}
})
</script>
</body>
</html>