文章目录
- on:绑定事件
- on通过对象的方式控制多个函数
- one
- off:解绑事件
- trigger
- hover方法:可以触发鼠标移入移出的效果
- keydown:键盘按下事件
on:绑定事件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57<!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通过对象的方式控制多个函数
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<!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
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<!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:解绑事件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48<!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
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32<!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方法:可以触发鼠标移入移出的效果
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39<!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:键盘按下事件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<!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>
最后
以上就是飞快发卡最近收集整理的关于jQuery实例方法之on、one、off、trigger、hover、keydown的全部内容,更多相关jQuery实例方法之on、one、off、trigger、hover、keydown内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复