jQueryプラグインのパッケージ
jQueryプラグインのパッケージ
$.fnにメソッドを追加
$.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());