Day03jQuery事件绑定

来源:互联网 发布:linux入门教程下载 编辑:程序博客网 时间:2024/06/16 02:12

事件绑定

`

  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();将该表单提交