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