jQuery之事务相关操作

一、事务相关操作
二、完整代码

一、事务相关操作

1、bind绑定

元素对象.bind(“事件名”,fn) //动态的给指定的元素对象追加指定的事件及其监听的函数
注意：
js中的是一次添加，多次添加时覆盖的效果
jQuery是追加的效果，可以实现给一个事件添加不同的监听函数

//测试bind绑定
function testBind(){
       $("#btn2").bind("click",function(){
              alert("我是bind绑定单击事件")
       })
       $("#btn2").bind("click",function(){
              alert("我是bind绑定单击事件22222")
       })
}
1
2
3
4
5
6
7
8
9

2、unbind解绑

元素对象.unBind(“事件名”) //移除指定的元素对象的指定事件
注意：js方式添加的事件不能移除

//测试unbind解绑
function testUnfBind(){
       $("#btn2").unbind("click");
}
1
2
3
4

3、一次性绑定

元素对象.one(“事件名”,fn) //给指定的元素对象添加一次性事件，事件被触发执行一次即失效。
注意：可以给事件添加多个一次性函数，unBind可以用来解绑

//测试one
function testOne(){
      $("#btn3").one("click",function(){
             alert("我是one");
      });
}
1
2
3
4
5
6

4、页面载入事件

$(document).ready(fn);
页面载入成功后会调用传入的函数对象
注意：
此方式可以给页面载入动态的增加多个函数对象，不会被覆盖

$(document).ready(function(){
       alert("我是jQuery");
})
$(document).ready(function(){
        alert("我是jQuery2222222");
})
1
2
3
4
5
6

二、完整代码

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>jQuery操作文档结构title>
    <script src="js/jQuery-1.9.1.min.js" type="text/javascript" charset="utf-8">script>
    <script type="text/javascript">
        //js动态添加事件
            function testThing(){
                //获取元素对象
                var btn = document.getElementById("btn");
                //添加事件
                btn.onclick=function(){
                    alert("我是js方式");
                }
                btn.onclick=function(){
                    alert("我是js方式22222");
                }
            }
        //jQuery
        //测试bind绑定
            function testBind(){
                $("#btn2").bind("click",function(){
                    alert("我是bind绑定单击事件")
                })
                $("#btn2").bind("click",function(){
                    alert("我是bind绑定单击事件22222")
                })
            }
            
        //测试unbind解绑
            function testUnfBind(){
                $("#btn2").unbind("click");
            }
        //测试one
            function testOne(){
                $("#btn3").one("click",function(){
                    alert("我是one");
                });
            }
        //页面载入事件
            //js方式
            window.onload = function(){
                alert("我是js方式页面加载");
            }
            window.onload = function(){
                alert("我是js方式页面加载222222222");
            }
            //jQuery方式
            $(document).ready(function(){
                alert("我是jQuery");
            })
            $(document).ready(function(){
                alert("我是jQuery2222222");
            })
    script>
head>
<body>
    <h3>jQuery操作文档结构h3>
    <input type="button" name="" id="" value="测试js动态添加事件" onclick="testThing()"/>
    <input type="button" name="" id="" value="测试jQuery动态添加事件" onclick="testBind()"/>
    <input type="button" name="" id="" value="测试jQuery动态解绑事件" onclick="testUnfBind()"/>
    <input type="button" name="" id="" value="测试jQuery动态解绑事件-one" onclick="testOne()"/>
    <hr/>
    <input type="button" name="" id="btn" value="测试js" />
    <input type="button" name="btn2" id="btn2" value="测试jQuery-bind" />
    <input type="button" name="btn3" id="btn3" value="测试jQuery-one" />
body>
html>
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71

相关阅读:
下载 VMware Workstation Pro
聚赖氨酸卵清白蛋白纳米粒PLL-OVA|微囊藻毒素RR小鼠血清白蛋白纳米粒Microcystin(MC-RR)-MSA|齐岳
项目框架：登录跳转页面
解决VSCode中Debug和运行路径不一致的
智汇华云|基于TPM2.0的windows11虚拟机实践
优测云测试平台 | 有效的单元测试（下）
IDEA搭建SSM框架【配置类、新手向】
大华sdk使用问题
亚马逊鲲鹏系统优势有哪些
js ajax返回判断

原文地址：https://blog.csdn.net/qq_46106857/article/details/126773174