自己封裝jquery玩玩

'use strict';

functionZQuery(arg){

this.elements=[];

this.domString='';

switch(typeofarg){

case'string':

//元素? 獲取到

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

//存創(chuàng)建標(biāo)簽

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轉(zhuǎn)原生

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;

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市禽炬,隨后出現(xiàn)的幾起案子涧卵,更是在濱河造成了極大的恐慌,老刑警劉巖腹尖,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件柳恐,死亡現(xiàn)場離奇詭異,居然都是意外死亡热幔,警方通過查閱死者的電腦和手機乐设,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來绎巨,“玉大人近尚,你說我怎么就攤上這事〕∏冢” “怎么了戈锻?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長和媳。 經(jīng)常有香客問我舶沛,道長,這世上最難降的妖魔是什么窗价? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任如庭,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己昔案,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布往毡。 她就那樣靜靜地躺著,像睡著了一般靶溜。 火紅的嫁衣襯著肌膚如雪开瞭。 梳的紋絲不亂的頭發(fā)上懒震,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天,我揣著相機與錄音嗤详,去河邊找鬼个扰。 笑死,一個胖子當(dāng)著我的面吹牛葱色,可吹牛的內(nèi)容都是我干的递宅。 我是一名探鬼主播,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼苍狰,長吁一口氣:“原來是場噩夢啊……” “哼办龄!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起淋昭,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤俐填,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后翔忽,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體英融,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年呀打,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片糯笙。...
    茶點故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡贬丛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出给涕,到底是詐尸還是另有隱情豺憔,我是刑警寧澤,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布够庙,位于F島的核電站恭应,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏耘眨。R本人自食惡果不足惜昼榛,卻給世界環(huán)境...
    茶點故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望剔难。 院中可真熱鬧胆屿,春花似錦、人聲如沸偶宫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽纯趋。三九已至憎兽,卻和暖如春冷离,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背纯命。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工西剥, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人扎附。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓蔫耽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親留夜。 傳聞我的和親對象是個殘疾皇子匙铡,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,955評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)碍粥,斷路器鳖眼,智...
    卡卡羅2017閱讀 134,657評論 18 139
  • 單例模式 適用場景:可能會在場景中使用到對象,但只有一個實例嚼摩,加載時并不主動創(chuàng)建钦讳,需要時才創(chuàng)建 最常見的單例模式,...
    Obeing閱讀 2,073評論 1 10
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品枕面,去做同樣的事情愿卒,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,763評論 2 17
  • 當(dāng)看到這句話的時候潮秘,我就在想琼开,在這世上還能不能再找出一個如你一般的人,這樣的了解我枕荞、熟悉我柜候、認(rèn)識我、明白我躏精? 答案...
    濁酒一壺慰風(fēng)塵閱讀 786評論 0 1
  • 一次朋友喝醉了留宿在我家渣刷,我才知道,原來一場暗戀可以持續(xù)那么久矗烛,我也是第一次知道辅柴,有些暗戀會帶來那么深刻的傷害。 ...
    春上熊閱讀 500評論 4 1