jQuery插件的封装
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 50px; height: 50px; background-color: aquamarine; position: absolute; left: 300px; top: 200px; } </style> <script src="../node_modules/jquery/dist/jquery.js"></script> </head> <body> <p></p> <p></p> <p></p> <p></p> <div></div> <div id="divs"></div> <div></div> <div></div> <script>
$.fn.bg=function(color){
if(color===undefined) return this.css("backgroundColor");//this就是调用该方法的jQuery对象
this.css("backgroundColor",color)
return this;//所有的jquery方法最后一定要return this
}
$.fn.pos=function(posObj){
if(posObj===undefined){
return {//返回元素的当前坐标
left:parseFloat(this.css("left")),//将尾缀的字符串px去掉
top:parseFloat(this.css("top")) } } this.css({ position:"absolute", left:String(posObj.left).indexOf("px")>-1 ? posObj.left : posObj.left +"px", top:String(posObj.top).indexOf("px")>-1 ? posObj.top : posObj.top+"px" }) return this; } // $("div").width(100).height(100).bg("red"); // $("<div></div").appendTo("body").width(100).height(100).bg("green"); // $("p").width(50).height(50).bg("green"); // $("p,div").width(50).height(50).bg("green"); // $("<div></div>").width(100).height(100).bg("green").appendTo("body"); // console.log($("div").bg()); // $("div").pos({left:1000}); // console.log($("div").pos()); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 50px; height: 50px; background-color: aquamarine; position: absolute; left: 300px; top: 200px; } </style> <script src="../node_modules/jquery/dist/jquery.js"></script> </head> <body> <p></p> <p></p> <p></p> <p></p> <div></div> <div id="divs"></div> <div></div> <div></div> <script> $.fn.bg=function(color){ if(this.attr("id")!=="divs"||this.length>1) return;//id获取元素需要加这一条 if(color===undefined) return this.css("backgroundColor"); this.css("backgroundColor",color); return this; } $.fn.pos=function(posObj){ if(posObj===undefined){ return{ left:parseFloat(this.css("left")), top:parseFloat(this.css("top")) } } this.css({ left:String(posObj.left).indexOf("px")>-1 ? posObj.left : posObj.left +"px", topleft:String(posObj.top).indexOf("px")>-1 ? posObj.left : posObj.top +"px", }) return this; }
// $("div").width(100).height(100).bg("red"); // $("<div></div").appendTo("body").width(100).height(100).bg("green"); // $("p").width(50).height(50).bg("green"); // $("p,div").width(50).height(50).bg("green"); // $("<div></div>").width(100).height(100).bg("green").appendTo("body"); // console.log($("div").bg()); // $("div").pos({left:1000}); // console.log($("div").pos()); </script> </body> </html>
上面两种方法，无论哪种写$("#divs").width(100).height(100).bg("red");的时候都要写在最后面，而且有时候会把全局变量污染，那么如何解决这个问题？
写在自执行函数中
(function(){
中间写上面红色部分代码
})()
里面的内容就被限制住了，只要放在里面，就是封装好了，里面的就变成一个局部变量了，不会受到外面的污染
上面是jquery对象的封装，那么接下来是不管jquery对象的封装
用$.extend()向jquery中添加函数例：
$.extend({
sayHello:function(name){
alert(‘hello‘+(name?name:‘Dude‘)+‘!‘);
}
})
$.sayHello();//调用
$.sayHello(‘Wayou‘);//带参数调用
那么如何增加方法呢？以filter为例，做成数组也能用，对象也能用的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 50px; height: 50px; background-color: aquamarine; /* position: absolute; left: 300px; top: 200px; */ } </style> <script src="../node_modules/jquery/dist/jquery.js"></script> </head> <body> <p></p> <p></p> <p></p> <p></p> <p></p> <div></div> <div id="divs"></div> <div></div> <script> // 数组、对象、jQuery都可以带进来，如果是构造函数是一个jQuery，也就是说是一个jQuery对象时，就让它是一个数组 // 然后遍历元素的时候，进行一个判断，如果是一个数组或者jQuery对象就直接添加到组里面，如果是一个对象就放到对象中，这样元素就写好了4 // 最后我们来写条件,如果是jQuery对象，就把数组转化为jQuery对象，并返回出去 // 这样就完成了filter，比数组中更完善，兼具数组、对象、jQuery $.extend({ filter:function(list,fn){//fn是函数，作用是接收所有内容，并且使用return返回 //首先判断list是什么， //list是一个数组创建一个数组 //list是一个对象创建一个对象 //list是一个别的创建一个别的 //isArray可以判断 var newList=new list.constructor(); //new list.constructor就是new一个Array, // var arr={a:1,b:2,c:3,d:4} // var arr=[2,4,3,1,5,6]; // var arr= $("div"); // console.log(new arr.constructor()); // 如果arr是一个数组，那么new arr.constructor()就是一个数组 // 如果arr是一个对象，那么new arr.constructor()就是一个对象 // 如果arr是一个$("div")，那么new arr.constructor()就是一个jQuery对象 // 即根据对象的构造函数创建这个类型的对象 if(list.constructor===jQuery){ newList=[]; } for(var prop in list){ if(fn(prop,list[prop])){//prop:属性，list[prop]:属性值 if(Array.isArray(list)){ newList.push(list[prop]); }else{ newList[prop]=list[prop]; } } } if(list.constructor===jQuery){ newList=$(newList); } return newList; } }) // 数组 // var arr=[2,4,3,1,5,6]; // var list=$.filter(arr,function(prop,item){ // console.log(item); // return item>2;//return的结果给fn(prop,list[prop]) // }); // console.log(list); // 对象 // var arr={a:1,b:2,c:3,d:4} // var list=$.filter(arr,function(prop,item){ // console.log(item); // return item>2;//return的结果给fn(prop,list[prop]) // }); // console.log(list); // jQuery // var list=$.filter($("div"),function(prop,item){ // return item.id==="divs"//return的结果给fn(prop,list[prop]) // }); // console.log(list); // list.css("backgroundColor","red"); </script> </body> </html>
原文：https://www.cnblogs.com/wjsblog/p/12847034.html