jquery深入浅出精华教程.doc

凌云 353630544Jquery深入浅出精华教程Jquery精华教程1目的：为jquey 菜鸟提供一份从简单到复杂的jquery教程11、用户无操作自动处理12、图层拖动33、自定义鼠标右键64、 鼠标滑过改变背景85、靠右悬浮，点击自动靠边126、禁止全选、复制、右键157、 轨迹动画15目的：为jquey 菜鸟提供一份从简单到复杂的jquery教程1、用户无操作自动处理默认10秒无用户操作发生，则自动跳转 用户无操作 $(function() util_global_nothing_init(); $(#btn).click(function() util_global_nothing_reset(); ); ) var util_global_nothing_fun=null;var util_global_nothing_time=10;/监听器function util_global_nothing_init()util_global_nothing();$(document).bind(click mouseover,function() util_global_nothing_reset(); );/重置函数function util_global_nothing_reset()util_global_nothing_time=10;if(util_global_nothing_fun!=null)window.clearInterval(util_global_nothing_fun); util_global_nothing();/倒计时函数function util_global_nothing()util_global_nothing_fun=window.setInterval(function() util_global_nothing_time-; if(parseInt(util_global_nothing_time)1) window.clearInterval(util_global_nothing_fun); else $(#mess).html(util_global_nothing_time); ,1000); 2、图层拖动提供控件化的函数，只需要调用就可拖动DIV $(document).ready(function() move(tab);)/拖动函数function move(id_)var id=$(#+id_);/定义可移动id.css(position:absolute);/鼠标按下样式$(document).mouseup(function()id.css(cursor,default);$(this).unbind(mousemove);)/按下移动id.mousedown(function(e)/e鼠标事件$(this).css(cursor,move);/改变鼠标指针的形状var offset = $(this).offset();/DIV在页面的位置var x = e.pageX - offset.left;/获得鼠标指针离DIV元素左边界的距离var y = e.pageY - offset.top;/获得鼠标指针离DIV元素上边界的距离$(document).bind(mousemove,function(ev)/绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件id.stop();/加上这个之后var _x = ev.pageX - x;/获得X轴方向移动的值var _y = ev.pageY - y;/获得Y轴方向移动的值id.animate(left:_x+px,top:_y+px,3););); 标题 发布时间 状态 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 3、自定义鼠标右键 鼠标右键操作 $(function() function document.oncontextmenu()event.returnValue=false; $(#tab td).mousedown(function(e) /e.which: 【1:鼠标左键】 【2：鼠标中间键】 【3：鼠标右键】 /e.clientX,e.clientY :鼠标点击位置坐标 var mouseX=e.clientX; var mouseY=e.clientY; var screenX=window.screen.availWidth;/浏览器宽度 var screenY=window.screen.availHeight;/浏览器高度 var screenX=document.body.clientWidth;/网页内容区宽度 var screenY=document.body.clientHeight;/网页内容区高度 if(mouseXscreenX-200) mouseX=mouseX-200; if(mouseYscreenY-100) mouseY=mouseY-100; if(e.which=3) $(#rightMenu).css(top:mouseY,left:mouseX).show(); ); /窗体上点击，隐藏鼠标右键 $(document).bind(click,function() $(#rightMenu).hide(); ) $(#add).bind(click,function() alert(add); ) $(#rightMenu li).hover( function() $(this).css(background:red); , function() $(this).css(background:white); ); ) 增加子节点 修改 删除 -功能菜单- 标题 发布时间 状态 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 4、 鼠标滑过改变背景 用户无操作 .ss background-color:#FF9600; $(function() $(#tab table td).hover( function() $(this).toggleClass(ss); ); ) 交通 公交站 出租车 地铁站 长途客运站 停车场 加油站 自行车租赁 机票代售 火车票代售 生活 超市 银行 ATM 学校 医院 药店 商场 公厕   美食 酒店 餐饮 酒吧 咖啡厅 茶苑   娱乐 电影院 洗浴中心 KTV 足疗 网吧 棋牌室 出游 景点 公园 广场 博物馆 游乐场   5、靠右悬浮，点击自动靠边 靠右悬浮 $(function() toggleMenu(rightMenu); ) /控件函数 function toggleMenu(id_) var id=$(#+id_); var hei=id.height(); id.css(z-index:9999,position:absolute,right:10px,top:50px); var ok=id.find(.ok); var tab=id.find(.tab); ok.toggle( function() tab.hide(100); ok.html(); ok.height(hei); , function() tab.show(); ok.html(); ok.height(hei); ); 标题 发布时间 状态 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 马航飞机已经找到 2014年3月25日18:04:49 有效 6、禁止全选、复制、右键为body添加属性 7、 轨迹动画 靠右悬浮 $(function() $(#btn).click(function() $(.block).animate(left: 800px, 2000); $(.block).animate(top: 400px, 2000); $(.block).animate(left: 10px, 2000); $(.block).animate(top: 100px, 2000););$(#btn2).click(function() $(