西宁设计网站建设,中企动力科技是干嘛的,做效果图赚钱的网站,阿里云服务器租用价格前面的话 虽然jQuery已经日渐式微#xff0c;但它里面的许多思想#xff0c;如选择器、链式调用、方法函数化、取赋值合体等#xff0c;有的已经变成了标准#xff0c;有的一直影响到现在。所以#xff0c;jQuery是一个伟大的前端框架。前端世界日新月异#xff0c;由于实…前面的话 虽然jQuery已经日渐式微但它里面的许多思想如选择器、链式调用、方法函数化、取赋值合体等有的已经变成了标准有的一直影响到现在。所以jQuery是一个伟大的前端框架。前端世界日新月异由于实在是没有时间去精读源码于是自己封装一个简易版本的jQuery来梳理jQuery的核心思路 基本构架 由于火柴的英文是match应该将这个简单框架称为mQuery。使用面向对象的写法来写mQuery构造函数是Mquery()调用$()方法将根据Mquery()构造函数创建一个实例对象 //构造函数
function Mquery(arg){} function $(arg){return new Mquery(arg);
} jquery几大特征 1、通过$()选择的元素都是一个集合即使仅仅是一个元素 因此创建一个elements属性为一个数组去接收获取的元素 //构造函数
function Mquery(arg){//保存所选择的元素this.elements [];
} 2、链式调用 所以原型函数要返回this以实现链式调用的效果 $函数 $函数根据参数类型的不同用途也不同 1、参数为函数时则直接运行 $(function(){console.log(1)
}) 2、参数为对象时则把DOM对象转换为$对象 $(document.body) 3、参数为字符串时则根据字符串选择出元素并转换为$对象 $(#box) 下面根据以上三个分类来编写Mquery构建函数 //事件绑定兼容写法
function _addEvent(target,type,handler){if(target.addEventListener){target.addEventListener(type,function(e){//如果事件函数中出现 return false;则阻止默认事件和阻止冒泡if(typeof handler function handler() false){e.preventDefault();e.cancelBubble true;}},false);}else{target.attachEvent(ontype,function(event){if(typeof handler function handler() false){event.cancelBubble true;event.returnValue false;}return handler.call(target,event);});}
}//将类数组转换成数组
function _toArray(arrayLike){return Array.prototype.slice.call(arrayLike);
} //构造函数
function Mquery(arg){//保存所选择的元素this.elements [];switch(typeof arg){//当参数是函数时如$(function(){})()直接运行里面的代码case function:_addEvent(window,load,arg);break;//当参数是字符串时选择元素case string:this.elements _toArray(document.querySelectorAll(arg)); break;//当参数是DOM对象时将DOM对象转换为$对象 case object:if(arg.constructor Array){this.elements arg;}else{this.elements.push(arg);} break;}
} HTML、CSS及特性设置 下面来介绍常用的HTML、CSS及特性设置 【HTML】 对于文本内容来说一般地有三种方法html()、text()和val()。本文只实现最常用的html()方法 当html()方法没有参数时表示获取内容有一个参数时表示设置内容 //HTML获取与设置
Mquery.prototype.html function(str){//设置if(str){for(var i 0; i this.elements.length; i){this.elements[i].innerHTML str;}//获取}else{return this.elements[0].innerHTML;} return this;
} 【CSS】 对于CSS来说有两种参数格式一种是json格式一种是字符串格式 当第一个参数为对象时则判断为json格式否则为字符串格式 对于字符串格式来说只有一个参数时为获取样式两个参数时为设置样式 获取样式时仅获取当前集合中第0个元素的样式设置样式时则设置当前集合中所有元素的样式 //获取计算样式兼容写法
function _getCSS(obj,style){if(window.getComputedStyle){return getComputedStyle(obj)[style];}return obj.currentStyle[style];
} //CSS获取与设置
Mquery.prototype.css function(attr,value){//如果是对象的形式以对象的形式设置if(typeof attr object){for(var att in attr){for(var j 0; j this.elements.length; j){this.elements[j].style[att] attr[att];}}//如果不是对象的形式}else{//设置if(arguments.length 2){for(var i 0; i this.elements.length; i){this.elements[i].style[attr] value;}//获取}else if(arguments.length 1){return _getCSS(this.elements[0],attr)}}return this;
} 【attr】 特性设置与获取的思路与CSS类似只是方法变成了setAttribute()和getAttribute() //attr获取与设置
Mquery.prototype.attr function(attr,value){//如果是对象的形式if(typeof attr object){for(var att in attr){for(var j 0; j this.elements.length; j){this.elements[j].setAttribute(att,attr[att]);}}//如果不是对象的形式}else{//设置if(arguments.length 2){for(var i 0; i this.elements.length; i){this.elements[i].setAttribute(attr,value);}//获取}else if(arguments.length 1){return this.elements[0].getAttribute(attr);}}return this;
} 事件绑定 【on】 在jQuery中最常用的事件绑定方法就是on方法。在on方法中要特别注意的是this的绑定由于函数fn中的this实际上是window所以应该将fn的this绑定到当前元素 //事件绑定
Mquery.prototype.on function(eventType,fn){for(var i 0; i this.elements.length; i){_addEvent(this.elements[i],eventType,fn.bind(this.elements[i));}return this;
} 【click和hover】 click方法是一个简写方法 Mquery.prototype.click function(fn){this.on(click,fn);return this;
} hover方法是mouseover和mouseout的合成方法 Mquery.prototype.hover function(fnOver,fnOut){this.on(mouseover,fnOver);this.on(mouseout,fnOut);return this;
} 【return false】 在jQuery中使用return false可以同时阻止默认行为和阻止冒泡 //事件绑定兼容写法
function _addEvent(target,type,handler){if(target.addEventListener){target.addEventListener(type,function(e){//如果事件函数中出现 return false;则阻止默认事件和阻止冒泡if(typeof handler function handler() false){e.preventDefault();e.cancelBubble true;}},false);}else{target.attachEvent(ontype,function(event){if(typeof handler function handler() false){event.cancelBubble true;event.returnValue false;}return handler.call(target,event);});}
} 其他设置 jQuery的功能非常强大。下面选择一些常用功能进行实现 【显示隐藏】 //隐藏
Mquery.prototype.hide function(){for(var i 0; i this.elements.length; i){//保存当前元素的display值this.elements[i].displayValue this.elements[i].style.display;this.elements[i].style.display none;}return this;
}
//显示
Mquery.prototype.show function(){for(var i 0; i this.elements.length; i){this.elements[i].style.display this.elements[i].displayValue;//删除保存的元素的display值delete this.elements[i].displayValue;}return this;
} 【插件设置】 $.extend function(json){ for(var attr in json){$[attr] json[attr];}
};
$.fn {};
$.fn.extend function(json){for(var attr in json){Mquery.prototype[attr] json[attr];}
}; 【索引设置】 //根据索引选择元素
Mquery.prototype.eq function(number){return $(this.elements[number]);
}//根据元素获取索引
Mquery.prototype.index function(){var elements this.elements[0].parentNode.children;for(var i 0; i elements.length; i){if(elements[i] this.elements[0]){return i;}}
} 【子级筛选】 //筛选出当前匹配的元素集合中每个元素的后代
Mquery.prototype.find function(str){var arr [];for(var i 0; i this.elements.length; i){Array.prototype.push.apply(arr,this.elements[i].querySelectorAll(str));}return $(arr);
} 完整源码 下面是mQuery的完整源码 //事件绑定兼容写法
function _addEvent(target,type,handler){if(target.addEventListener){target.addEventListener(type,function(e){//如果事件函数中出现 return false;则阻止默认事件和阻止冒泡if(typeof handler function handler() false){e.preventDefault();e.cancelBubble true;}},false);}else{target.attachEvent(ontype,function(event){if(typeof handler function handler() false){event.cancelBubble true;event.returnValue false;}return handler.call(target,event);});}
}
//获取计算样式兼容写法
function _getCSS(obj,style){if(window.getComputedStyle){return getComputedStyle(obj)[style];}return obj.currentStyle[style];
}//将类数组转换成数组
function _toArray(arrayLike){return Array.prototype.slice.call(arrayLike);
}
//构造函数
function Mquery(arg){//保存所选择的元素this.elements [];switch(typeof arg){//当参数是函数时如$(function(){})()直接运行里面的代码case function:_addEvent(window,load,arg);break;//当参数是字符串时选择元素case string:this.elements _toArray(document.querySelectorAll(arg)); break;//当参数是DOM对象时将DOM对象转换为$对象 case object:if(arg.constructor Array){this.elements arg;}else{this.elements.push(arg);} break;}
}
//根据索引选择元素
Mquery.prototype.eq function(number){return $(this.elements[number]);
}
//根据元素获取索引
Mquery.prototype.index function(){var elements this.elements[0].parentNode.children;for(var i 0; i elements.length; i){if(elements[i] this.elements[0]){return i;}}
}
//筛选出当前匹配的元素集合中每个元素的后代
Mquery.prototype.find function(str){var arr [];for(var i 0; i this.elements.length; i){Array.prototype.push.apply(arr,this.elements[i].querySelectorAll(str));}return $(arr);
}
//CSS获取与设置
Mquery.prototype.css function(attr,value){//如果是对象的形式以对象的形式设置if(typeof attr object){for(var att in attr){for(var j 0; j this.elements.length; j){this.elements[j].style[att] attr[att];}}//如果不是对象的形式}else{//设置if(arguments.length 2){for(var i 0; i this.elements.length; i){this.elements[i].style[attr] value;}//获取}else if(arguments.length 1){return _getCSS(this.elements[0],attr)}}return this;
}
//attr获取与设置
Mquery.prototype.attr function(attr,value){//如果是对象的形式if(typeof attr object){for(var att in attr){for(var j 0; j this.elements.length; j){this.elements[j].setAttribute(att,attr[att]);}}//如果不是对象的形式}else{//设置if(arguments.length 2){for(var i 0; i this.elements.length; i){this.elements[i].setAttribute(attr,value);}//获取}else if(arguments.length 1){return this.elements[0].getAttribute(attr);}}return this;
}
//HTML获取与设置
Mquery.prototype.html function(str){//设置if(str){for(var i 0; i this.elements.length; i){this.elements[i].innerHTML str;}//获取}else{return this.elements[0].innerHTML;} return this;
}
//隐藏
Mquery.prototype.hide function(){for(var i 0; i this.elements.length; i){//保存当前元素的display值this.elements[i].displayValue this.elements[i].style.display;this.elements[i].style.display none;}return this;
}
//显示
Mquery.prototype.show function(){for(var i 0; i this.elements.length; i){this.elements[i].style.display this.elements[i].displayValue;//删除保存的元素的display值delete this.elements[i].displayValue;}return this;
}
//事件绑定
Mquery.prototype.on function(eventType,fn){for(var i 0; i this.elements.length; i){_addEvent(this.elements[i],eventType,fn.bind(this.elements[i]));}return this;
}
//click简写
Mquery.prototype.click function(fn){this.on(click,fn);return this;
}
//鼠标移入移出
Mquery.prototype.hover function(fnOver,fnOut){this.on(mouseover,fnOver);this.on(mouseout,fnOut);return this;
}
$.extend function(json){ for(var attr in json){$[attr] json[attr];}
};
$.fn {};
$.fn.extend function(json){for(var attr in json){Mquery.prototype[attr] json[attr];}
};
function $(arg){return new Mquery(arg);
} 实际应用 下面使用mQuery来实现一个简单的效果 style
div { width:60px; height:60px; margin:5px; float:left; }
/style
span idresult/span
div stylebackground-color:blue;/div
div stylebackground-color:rgb(15,99,30);/div
div stylebackground-color:#123456;/div
div stylebackground-color:#f11;/div
script srcmQuery.js/script
script
$(div).click(function(){$(#result).html(背景颜色是 $(this).css(background-color));
})
/script 点击不同颜色的元素块将在右侧显示具体的颜色值
