jQuery操作dom事件
参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动
//1.绑定事件bind()
bind('event name', eventData, function(event) {
/* Act on the event */
});
//event name事件名称：可接收事件列表
blur,focus,load,resize,scroll,unload,click,dblclick,mounsedown,mouseup
mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown
keypress,keyup,error
//eventData数据对象：
//function回调函数：
//如果绑定多个事件中间用空格隔开
//映射方式绑定不同事件
$(".text").bind({
focus:function(event) {
},
change:function(){
}
});
//传参数
$(".text").bind('focus', {msg:"test"}, function(event) {
alert($(this).val());
});
//取消绑定unbind()
$("p").unbind();//取消p的所有事件
$("p").unbind( "click" );//取消p的click事件
var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo
//2.鼠标悬停事件：hover()
$(".clsTitle").hover(function() {
$(".clsContent").show();
}, function() {
$(".clsContent").hide();
});
//3.轮播事件:toggle(fn1,fn2,fn3....);该函数功能是按fn函数顺序依次执行。执行完最后一个然后再重复对这些函数轮番调用
//图片轮播：单击图片时轮播图片
//单击时变成a.jpg，再单击变成b.jpg，再次单击又变成a.jpg
$("img").toggle(function() {
$("img").attr('src', 'a.jpg');
}, function() {
$("img").attr('src', 'b.jpg');
});
//4.一次性事件：one(type,[data],fn),该事件只执行一次
//页面：<input id="btn" type="button" value="点击查看联系方式"/>
$("#btn").one('click', function(event) {
this.value="111111111111";
});
//5.自定义执行指定事件：trigger(),在页面dom元素加载完毕后自动执行某类事件，可以是自定义事件
//页面dom加载完成后，使input选中
$("input").trigger('select');
//页面dom加载完成后，给input赋默认值
$("input").bind('myEvent', function(event) {
$(this).val("默认值");
});
$("input").trigger('myEvent');
