原生封裝jq

//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 chrome
if(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/g
var 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開(kāi)始是[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锌仅、last
switch(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開(kāi)始循環(huán)的
case 'event':
for(var j=0;j<aRes.length;j+=2){
aChild.push(aRes[j]);
}
break;
//如果是odd的和event不同的只是從第1項(xiàng)開(kāi)始循環(huán)
case 'odd':
for(var j=1;j<aRes.length;j+=2){
aChild.push(aRes[j]);
}
break;
//如果是first,則將aRes[0]推入aChild
case '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);
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末贱傀,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子伊脓,更是在濱河造成了極大的恐慌府寒,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,451評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異株搔,居然都是意外死亡剖淀,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門纤房,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)纵隔,“玉大人,你說(shuō)我怎么就攤上這事帆卓【揠” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 164,782評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵剑令,是天一觀的道長(zhǎng)糊啡。 經(jīng)常有香客問(wèn)我,道長(zhǎng)吁津,這世上最難降的妖魔是什么棚蓄? 我笑而不...
    開(kāi)封第一講書人閱讀 58,709評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮碍脏,結(jié)果婚禮上梭依,老公的妹妹穿的比我還像新娘。我一直安慰自己典尾,他們只是感情好役拴,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,733評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著钾埂,像睡著了一般河闰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上褥紫,一...
    開(kāi)封第一講書人閱讀 51,578評(píng)論 1 305
  • 那天姜性,我揣著相機(jī)與錄音,去河邊找鬼髓考。 笑死部念,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的氨菇。 我是一名探鬼主播儡炼,決...
    沈念sama閱讀 40,320評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼门驾!你這毒婦竟也來(lái)了射赛?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,241評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤奶是,失蹤者是張志新(化名)和其女友劉穎楣责,沒(méi)想到半個(gè)月后竣灌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,686評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡秆麸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,878評(píng)論 3 336
  • 正文 我和宋清朗相戀三年初嘹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沮趣。...
    茶點(diǎn)故事閱讀 39,992評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡屯烦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出房铭,到底是詐尸還是另有隱情驻龟,我是刑警寧澤,帶...
    沈念sama閱讀 35,715評(píng)論 5 346
  • 正文 年R本政府宣布缸匪,位于F島的核電站翁狐,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏凌蔬。R本人自食惡果不足惜露懒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,336評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望砂心。 院中可真熱鬧懈词,春花似錦、人聲如沸辩诞。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,912評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)译暂。三九已至荞怒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間秧秉,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,040評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工衰抑, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留象迎,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,173評(píng)論 3 370
  • 正文 我出身青樓呛踊,卻偏偏與公主長(zhǎng)得像砾淌,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子谭网,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,947評(píng)論 2 355

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