$().事件类型(事件处理函数fn);
设置事件blur(fn)
当输入域(input)失去焦点时触发事件:focus(fn)
当输入框获得焦点时触发事件change(fn)
当输入域(input)发生变化时触发事件:click(fn)
click可以理解为一次简单的触发,只执行一次,找不到以后就不再执行;onclick则是给这个id注册一种行为,可以重复触发dblclick(fn)
当双击按钮时触发事件mouseover(fn)
鼠标移入触发mouseout(fn)
鼠标移出触发submit(fn)
事件将会在表单提交时触发$().事件类型();
触发事件执行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <script> $(function () { /* * 1.$().事件类型(事件处理函数fn); 设置事件 * blur(fn) 当输入域(input)失去焦点时触发事件: * focus(fn) 当输入框获得焦点时触发事件 * change(fn) 当输入域(input)发生变化时触发事件: * click(fn) click可以理解为一次简单的触发,只执行一次,找不到以后就不再执行;onclick则是给这个id注册一种行为,可以重复触发 * dblclick(fn) 当双击按钮时触发事件 * mouseover(fn) 鼠标移入触发 * mouseout(fn) 鼠标移出触发 * submit(fn) 事件将会在表单提交时触发 * * 2.$().事件类型(); 触发事件执行 * */ //页面加载完毕为div设置事件 $('div').mouseover(function () { //因为this代码dom对象,所以下面的$('div').css('background','lightgreen'); //可以换成(this),如果有多个dom对象,则程序会自动解析this为不同的dom对象 $(this).css('background','lightgreen'); }); $('div').mouseout(function () { $('div').css('background','lightblue'); //因为我们有页面内置样式,所以这儿可以写成这样$('div').css('background',''); }); //为同一个div设置两个mouseover事件 //这儿只是为了演示用,因为下面的代码完全放在同一个mouseover中使用 $('div').mouseover(function () { $('div').css('font-size','30px'); }); }); /* * 上面是设置事件执行 * 下面是触发事件执行 * */ function f1() { //解发对象事件执行 $('div').mouseover(); } </script> <style> div { width:300px; height:200px; background:lightblue;} </style> </head> <body> <h2>简单事件操作</h2> <div>这是一小段内容</div> <input type="button" value="触发" onclick="f1()"> </body> </html> |
创始人微信
路漫漫其修远兮 吾将上下而求索添加创始人微信,一起交流心得
时间:2019年04月10日
时间:2017年01月09日
时间:2017年06月12日
时间:2017年04月09日
时间:2017年01月13日
评论