在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
事件页面载入1. $(document).ready(function(){ // 在这里写你的代码... }); // 下面是简写 $(function($) { // 你可以在这里继续使用$作为别名... }); 2.事件处理 // 给p标签添加点击事件监听 $("p").on("click", function(){ alert( $(this).text() ); }); // 第二种写法 等效于上面 $("p").click(function(){ alert( $(this).text() ); }); 3. // 移除p标签绑定的所有事件监听 $("p").off() // 移除p标签绑定的click事件监听 $("p").off( "click") 4. // 移除p标签绑定的所有事件监听 $("p").bind("click", function(){ alert( $(this).text() ); }); // 同时绑定多个事件类型 $('#foo').bind('mouseenter mouseleave', function() { alert(); }); 5. // 把所有段落的所有事件取消绑定 $("p").unbind() // 将段落的click事件取消绑定 $("p").unbind( "click" ) 6. // 当所有段落被第一次点击的时候,显示所有其文本 $("p").one("click", function(){ alert( $(this).text() ); }); 事件委派1. <div style="background-color:red"> <p>这是一个段落。</p> <button>请点击这里</button> </div> // 当点击button时,隐藏或显示 p 元素 $("div").delegate("button", "click", function () { $("p").slideToggle(); }); 2. // 从p元素删除由 delegate() 方法添加的所有事件处理器 $("p").undelegate(); // 从p元素删除由 delegate() 方法添加的所有click事件处理器 $("p").undelegate( "click" ) 事件切换1.
// 鼠标悬停的表格加上特定的类 $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); 事件1. // 鼠标悬停的表格加上特定的类 $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); 2. // 触发被选元素的 change 事件 $(selector).change(); 3. // 触发页面内所有段落的点击事件 $("p").click(); 4. // 给页面上每个段落的双击事件绑上 "Hello World!" 警告框 $("p").dblclick( function () { alert("Hello World!"); }); 5. // 在服务器端记录JavaScript错误日志: $(window).error(function(msg, url, line){ jQuery.post("js_error_log.php", { msg: msg, url: url, line: line }); }); 6. // 当页面加载后将 id 为 'login' 的元素设置焦点: $(document).ready(function(){ $("#login").focus(); }); 7. <p><input type="text" /> <span>focusout fire</span></p> <p><input type="password" /> <span>focusout fire</span></p> // 获得焦点后会触发动画 $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); }); 8. // 获得焦点后会触发动画 $("p").focusout(function() { $(this).find("span").css('display','inline').fadeOut(1000); }); 9. // 在页面内对键盘按键做出回应,可以使用如下代码 $(window).keydown(function(event){ switch(event.keyCode) { // ... // 不同的按键可以做不同的事情 // 不同的浏览器的keycode不同 // 更多详细信息: http://unixpapa.com/js/key.html // ... } }); 10. // 计算在输入域中的按键次数 $("input").keydown(function(){ $("span").text(i+=1); }); 11. // 当按下按键时,改变文本域的颜色 $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); }); 12. // 当按下鼠标按钮时,隐藏或显示元素 $("button").mousedown(function(){ $("p").slideToggle(); }); 13. // 当鼠标指针进入(穿过)元素时,改变元素的背景色 $("p").mouseenter(function(){ $("p").css("background-color","yellow"); }); 14. // 当鼠标指针离开元素时,改变元素的背景色$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");});// 当鼠标指针离开元素时,改变元素的背景色 $("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); }); 15. 事件坐标
// 获得鼠标指针在页面中的位置 $(document).mousemove(function(e){ $("span").text(e.pageX + ", " + e.pageY); }); 16. // 当鼠标从元素上移开时,改变元素的背景色: $("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); }); 17. // 当鼠标指针位于元素上方时时,改变元素的背景色 $("p").mouseover(function(){ $("p").css("background-color","yellow"); }); 18. // 当松开鼠标按钮时,隐藏或显示元素 $("button").mouseup(function(){ $("p").slideToggle(); }); 19. // 改变页面窗口的大小时弹出警告窗 $(window).resize(function(){ alert("Stop it!"); }); 20. // 当页面滚动条变化时,执行的函数: $(window).scroll( function() { alert("Stop it!"); }); 21. // 触发所有input元素的select事件: $("input").select(); 22. // 提交本页的第一个表单: $("form:first").submit(); // 阻止表单提交: $("form").submit( function () { return false; } );
点击某个离开页面的链接 在地址栏中键入了新的 URL 使用前进或后退按钮 关闭浏览器 重新加载页面 // 页面卸载的时候弹出一个警告框: $(window).unload( function () { alert("Bye now!"); } ); 总结本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注极客世界的更多内容! |
请发表评论