a. keydown()键盘按下事件 b. keyup()键盘弱起事件 c. keypress()类似与keydown()但有区别 <body> <input type="text" value="text" /> <script> $('input').keydown(function(){ alert($(this).val()); }); /*$('input').keyup(function(){ alert($(this).val()); });*/ /*$('input').keypress(function(){ alert($(this).val()); });*/ </script> </body>
表单事件
focus()获得焦点事件 blur()失去焦点事件 change()表单值改变事件 select()表单元素被选中时的事件,只能用于Input[text]和textarea submit()表单提交事件 |
<body> <!-- <input type="text" name="" id="" value="11111" /> --> <input type="password" name="" id="" value="11111" /> <!-- <input type="file" name="" id="" /> --> <textarea name="" id="" cols="30" rows="10">1231231212213</textarea> <span style="display:none">asdasdfsdf</span> <script> /*$('input').focus(function(){ $('span').show(); }); $('input').blur(function(){ $('span').hide(); });*/
//当有focus事件的元素里面的值改变的时候,并且触发了blur事件,才算完成一次change事件 /*$('input[type=file]').change(function(){ $('span').show(); });*/ /*$('input').select(function(){ $('span').show(); });*/ /*$('textarea').select(function(){ $('span').show(); });*/ </script> </body>
浏览器事件
a. resize()浏览器窗口改变大小事件 b. scroll()浏览器滚动条移动时发生的事件 c. error() 1.8中废弃 |
<body style="height:3000px"> <script> /*$(window).resize(function(){ alert('浏览器窗口已改变!'); });*/ $(window).scroll(function(){ $('body').append('<div>滚动条位置发生偏移</div>'); }); </script> </body> 事件对象
event.pageX获取鼠标相对于文档的x轴坐标 event.pageY获取鼠标相对于文档的Y轴坐标 event.preventDefault()阻止浏览器默认行为 event.stopPropagation()阻止冒泡 event.which监听键盘输入和鼠标操作 其它略 |
<body style="height:3000px;width:3000px"> <input type="text" style="position:fixed;top:10px;left:10px" /> <script> $(document).click(function(e){ var x = e.pageX; var y = e.pageY; $('input').val(x+','+y); }); </script> </body> <body> <form action="http://www.zixue.it" id="form1"> <input type="text" value="11111" name="username" /> <input type="password" value="22222" name="password" /> <input type="submit" value="提交" /> </form> <script> $('#form1').submit(function(e){ alert('提交成功!!'); e.preventDefault(); }); </script> </body> 绑定和移除事件的方法
bind()绑定事件 unbind()移除事件 on()绑定事件 off()移除事件 one()执行一次事件,然后销毁该事件 delegate()虽然未被废弃,但官方推荐使用on()代替 undelegate()用off代替 |
<body style="height:3000px"> <p>这是P标签</p> <script> /*$('p').click(function(){ alert($(this).text()); });*/ /*$('p').bind('click',function(){ alert($(this).text()); }); $('p').mouseover(function(){ $(this).css('background','red'); }); $('p').unbind('click mouseover');*/ /*$('p').one('click',function(){ alert($(this).text()); });*/ /*$('body').delegate('p','click',function(){ $(this).append('<p>我是新增加的P标签<p>'); });*/ $('body').on('click','p',function(){ $(this).append('<p>我是新增加的P标签<p>'); }); </script> </body>
<body> <p>我是P标签</p> <script> //第一个开发人员,给p标签添加click事件,使它的背景颜色变成红色 /*$('p').click(function(){ $(this).css('background','red'); });*/ //第二个开发人员,给P标签添加click事件,使它的文本颜色变成蓝色 /*$('p').click(function(){ $(this).css('color','blue'); });*/ //第三个开发人员,不想让P标签在点击的时候添加红色的背景,只想让P标签里的文本颜色变成蓝色,那么他用unbind方法把P标签上的click事件给移除了 /*$('p').unbind('click');*/ $('p').bind('click.background',function(){ $(this).css('background','red'); }); $('p').bind('click.color',function(){ $(this).css('color','blue'); }); $('p').unbind('click.color'); </script> </body>
|