自己封装jquery玩玩

'use strict';

functionZQuery(arg){

this.elements=[];

this.domString='';

switch(typeofarg){

case'string':

//元素  获取到

if(arg.indexOf('<')!=-1){

//存创建标签

this.domString=arg;

}else{

this.elements=getEle(arg);

this.length=this.elements.length;

}

break;

case'function':

DOMReady(arg);

break;

default:

this.elements.push(arg);

break;

}

}

//把new ZQuery变成$

function$(arg){

return newZQuery(arg);

}

//DOMReady

functionDOMReady(fn){

if(document.addEventListener){

document.addEventListener('DOMContentLoaded',function(){

fn&&fn();

},false);

}else{

document.attachEvent('onreadystatechange',function(){

if(document.readyState=='complete'){

fn&&fn();

}

});

}

}

//css

ZQuery.prototype.css=function(name,value){

if(arguments.length==2){

for(vari=0; i

this.elements[i].style[name]=value;

}

}else{

//{} 'width'

if(typeofname=='string'){

returngetStyle(this.elements[0],name);

}else{

varjson=name;

for(vari=0; i

for(varnameinjson){

this.elements[i].style[name]=json[name];

}

}

}

}

};

//attr

ZQuery.prototype.attr=function(name,value){

if(arguments.length==2){

for(vari=0; i

this.elements[i].setAttribute(name,value);

}

}else{

//{} 'width'

if(typeofname=='string'){

return this.elements[0].getAttribute(name);

}else{

varjson=name;

for(vari=0; i

for(varnameinjson){

this.elements[i].setAttribute(name,json[name]);

}

}

}

}

};

//html

ZQuery.prototype.html=function(str){

if(str||str==''){

for(vari=0; i

this.elements[i].innerHTML=str;

}

}else{

return this.elements[0].innerHTML;

}

};

//val

ZQuery.prototype.val=function(str){

if(str||str==''){

for(vari=0; i

this.elements[i].value=str;

}

}else{

return this.elements[0].value;

}

};

//addClass

ZQuery.prototype.addClass=function(sClass){

for(vari=0; i

if(this.elements[i].className){

varre=newRegExp('\\b'+sClass+'\\b','g');

if(this.elements[i].className.search(re)==-1){

this.elements[i].className+=' '+sClass;

}

}else{

this.elements[i].className=sClass;

}

this.elements[i].className=this.elements[i].className.replace(/^\s+|\s+$/g,'').replace(/\s+/g,' ');

}

};

//removeClass

ZQuery.prototype.removeClass=function(sClass){

for(vari=0; i

if(this.elements[i].className){

varre=newRegExp('\\b'+sClass+'\\b','g');

this.elements[i].className=this.elements[i].className.replace(re,'');

this.elements[i].className=this.elements[i].className.replace(/^\s+|\s+$/g,'').replace(/\s+/g,' ');

if(this.elements[i].className==''){

this.elements[i].removeAttribute('class');

}

}

}

};

//show

ZQuery.prototype.show=function(){

for(vari=0; i

this.elements[i].style.display='block';

}

return this;

};

//hide

ZQuery.prototype.hide=function(){

for(vari=0; i

this.elements[i].style.display='none';

}

return this;

};

//animate

ZQuery.prototype.animate=function(json,options){

for(vari=0; i

move(this.elements[i],json,options);

}

};

//eq

ZQuery.prototype.eq=function(n){

return this.elements[n];

};

//index

ZQuery.prototype.index=function(){

varaEle=this.elements[0].parentNode.children;

for(vari=0; i

if(aEle[i]==this.elements[0]){

returni;

}

}

};

//jq转原生

ZQuery.prototype.get=function(n){

return this.elements[n];

};

//事件

;'click mouseover mouseout mousedown mousemove mouseup mouseenter mouseleave keydown keyup contextmenu dblclick load error scroll resize'.replace(/\w+/g,function(str){

ZQuery.prototype[str]=function(fn){

for(vari=0; i

addEvent(this.elements[i],str,fn);

}

};

});

//hover

ZQuery.prototype.hover=function(fn1,fn2){

this.mouseenter(fn1);

this.mouseleave(fn2);

};

//toggle

ZQuery.prototype.toggle=function(){

vararg=arguments;

var_this=this;

for(vari=0; i

(function(count){

_this.elements[i].onclick=function(){

arg[count%arg.length]();

count++;

};

})(0);

}

};

//addEvent

functionaddEvent(obj,sEv,fn){

if(obj.addEventListener){

obj.addEventListener(sEv,function(ev){

varoEvent=ev||event;

if(fn(oEvent)==false){

oEvent.preventDefault();

oEvent.cancelBubble=true;

}

},false);

}else{

obj.attachEvent('on'+sEv,function(ev){

varoEvent=ev||event;

if(fn(oEvent)==false){

oEvent.cancelBubble=true;

return false;

}

});

}

}

//DOM插入

ZQuery.prototype.appendTo=function(str){

varaParent=getEle(str);

for(vari=0; i

//不为人知DOM操作

aParent[i].insertAdjacentHTML('beforeEnd',this.domString);

}

};

ZQuery.prototype.prependTo=function(str){

varaParent=getEle(str);

for(vari=0; i

//不为人知DOM操作

aParent[i].insertAdjacentHTML('afterBegin',this.domString);

}

};

ZQuery.prototype.insertAfter=function(str){

varaParent=getEle(str);

for(vari=0; i

//不为人知DOM操作

aParent[i].insertAdjacentHTML('afterEnd',this.domString);

}

};

ZQuery.prototype.insertBefore=function(str){

varaParent=getEle(str);

for(vari=0; i

//不为人知DOM操作

aParent[i].insertAdjacentHTML('beforeBegin',this.domString);

}

};

//remove

ZQuery.prototype.remove=function(){

for(vari=0; i

this.elements[i].parentNode.removeChild(this.elements[i]);

}

};

//插件

$.fn=ZQuery.prototype;

$.fn.extend=function(json){

for(varnameinjson){

ZQuery.prototype[name]=json[name];

}

};

$.ajax=function(json){

ajax(json);

};

$.jsonp=function(json){

jsonp(json);

};

functionjsonp(json){

varjson=json||{};

if(!json.url)return;

json.cbName=json.cbName||'cb';

json.data=json.data||{};

json.data[json.cbName]='show'+Math.random();

json.data[json.cbName]=json.data[json.cbName].replace('.','');

vararr=[];

for(varnameinjson.data){

arr.push(name+'='+json.data[name]);

}

//a=1&b=2

varstr=arr.join('&');

window[json.data[json.cbName]]=function(result){

json.success&&json.success(result);

oH.removeChild(oS);

};

varoH=document.head;

varoS=document.createElement('script');

oS.src=json.url+'?'+str;

oH.appendChild(oS);

}

//ajax

functionjson2url(json){

json.t=Math.random();

vararr=[];

for(varnameinjson){

arr.push(name+'='+json[name]);

}

returnarr.join('&');

}

functionajax(json){

varjson=json||{};

if(!json.url)return;

json.data=json.data||{};

json.type=json.type||'get';

if(window.XMLHttpRequest){

varoAjax=newXMLHttpRequest();

}else{

varoAjax=newActiveXObject('Microsoft.XMLHTTP');

}

switch(json.type.toLowerCase()){

case'get':

oAjax.open('GET',json.url+'?'+json2url(json.data),true);

oAjax.send();

break;

case'post':

oAjax.open('POST',json.url,true);

oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

oAjax.send(json2url(json.data));

break;

}

oAjax.onreadystatechange=function(){

if(oAjax.readyState==4){

if(oAjax.status==200){

json.success&&json.success(oAjax.responseText);

}else{

json.error&&json.error(oAjax.status);

}

}

};

}

//getStyle

functiongetStyle(obj,sName){

return(obj.currentStyle||getComputedStyle(obj,false))[sName];

}

//move

functionmove(obj,json,options){

varoptions=options||{};

options.duration=options.duration||700;

options.easing=options.easing||'ease-out';

varstart={};

vardis={};

for(varnameinjson){

start[name]=parseFloat(getStyle(obj,name));

dis[name]=json[name]-start[name];

}

varcount=Math.floor(options.duration/30);

varn=0;

clearInterval(obj.timer);

obj.timer=setInterval(function(){

n++;

for(varnameinjson){

switch(options.easing){

case'linear':

vara=n/count;

varcur=start[name]+dis[name]*a;

break;

case'ease-in':

vara=n/count;

varcur=start[name]+dis[name]*Math.pow(a,3);

break;

case'ease-out':

vara=1-n/count;

varcur=start[name]+dis[name]*(1-Math.pow(a,3));

break;

}

if(name=='opacity'){

obj.style.opacity=cur;

obj.style.filter='alpha(opacity:'+cur*100+')';

}else{

obj.style[name]=cur+'px';

}

}

if(n==count){

clearInterval(obj.timer);

}

},16);

}

//选择器

functiongetByClass(obj,sClass){

if(obj.getElementsByClassName){

returnobj.getElementsByClassName(sClass);

}

varaResult=[];

varaEle=obj.getElementsByTagName('*');

varre=newRegExp('\\b'+sClass+'\\b','g');

for(vari=0; i

if(aEle[i].className.search(re)!=-1){

aResult.push(aEle[i]);

}

}

returnaResult;

}

functiongetByStr(aParent,str){

varaChild=[];

for(vari=0; i

switch(str.charAt(0)){

case'#':

varobj=document.getElementById(str.substring(1));

aChild.push(obj);

break;

case'.':

varaEle=getByClass(aParent[i],str.substring(1));

for(varj=0; j

aChild.push(aEle[j]);

}

break;

default:

if(/^\w+\.\w+$/.test(str)){

//li.on

vararr=str.split('.');

varaEle=aParent[i].getElementsByTagName(arr[0]);

varre=newRegExp('\\b'+arr[1]+'\\b','g');

for(varj=0; j

if(aEle[j].className.search(re)!=-1){

aChild.push(aEle[j]);

}

}

}else if(/^\w+\[\w+\=\w+\]$/.test(str)){

//input[type=text]

vararr=str.split(/\[|\=|\]/g);

varaEle=aParent[i].getElementsByTagName(arr[0]);

for(varj=0; j

if(aEle[j].getAttribute(arr[1])==arr[2]){

aChild.push(aEle[j]);

}

}

}else if(/^\w+\:\w+(\(\d+\))?$/.test(str)){

//li:first li:eq(0)

vararr=str.split(/\:|\(|\)/g);

varaEle=aParent[i].getElementsByTagName(arr[0]);

switch(arr[1]){

case'first':

aChild.push(aEle[0]);

break;

case'last':

aChild.push(aEle[aEle.length-1]);

break;

case'even':

for(varj=0; j

aChild.push(aEle[j]);

}

break;

case'odd':

for(varj=1; j

aChild.push(aEle[j]);

}

break;

case'eq':

aChild.push(aEle[arr[2]]);

break;

case'lt':

for(varj=0; j

aChild.push(aEle[j]);

}

break;

case'gt':

for(varj=arr[2]; j

aChild.push(aEle[j]);

}

break;

}

}else{

varaEle=aParent[i].getElementsByTagName(str);

for(varj=0; j

aChild.push(aEle[j]);

}

}

break;

}

}

returnaChild;

}

functiongetEle(str){

vararr=str.replace(/^\s+|\s+$/g,'').split(/\s+/g);

varaChild=[];

varaParent=[document];

for(vari=0; i

aChild=getByStr(aParent,arr[i]);

aParent=aChild;

}

returnaChild;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,176评论 5 469
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,190评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,232评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,953评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,879评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,177评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,626评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,295评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,436评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,365评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,414评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,096评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,685评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,771评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,987评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,438评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,032评论 2 341

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,566评论 18 139
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,046评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,710评论 2 17
  • 当看到这句话的时候,我就在想,在这世上还能不能再找出一个如你一般的人,这样的了解我、熟悉我、认识我、明白我? 答案...
    浊酒一壶慰风尘阅读 769评论 0 1
  • 一次朋友喝醉了留宿在我家,我才知道,原来一场暗恋可以持续那么久,我也是第一次知道,有些暗恋会带来那么深刻的伤害。 ...
    春上熊阅读 492评论 4 1