首先来学习两个函数
- $.extend(desc,src1,src2,src3.....)
这是最简单就是后面的对象及属性覆盖合并到desc中并返回 - $.fn.extend(src)
这是扩展jQuery实例对象的方法，后续介绍 - $.extend()
这是扩展jQuery全局方法，后续介绍 - $.extend(boolean,dest,src1,src2,src3....)
这个和第一个类似，boolean为true时，深拷贝的意思就是属性为对象的话，里面属性会覆盖合并，
而boolean为false时，属性为对象的话，后面的该属性只是会覆盖，而不会考虑内层的属性
详细链接：http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html
正式开始
1、$.fn.extend jQuery对象函数
写一个拖拽
$(function () {
$.fn.extend({
drag:function() {
//this jQuery对象
var disX = 0;
var disY = 0;
var self = this;
this.mousedown(function (e) {
disX = e.pageX - $(this).offset().left;
disY = e.pageY - $(this).offset().top;
$(document).mousemove(function (e) {
self.css('left', e.pageX - disX);
self.css('top', e.pageY - disY);
});
$(document).mouseup(function () {
$(document).off('mousemove');
});
return false;
});
}
})
})
//$("div").drag 调用
2、$.extend jQuery工具函数
$.extend({
leftTrim: function (str) {
return str.replace(/^\s+/g, '');
}
})
//$.leftTrim(str) 调用
3、基本结构
(function($){
$.fn.scrollUnique=function(){
return this.each(fucntion(){
//相关处理
})
}
}(jQuery)```
写一个关于禁止外侧滚动的插件
(function ($) {
$.fn.scrollUnique = function () {
var eventType = 'mousewheel';
if (document.mozHidden !== undefined) {
eventType = 'DOMMouseScroll';
}
return this.each(function () {
$(this).on(eventType, function (event) {
var scrollTop = this.scrollTop;
var scrollHeight = this.scrollHeight;
var height = this.clientHeight;
var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);
if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE浏览器下滚动会跨越边界直接影响父级滚动，因此，临界时候手动边界滚动定位
this.scrollTop = delta > 0 ? 0 : scrollHeight; // 向上滚 || 向下滚
event.preventDefault();
}
});
});
}}(jQuery))
