JQuery中的事件

最新推荐文章于 2023-12-15 14:32:24 发布

在海底听雨

最新推荐文章于 2023-12-15 14:32:24 发布

阅读量187

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/sunset_bo/article/details/125042645

版权

JQuery事件是对JavaScript事件的封装，常用事件分类

基础事件

鼠标事件

键盘事件

window事件

表单事件

复合事件

鼠标光标悬停

鼠标连续点击

鼠标事件

鼠标事件是当用户再文档上移动或单击鼠标时而产生的事件

click() 触发或将函数绑定到指定元素的click事件单击鼠标时执行

mouseover() 触发或将函数绑定到指定元素的mouseover事件鼠标指针移入时执行

mouseout() 触发或将函数绑定到指定元素的mouseout事件鼠标移出时执行

mouseleave() 触发或将函数绑定到指定元素的mouseleave事件鼠标离开时

mouseenter() 触发或将函数绑定到指定元素的mouseenter事件鼠标进入时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标事件</title>
<style>
div {
width: 200px;
height: 200px;
margin: 20px;
background: #ccc;
}
p {
width: 100px;
height: 100px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<div></div>
<div>
<p></p>
</div>
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script>
$(function(){
//mouseover 和 mouseout 在其子元素上的移入移出也会触发父级的事件
$('div:eq(1)').mouseover(function(){
console.log(1)
}).mouseout(function(){
console.log(2)
})
$('div:eq(1)').mouseenter(function(){
console.log(3)
}).mouseleave(function(){
console.log(4)
})
})
</script>
</body>
</html>

键盘事件

用户每次按下或释放键盘上的某个键时都会产生事件，常用键盘事件

keydown() 触发或将函数绑定到指定元素的keydown事件按下键盘时

keyup() 触发或将函数绑定到指定元素的keydoup事件释放键盘时

keypress() 触发或将函数绑定到指定元素的keypress事件产生可打印的字符

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不允许输入指定字符的输入框</title>
</head>
<body>
<input type="text">
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script>
窗口事件
// 不允许输入c 按键盘上的C 输入框不做录入
// $(function(){
// $('input').keypress(function(event){
// console.log(event.key)
// //var value = $(this).val()
// }).keydown(function(){
// // var value = $(this).val()
// // if(value=='c'){
// // $(this).val('')
// // }
// //阻止本身的默认行为 比如a标签点击的默认行为是跳转
// return false
// }).keyup(function(event){
// if(event.key=='c'){
// // $(this).val('')
// }
// })
// })
// 如果包含CNM 将CNM 替换为 ***
$(function() {
//keydown keypress 获取的val值是前一次的内容
//因为录入的行为还没完成
$('input').keyup(function() {
var value = $(this).val().toLowerCase()
if(value.indexOf('cnm')!=-1){
//replace 方法 替换字符串中指定的字符串 不会改变原始字符串 而是返回一个
新的字符串
value = value.replace('cnm','***')
$(this).val(value)
}
})
})
</script>
</body>
</html>

窗口事件（window）

语法：$(selector).resize();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>窗口事件</title>
<style>
div{
background-color: #ccc;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script>
$(function(){
$(window).resize(function(){
var windowW = window.innerWidth
$('div').css('width',windowW-200)
})
})
</script>
</body>
</html>