作用:
扩展jQuery插件和方法的作用是非常强大的,他可以节省大量的开发时间
方法一:
类级别的封装方法:就是扩展jQuery类本身的方法,为它增加新的方法。(不常用,不方便绑定元素)
1.定义方法:
第一种:
$.函数名=function(自定义参数){ 插件的代码 }
第二种:
$.extend({
函数名:function(自定义参数){
插件的代码
}
})
2.例如:
//第一种在$类中添加方法
$.ran = function(min,max){
return parseInt(Math.random()*(max-min+1)+min);
}
//调用:alert($.ran(1,100))
//第二种 可以定义多个函数
$.extend =({
ran: function (min,max) { return parseInt(Math.random()*(max-min+1)+min); },
fun: function () { alert(1) },
fun2: function () { ... }
})
//调用:document.write($.ran(1,100))
//$.fun()
方法二:
对象级别的插件扩展(重点)
1、定义的方法:
$.fn.extend({
函数名:function(自定义参数){
插件的代码
}
})
2、例如:
$.fn.extend({
randomColor:function(){
var r=parseInt(Math.random()*256)
var g=parseInt(Math.random()*256)
var b=parseInt(Math.random()*256)
$(this).css("background","rgb("+r+","+g+","+b+")")
}
})
//调用:$("div").randomColor()
方法三:
封装拖拽
$.fn.extend({
drop:function(){
$(this).css("position", "absolute") //设定绝对定位
$(this).on("mousedown", function(e){
var l = e.offsetX; //鼠标距离事件源左边的距离
var t = e.offsetY;
var that = $(this)
$(window).on("mousemove", function (e) {
$(that).css({ left: e.pageX - l + "px", top: e.pageY - t + "px" });
})
$(window).on("mouseup", function() {
$(window).off("mousemove")
})
})
}
})