$(window).load(function(){ }) window.onload=function(){ }
toggle()方法
toggle()方法的语法结构:
toggle(fn1,fn2,...,fnN);
作用1.toggle()方法用于模拟鼠标连续单击事件
控制元素的隐藏与显示
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
});
作用2.切换元素的可见状态
$("#panel h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
});
阻止默认行为
网页中的元素有自己默认的行为,如
1.单击超链接后会跳转
2.单击“提交”按钮后表单会提交
对表单提交前验证
$(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); if(username == ""){ $("#msg").html("<p>文本框的值不能为空.</p>"); event.preventDefault(); } }); }) <form action=""> username:<input type="text" id="username" /> <input type="submit" value="提交" id="sub" /> </form> <div id="msg"></div>
如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false
event.preventDefault(); //阻止默认行为
event.stopPropagation(); //停止事件冒泡
jQuery不支持事件捕获
event.target 获取到触发事件的元素
event.target.nodeName 元素名称 P H3 SPAN等等
trigger()方法
trigger()方法触发事件后,会执行浏览器默认操作,例如:
$("input").trigger("focus");
不仅会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点(浏览器的默认操作)
解决办法:triggerHandler()方法
$("input").triggerHandler("focus");
会触发<input>元素上绑定的特定事件,同时取消浏览器对此事件的默认操作。即文本框只触发绑定的focus事件,不会得到焦点。
绑定多个事件类型
$(function(){
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
});
});
当光标滑入<div>元素时,该元素的class切换为"over";当光标滑出<div>元素时,class切换为先前的值。这段代码等同于:
$(function(){
$("div").bind("mouseover",function(){
$(this).toggleClass("over");
}).bind("mouseout",function(){
$(this).toggleClass("over");
});
});