jQuery实例方法之on、one、off、trigger、hover、keydown

90 阅读 0 评论 60 点赞

我是靠谱客的博主飞快发卡，这篇文章主要介绍jQuery实例方法之on、one、off、trigger、hover、keydown，现在分享给大家，希望可以做个参考。

文章目录

- on：绑定事件
- - on通过对象的方式控制多个函数
- one
- off:解绑事件
- trigger
- hover方法：可以触发鼠标移入移出的效果
- keydown:键盘按下事件

on：绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知"心"</title>
<style>
.demo {
width: 100px;
height: 100px;
background-color: #ff0000;
}
.demo1 {
width: 100px;
height: 100px;
background-color: #ff00ff;
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo1"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
on
系统事件
*/
$('.demo').on('click', function () {
alert("xyz")
})
$('.demo1').on('mouseenter', function () {
alert("lm")
})
//点击ul弹窗：xyzul
$('ul').eq(0).on('click', function () {
alert('xyzul')
})
//现在你想点击ul里面的li，弹窗出：xyzli
$('ul').eq(1).on('click', 'li', () => {
alert('xyzli')
})
</script>
</html>

on通过对象的方式控制多个函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知"心"</title>
</head>
<body>
<div>xyz</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('div').on({
click: function () {
console.log('click')
},
mouseenter: function () {
console.log('mouseeenter')
},
mouseleave: function () {
console.log('mouseleave')
}
})
</script>
</html>

one

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知"心"</title>
</head>
<body>
<a href="https://www.baidu.com">只跳转一次淘宝页面，后面一直跳转百度页面</a>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
/*
one:只使用一次
*/
$('a').one('click', function () {
window.open('https://taobao.com');
return false;
})
</script>
</html>

off:解绑事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>温故而知"心"</title>
<style>
.demo {
width: 100px;
height: 100px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
function clickOne() {
console.log("clickOne")
}
function clickTwo() {
console.log("clickTwo")
}
$('.demo').on('click', clickOne)
$('.demo').on('click', clickTwo)
function enterOne() {
console.log("enterOne")
}
function enterTwo() {
console.log("enterTwo")
}
$('.demo').on('mouseenter', enterOne)
$('.demo').on('mouseenter', enterTwo)
//off: 解绑
//解绑div类名为demo的全部事件
//
$('.demo').off()
//解绑div类名为demo的全部click事件
//
$('.demo').off('click')
//解绑div类名为demo的click事件——clickOne
//第二个参数是指定解绑事件的函数
$('.demo').off('click', clickOne)
</script>
</html>

trigger

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>温故而知"心"</title>
<style>
.demo {
width: 100px;
height: 100px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//系统事件
$('.demo').on('click', function (e, a, b, c, d) {
console.log('click', a, b, c, d)
})
$('.demo').trigger('click', [11, 22, 4, 7])
//自定义事件
$('.demo').on('pageLoad', function (e, a, b, c, d) {
console.log('click', a, b, c, d)
})
$('.demo').trigger('pageLoad', [77, 21, 123, 456])
</script>
</html>

hover方法：可以触发鼠标移入移出的效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>温故而知"心"</title>
<style>
.demo {
width: 100px;
height: 100px;
background-color: #ff0000;
}
.demo1 {
width: 100px;
height: 100px;
background-color: #0000ff;
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo1"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//hover:可以触发鼠标移入移出的效果
$('.demo').on('mouseenter', () => {
console.log('enter')
}).on('mouseleave', () => {
console.log('leave')
})
$('.demo1').hover(() => {
console.log('enter1')
}, () => {
console.log('leave1')
})
</script>
</html>

keydown:键盘按下事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>温故而知"心"</title>
</head>
<body>
<input type="text" class="demo" />
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//keydown:键盘按下事件
$('.demo').keydown(function () {
console.log($(this).val())
})
</script>
</html>