? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jQuery插件封裝
? 自定義插件:
? 作用:擴(kuò)展jQuery插件和方法的作用是非常強(qiáng)大的耍属,他可以節(jié)省大量的開發(fā)時間
? 方法:
? 一、類級別的封裝方法:就是擴(kuò)展jQuery類本身的方法,為它增加新的方法券膀。(不常用俭正,不方便綁定元素)
? ? 1.定義方法:
? ? ? 第一種适瓦、$.函數(shù)名=function(自定義參數(shù)){
? ? ? ? ? ? ? ? ? ? 插件的代碼
? ? ? ? ? ? ? ? ? }
? ? ? 第二種竿开、$.extend({
? ? ? ? ? ? ? 函數(shù)名:function(自定義參數(shù)){
? ? ? ? ? ? ? ? ? ? 插件的代碼
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? })
? ? 2.例如:
//第一種在$類中添加方法
$.ran = function(min,max){
return parseInt(Math.random()*(max-min+1)+min);
? ? ? ? ? ? ? }
? ? ? ? ? 調(diào)用:alert($.ran(1,100))
? ? ? ? //第二種? ? 可以定義多個函數(shù)
? ? ? ? $.extend =({
? ? ? ? ? ? ? ran:function(min,max){
return parseInt(Math.random()*(max-min+1)+min);
? ? ? ? ? ? ? },
? ? ? ? ? ? ? fun:function(){alert(1)},
? ? ? ? ? ? ? fun2:function(){...}
? ? ? ? ? ? })
? ? ? ? ? ? ? 調(diào)用:document.write($.ran(1,100))
? ? ? ? ? ? ? ? ? ? $.fun()
? 二、對象級別的插件擴(kuò)展
? ? ? ? 1玻熙、定義的方法:
? ? ? ? ? $.fn.extend({
? ? ? ? ? ? ? ? 函數(shù)名:function(自定義參數(shù)){
? ? ? ? ? ? ? ? ? ? 插件的代碼
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? 例如:?
? ? ? ? $.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+")")
? ? ? }
? ? ? ? ? })
? ? ? ? 調(diào)用:$("div").randomColor()
? 三否彩、封裝拖拽
? ? ? ? $.fn.extend({
? ? ? ? ? drop:function(){
$(this).css("position","absolute")//設(shè)定絕對定位
$(this).on("mousedown",function(e){
var l=e.offsetX; //鼠標(biāo)距離事件源左邊的距離
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")
})
? })
? ? ? }
? ? ? ? ? })