JQ封装原理

JQ的调用方式是链式调用
例:

$().css().animate().css()

JQ封装演变过程:

加点:

对象.属性

var obj={
	a:{
		b:function(){}
	}
}
obj.a.b

加括号:

function $() {
    return {
        css: function() {},
        animate: function() {}
    }
}
$().css()

继续调用当前或其它属性:

function $(){
	return {
		css:function(){
			return this;
		},
		animate:function(){
			return this;
		}
	}
}
$().css().animate().css()

将方法挂载到对象原型上(原先的相当于每使用一次方法相当于创建一次对象,现在的相当于从对象原型上调用方法):

Object.prototype.css = function() {
    return this;
}
Object.prototype.animate = function() {
    return this;
}

function $() {
    return {}
}
$().css().animate().css()

对象和方法太多容易造成混乱,可修改如下:

Object.prototype= {
    css:function(){
    	return this;
    },
    animate:function(){
    	return this;
    }
}
function $() {
    return {}
}
$().css().animate().css()

出错了,Object不能等于自己{ },可修改如下:

Base.prototype= {
    css:function(){
    	return this;
    },
    animate:function(){
    	return this;
    }
}
function $() {
	var base=new Base()
    return base
}
function Base(){}
$().css().animate().css()

获取元素:

Base.prototype= {
    css:function(){
    	console.log(this.el);
    	return this;
    }
}
function $(select) {
	var nodeList=document.querySelectorAll(select)
	var base=new Base(nodeList)
    return base
}
function Base(node){
	this.el=node
}
$('.box').css()

设置属性:

Base.prototype= {
    css:function(){
    	for(var i=0;i<this.el.length;i++)
    	{
    		this.el[i].style.width='100px';
    		this.el[i].style.height='100px';
    		this.el[i].style.backgroundColor='red';
    	}
    	return this;
    }
}
function $(select) {
	var nodeList=document.querySelectorAll(select)
	var base=new Base(nodeList)
    return base
}
function Base(node){
	this.el=node
}
$('.box').css()

设置传入的属性:

Base.prototype= {
    css:function(attr){
    	for(var i=0;i<this.el.length;i++)
    	{
    		this.el[i].style.width=attr.width;
    		this.el[i].style.height=attr.height;
    		this.el[i].style.backgroundColor=attr.backgroundColor;
    	}
    	return this;
    }
}
function $(select) {
	var nodeList=document.querySelectorAll(select)
	var base=new Base(nodeList)
    return base
}
function Base(node){
	this.el=node
}
$('.box').css({
	width:"100px",
	height:"100px",
	backgroundColor:"green"
})

传入什么属性修改什么属性:

Base.prototype= {
    css:function(attr){
    	for(var i=0;i<this.el.length;i++)
    	{
    		for(var j in attr){
    			this.el[i].style[j]=attr[j];
    		}
    	}
    	return this;
    }
}
function $(select) {
	var nodeList=document.querySelectorAll(select)
	var base=new Base(nodeList)
    return base
}
function Base(node){
	this.el=node
}
$('.box').css({
	width:"100px",
	height:"100px",
	backgroundColor:"green"
})

可以选择某个节点(需要在仔细思考一下):

Base.prototype= {
    css:function(attr){
    	for(var i=0;i<this.length;i++)
    	{
    		for(var j in attr){
    			this[i].style[j]=attr[j];
    		}
    	}
    	return this;
    }
}
function $(select) {
	var nodeList=document.querySelectorAll(select)
	var base=new Base(nodeList)
	for(var i=0;i<nodeList.length;i++){
		base[i]=nodeList[i]
	}
	base.length=nodeList.length
    return base
}
function Base(){}
$('.box').css({
	width:"100px",
	height:"100px",
	backgroundColor:"green"
})
console.log($(".box")[0]);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值