jQueryプラグインのパッケージ


jQueryプラグインのパッケージ
$.fnにメソッドを追加
    jQuery        ,    $.fn        
       ,jQuery         
div{
    width: 50px;
    height: 50px;
    background-color: aqua;
    position: absolute;
    left: 300px;
    top: 200px;
}

<div></div>
<div id="divs"></div>
<div></div>
<div></div>

<p></p>
<p></p>
<p></p>

//     jQuery        ,    $.fn        
//        ,jQuery         
(function(){
    //  jQuery.fn  ​​      ,                 
    $.fn.bg=function(color){
        //   id    
        if (this.attr("id") !== "divs" || this.length > 1) return this;
        // this         jQuery  
        //  color   ,          
        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({
            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",
        })
    }
})();
// $("div").width(100).height(100).bg("red");
// $("
").appendTo("body").width(100).height(100).bg("yellow"); // $("div").width(100).height(100).bg("pink"); // $("p,div").width(100).height(100).bg("pink"); // $("
").width(100).height(100).bg("green").appendTo("body") // $("#divs").width(100).height(100).bg("red"); // console.log($("div").bg()); // $("div").pos({left:1000}); // console.log($("div").pos()); // $("#divs").width(100).height(100).bg("blue");

$.extend()向jquery中添加函数

// var arr=[1,2,3,4];
// var arr={a:1,b:2,c:3};
// $.each(arr,function(index,item){

// })
// console.log(new arr.constructor());


// $.extend() jquery     
// filter           
$.extend({
    filter:function(list,fn){
        //           ,        ,        ,       
        var newList=new list.constructor();
        //          jQuery   ,        
        if(list.constructor===jQuery){
            newList=[];
        }
        //   list
        for(var prop in list){
            //          list               
            //            true  fasle
            if(fn(prop,list[prop])){
                //             
                //    ,               
                if(Array.isArray(newList)){
                    newList.push(list[prop]);
                }else{
                    //        
                    newList[prop]=list[prop];
                }
            }
        }
        //      jQuery  
        if(list.constructor===jQuery){
            newList=$(newList);
        }
        return newList;
    },
    randomColor:function(){
        var color="#";
        for(var i=0;i<6;i++){
            color+=Math.floor(Math.random()*16).toString(16);
        }
        return color;
    }
});

var arr=[2,4,3,1,5,6];
var arr={a:1,b:2,c:3,d:4}
var list=$.filter($("div"),function(prop,item){
    // console.log(prop,item);
    // return item>2;
    return item.id==="divs";
})
console.log(list);

list.css("backgroundColor","red");
$("div").bg($.randomColor());