参考: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');