Day03jQuery事件绑定

事件绑定

`

1. 基于HTML实现的事件绑定

存在耦合

//HTML:    <input type="button" value="按钮" id="btn" onclick="test()"/>//Script:    function test(){            alert("按钮点击了");        }

2.基于编程的方式给标签添加事件

注意：页面从上到下加载，将写function方法的那个script标签放于body标签里下面，防止未加载就出来
1)js:

//HTML:<input type="button" value="按钮" id="btn"/>//script:var btn = document.getElementById('btn');btn.onclick = test;//对监听属性赋值一个functionfunction test(){    alert('按钮点击');}

2)jq:

function test(){            alert("按钮点击了");        } $('#btn').click(test);//对id为btn的按钮绑定单击事件//或者$('#btn').click(function(){            alert("按钮点击了");        } );//对id为btn的按钮绑定单击事件

3.在文档加载完毕之后执行代码

若写function的script标签放在上面，则写上window.onload

js:

window.onload = function(){//加载完页面之后执行        }//eg:window.onload = function(){            var btn = document.getElementById('btn');            btn.onclick = test;        }        function test(){            alert("按钮点击了");        } ;     

jq:
①jq完整版:

$(document).ready(function(){//文档加载完毕后运行}//eg:$(document).ready(function(){            $('#btn').click(function(){                alert("按钮点击了");            } );        })

②jq简化版:

$(function(){})eg:$(function(){            $('#btn').click(function(){                alert("按钮点击了");            } );        })

4）其他单击事件
①toggle(); //绑定单击事件，可以绑定多个function,每次触发一个函数，且函数依次循环出现
toggle(test1,test2,test3……)；

function test1(){            alert(1);        }        function test2(){            alert(2);        }        function test3(){            alert(3);        }        $(function(){            $('#btn').toggle(test1,test2,test3);//每次点击按钮，触发一个函数，且函数依次循环出现        })

②hover(fn1,fn2); //绑定两个function 相当于mouseover+mouseout(鼠标移入移出)
当鼠标移入时执行fn1，鼠标移出时执行fn2

③submit(); //提交form
form对象(jq).submit();将该表单提交