?今天是2017.1.1，新的一天，新的一年，新的一年里繼續(xù)夯實(shí)基礎(chǔ)知識(shí)，在工作中多些項(xiàng)目，多思考，多總結(jié)，前端是不斷更新，在更新的過(guò)程中也是發(fā)現(xiàn)樂(lè)趣和挑戰(zhàn)自我的過(guò)程，希望年輕的我和年輕的javascript在2017年中一同成長(zhǎng)

?

今天又一次封裝了一個(gè)盒jquery使用方法相同的庫(kù)，每次寫都有新的想法，我想著也是碼農(nóng)的樂(lè)趣之一吧，

今天代碼只實(shí)現(xiàn)了jquery中部分常用選擇器的功能，以后部分會(huì)繼續(xù)更新其余部分，所有代碼的注釋已經(jīng)寫到行間的注釋了，這僅僅是我自己的理解，不妥之處希望大家評(píng)論到下面，共同學(xué)習(xí)才是進(jìn)步的最好方式

/*** Created by Jason on 2016/12/31.*/ //jquery 的構(gòu)造函數(shù) function Jquery(arg){//用來(lái)存選出來(lái)的元素this.elemenets=[];switch(typeof arg){case 'function' :domReady(arg);break;case 'string' :this.elements = getEle(arg);break;case 'object' :this.elements.push(arg);break;} } //DOM ready onload 如果參數(shù)是函數(shù)，則進(jìn)行domReady操作 function domReady(fn){// FF chromeif(document.addEventListener){//jquery中已經(jīng)省略false，false解決低版本火狐兼容性問(wèn)題document.addEventListener('DOMContentLoaded',fn,false);}else{document.attachEvent('onreadystatechange',function(){if(document.readyState=='complete'){fn();}});} }function getByClass(oParent,sClass){//高級(jí)瀏覽器支持getElementsByClassName直接使用if(oParent.getElementsByClassName){return oParent.getElementsByClassName(sClass);}else{//不支持需要選中所有標(biāo)簽的類名來(lái)選取var res=[];var aAll=oParent.getElementsByTagName('*');for(var i=0;i<aAll.length;i++){//選中標(biāo)簽的全部類名是個(gè)str='btn on red'=aAll[i].className 使用正則 reg=/\b sClass \b/gvar reg= new RegExp('\\b'+sClass+'\\b','g');if(reg.test(aAll[i].className)){res.push(aAll[i]);}}return res;} }//如果參數(shù)是str 進(jìn)行選擇器的操作 function getByStr(aParent,str){//用來(lái)存放選中的元素的數(shù)組 這個(gè)數(shù)組在getEle存在，為了每次執(zhí)行的時(shí)候都需要清空，所以使用局部函數(shù)的變量var aChild=[];//aParent開始是[document],再執(zhí)行完getByStr的時(shí)候getEle將aParent指向了getByStr函數(shù)的返回值aChild數(shù)組以確保循環(huán)父級(jí)下面的所有匹配元素for(var i=0;i<aParent.length;i++){switch(str.charAt(0)){//id選擇器 eg: #box 使用document.getElementById選取case '#':var obj=document.getElementById(str.substring(1));aChild.push(obj);break;//類選擇器 eg: .box 使用上面封裝的getByClass選取case '.'://由于一個(gè)標(biāo)簽可以有多個(gè)類選擇器 所以需要進(jìn)行循環(huán)選取var aRes=getByClass(aParent[i],str.substring(1));for(var j=0;j<aRes.length;j++){aChild.push(aRes[j]);}break;//今天先簡(jiǎn)單的編寫選擇器 這里我們假設(shè)除了id和類選擇器，就是標(biāo)簽選擇器default:// 如果是li.red 那么用正則來(lái)判斷if(/\w+\.\w+/g.test(str)){//先選擇標(biāo)簽，在選擇類選擇器 使用類選擇器的時(shí)候重復(fù)選擇器函數(shù)即可var aStr=str.split('.');var aRes=aParent[i].getElementsByTagName(aStr[0]);var reg=new RegExp('\\b'+aStr[1]+'\\b','g');//循環(huán)選取標(biāo)簽，注意外層已經(jīng)有i的循環(huán)for(var j=0;j<aRes.length;j++){if(reg.test(aRes[j].className)){aChild.push(aRes[j]);}}//如果是li:eq(2) 或者 li:first這樣的選擇器 書寫正則是的時(shí)候注意（）可有可以無(wú)為？ 有或者沒(méi)有為* 至少有一個(gè)也就是若干個(gè)為+ {2,5}這種則為2-5個(gè)}else if(/\w+\:\w+(\(\d+\))?/g.test(str)){//講str進(jìn)行整理 [li,eq,2] 或者 [li,first]var aStr=str.split(/\:|\(|\)/);//aStr[2]是eq、lt、gt傳入的參數(shù)，這里使用n來(lái)保存var n=aStr[2];//在父級(jí)下獲取所有匹配aStr[0]項(xiàng)的標(biāo)簽var aRes=aParent[i].getElementsByTagName(aStr[0]);//這時(shí)候會(huì)循環(huán)判斷aStr[1]項(xiàng)是的內(nèi)容，jquery中經(jīng)常使用的為eq、lt、gt、even、odd、first、lastswitch(aStr[1]){//如果是eq則把第n項(xiàng)傳入aChild數(shù)組即可case 'eq':aChild.push(aRes[n]);break;//如果是lt需要將aRes數(shù)組中獲取到的小于n的標(biāo)簽循環(huán)推入aChild中case 'lt':for(var j=0;j<n;j++){aChild.push(aRes[j]);}break;//如果是gt則和lt相反case 'gt':for(var j=n;j<aRes.legth;j++){aChild.push(aRes[j]);}break;//如果是event的話需要隔數(shù)添加，注意jquery中的event是從第0開始循環(huán)的case 'event':for(var j=0;j<aRes.length;j+=2){aChild.push(aRes[j]);}break;//如果是odd的和event不同的只是從第1項(xiàng)開始循環(huán)case 'odd':for(var j=1;j<aRes.length;j+=2){aChild.push(aRes[j]);}break;//如果是first，則將aRes[0]推入aChildcase 'first':aChild.push(aRes[0]);break;case 'last':aChild.push(aRes[aRes.length-1]);break;}//屬性選擇器 eg：input[type=button] 同樣適用正則來(lái)判斷}else if(/\w+\[\w+\=\w+\]/g.test(str)){//將屬性選擇器切成數(shù)組 [input,type,button]var aStr=str.split(/\[|\=|\]/g);var aRes=aParent[i].getElementsByTagName(aStr[0]);//在選中標(biāo)簽中選出有aRes[1]的屬性for(var j=0;j<aRes.length;j++){//把屬性值為aRes[2]的標(biāo)簽推入aChild中if(aRes[j].getAttribute(aStr[1])==aStr[2]){aChild.push(aRes[j]);}}//標(biāo)簽選擇器 div、span}else{var aRes=aParent[i].getElementsByTagName(str);for(var j=0;j<aRes.length;j++){aChild.push(aRes[j]);}}break;}}return aChild; }function getEle(str){//如果是字符串的話先要去除收尾空格 eg:" on replace index play auto "var arr = str.replace(/^\s+|\s+$/g,'').split(/\s+/g);var aChild = [];var aParent = [document];for(var i = 0;i<arr.length;i++){aChild = getByStr(aParent,arr[i]);aParent = aChild}return aChild; }//實(shí)現(xiàn)jquery $符號(hào)的寫法 function $(arg){return new Jquery(arg); }

轉(zhuǎn)載請(qǐng)注明。。

轉(zhuǎn)載于:https://www.cnblogs.com/jasonwang2y60/p/6241399.html

總結(jié)

以上是生活随笔為你收集整理的原生js实现jquery库中选择器的功能（jquery库封装一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。