jquery之事件函数

来源：互联网发布：妇幼保健三级网络建设编辑：程序博客网时间：2024/06/05 05:02
jqurey的事件函数
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><script src="../../document/lib/jquery-3.2.1.min.js"></script><title>jquery event02</title><style></style></head><body><h2>jquery event</h2><div style="width:100%;background-color:#dcdcdc"><h3>事件函数</h3><p><input type="text" /> <span>focusout fire</span></p><p><input type="password" /> <span>focusout fire</span></p><span id="spanId01">记录窗口大小调整的次数</span><button>btn</button><script type="text/javascript">// 事件// blur([[data],fn])// $("p").blur( function () { alert("Hello World!"); } );// change([[data],fn])// $("input[type='text']").change( function() {//   // 这里可以写些验证代码// });// click([[data],fn])// $("p").click( function () { $(this).hide(); });// dblclick([[data],fn])// $("p").dblclick( function () { alert("Hello World!"); });// error([[data],fn]) 当元素遇到错误（没有正确载入）时，发生 error 事件。// 在服务器端记录JavaScript错误日志:// $(window).error(function(msg, url, line){// jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });// });// 隐藏JavaScript错误:// $(window).error(function(){// return true;// });// 给你IE的用户隐藏无效的图像:// $("img").error(function(){// $(this).hide();// });// focus([[data],fn])// $(document).ready(function(){// $("#login").focus();// });// 设置文本框不可用// $("input[type=text]").focus(function(){// this.blur();// });// focusin([data],fn) 当元素获得焦点时，触发 focusin 事件。// $("p").focusin(function() {// $(this).find("span").css('display','inline').fadeOut(1000);// });// focusout([data],fn)// $("p").focusout(function() {// $(this).find("span").css('display','inline').fadeOut(1000);// });// keydown([[data],fn])// $(window).keydown(function(event){// switch(event.keyCode) {    // ...    // 不同的按键可以做不同的事情    // 不同的浏览器的keycode不同    // 更多详细信息:     http://unixpapa.com/js/key.html    // 常用keyCode： 空格 32   Enter 13   ESC 27// }// });// keypress([[data],fn]) 与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件// keyup([[data],fn]) // 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。// 注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。// $("input").keyup(function(){// $("input").css("background-color","#D6D6FF");// });// mousedown([[data],fn]) 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。// $("button").mousedown(function(){// $("p").slideToggle();// });// mouseenter([[data],fn])// 当鼠标指针进入（穿过）元素时，改变元素的背景色：// $("p").mouseenter(function(){// $("p").css("background-color","yellow");// });// mouseleave([[data],fn])// 当鼠标指针离开元素时，改变元素的背景色：：// $("p").mouseleave(function(){//   $("p").css("background-color","#E9E9E4");// });// mousemove([[data],fn])// 获得鼠标指针在页面中的位置：// $(document).mousemove(function(e){// $("span").text(e.pageX + ", " + e.pageY);// });// mouseout([[data],fn])// 当鼠标从元素上移开时，改变元素的背景色：// $("p").mouseout(function(){//   $("p").css("background-color","red");// });// mouseover([[data],fn])// 当鼠标指针位于元素上方时时，改变元素的背景色：// $("p").mouseover(function(){//   $("p").css("background-color","yellow");// });// mouseup([[data],fn])// 当松开鼠标按钮时，隐藏或显示元素：// $("button").mouseup(function(){// $("p").slideToggle();// });// resize([[data],fn])// 让人每次改变页面窗口的大小时很郁闷的方法:// $(window).resize(function(){//   alert("Stop it!");// });// var x = 0;// $(window).resize(function() {// $('#spanId01').text(x+=1);// });// scroll([[data],fn])// 当用户滚动指定的元素时，会发生 scroll 事件。// 当页面滚动条变化时，执行的函数:// $(window).scroll( function() { alert("say hello") } );// 对元素滚动的次数进行计数：// var x = 0;// $("div").scroll(function() {// $("span").text(x+=1);// });// select([[data],fn]) 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。// 触发所有input元素的select事件:// $("input").select();// 当文本框中文本被选中时执行的函数:// $(":text").select( function () { alert("say hello") } );// submit([[data],fn])// 当提交表单时，会发生 submit 事件。该事件只适用于表单元素。// 提交本页的第一个表单:// $("form:first").submit();// 如果你要阻止表单提交:// $("form").submit( function () {//   return false;// } ); // unload([[data],fn])  jQuery 版本 1.8 中被废弃。// 在当用户离开页面时，会发生 unload 事件。// 具体来说，当发生以下情况时，会发出 unload 事件：// •点击某个离开页面的链接// •在地址栏中键入了新的 URL// •使用前进或后退按钮// •关闭浏览器// •重新加载页面// 不起作用// $(window).beforeunload(function () { $("body").append("<h1>Bye now</h1>"); } );// 不起作用// $(window).unload(function(){// $("body").append("<h1>Bye now</h1>");// });// 不起作用// $(window).unload(function(event){// var message = "I'm really going to miss you if you go.";// event.returnValue = message;// return message;// });// 不起作用// window.onunload = function(){// alert("unload is work");// }// 会起作用// window.onbeforeunload = function(){// return "onbeforeunload is work";// }</script></div></body></html>
阅读全文
0 0