jquery扩展插件

来源：互联网发布：linux 网络性能测试编辑：程序博客网时间：2024/06/05 03:08
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jquery扩展插件</title><script type="text/javascript" src="jquery-3.2.1.min.js"></script><style type="text/css">div{width:100px;height: 100px;background-color: red;position: absolute;}</style></head><body><!-- 扩展插件就是本身库没有的方法，需要自己写或者调用其他的方法 --><div id="id1"></div><script type="text/javascript">//该方法是扩展工具方法下的插件形式。访问形式为$.leftTrim(str)$.extend({leftTrim:function(str){//去除字符串的左空格return str.replace(/^\s+/,'');}})// alert("("+$.leftTrim("  hahha  ")+")");$.fn.extend({drag:function(){//该函数里的this指向调用drag函数的那个对象var disX=0;var disY=0;var This=this;this.mousedown(function(ev){console.log(ev);// 鼠标点击时产生的对象ev//鼠标离div的左边的距离disX=ev.pageX-$(this).offset().left;//鼠标离div的上边的距离disY=ev.pageY-$(this).offset().top;//div产生鼠标移动事件,只是没有相应的事件操作函数，由于冒泡会传给上级元素，所以会触发文档的鼠标移动事件$(document).mousemove(function(ev){This.css('left',ev.pageX-disX);This.css('top',ev.pageY-disY);});$(document).mouseup(function(){//删除事件$(this).off();});return false;})}});//jquery对象中没有drag方法。我们想通过插件形式实现拖拽的方法$("#id1").drag();</script></body></html>
阅读全文
0 0