一、事务相关操作

1、bind绑定

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

//测试bind绑定
function testBind(){
       $("#btn2").bind("click",function(){
              alert("我是bind绑定单击事件")
       })
       $("#btn2").bind("click",function(){
              alert("我是bind绑定单击事件22222")
       })
}

2、unbind解绑

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

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

3、一次性绑定

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

//测试one
function testOne(){
      $("#btn3").one("click",function(){
             alert("我是one");
      });
}

4、页面载入事件

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

$(document).ready(function(){
       alert("我是jQuery");
})
$(document).ready(function(){
        alert("我是jQuery2222222");
})

二、完整代码

<!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>