仿jquery 编写自己的js库
生活随笔
收集整理的這篇文章主要介紹了
仿jquery 编写自己的js库
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
先思考alert(typeof $)的結(jié)果中的$，它是一個對象，也是一個函數(shù)。
所以美元符字面上是jquery，其實(shí)就是一個jq對象，里面可以接受函數(shù)，字符串（#xxx,.xxx,xxx... 分別表示ID、樣式類名和標(biāo)簽名稱），還有一種是對象（比如this）。
直接上代碼（mJS文件）：
window.mjs = null; //創(chuàng)建全局對象，整個window就一個對象不需要分頁面創(chuàng)建對象 //可重復(fù)調(diào)用的加載函數(shù) function myAddEvent(obj,sEv,fn){if(obj.attachEvent){//如果加上函數(shù)，那么直接監(jiān)聽，否則添加函數(shù)obj.attachEvent('on' + sEv,fn);}else{obj.addEventListener(sEv,fn,false);} }//class選擇器調(diào)用函數(shù) function getByClass(oParent,sClass){var aEle=oParent.getElementsByTagName('*');//選擇父元素的所有元素var aResult=[];var re=new RegExp('\\b'+sClass+'\\b','i');//正則邊界var i=0;for(i=0;i<aEle.length;i++){if(re.test(aEle[i].className)){aResult.push(aEle[i]);}}return aResult; }//定義mJS對象 function mJS(vArg){//參數(shù)是變體變量this.elements=[];//選擇器選擇的元素扔到這個數(shù)組中switch(typeof vArg){//如果參數(shù)是函數(shù)case 'function':myAddEvent(window,'load',vArg);break;//如果參數(shù)是字符串case 'string':switch(vArg.charAt(0)){case '#'://id選擇器參數(shù)應(yīng)該為#號之后的字符段var obj=document.getElementById(vArg.substring(1));this.elements.push(obj);break;case '.'://classthis.elements=getByClass(document,vArg.substring(1));break;default://標(biāo)簽this.elements=document.getElementsByTagName(vArg);}break;//如果參數(shù)是對象。case 'object':this.elements.push(vArg);}if(window.mjs == null){window.mjs = new mJS(vArg); }return window.mjs; }//mjs對象最終 指向的是mJS //對選擇器函數(shù)綁定click事件 mJS.prototype.click=function(fn){var i=0;//對于返回器數(shù)組的內(nèi)容for(i=0;i<this.elements.length;i++){myAddEvent(this.elements[i],'click',fn);} }function $m(vArg){if(window.mjs == null){window.mjs = new mJS(vArg); }return window.mjs; }
HTML調(diào)用實(shí)例：
<!DOCTYPE html> <html> <head><title>lxl</title><script type="text/javascript" src="./mJS.js">$m(function(){$m("p").click(function(){alert("點(diǎn)擊我了哈");});});</script><link rel="stylesheet" type="text/css" href="demo.css"> </head> <body><p>點(diǎn)擊我</p></body> </html>總結(jié)
以上是生活随笔為你收集整理的仿jquery 编写自己的js库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jvm 种类
- 下一篇： android 异步回调中操作UI线程，