仿jquery 编写自己的js库

来源：互联网发布：nginx 密码认证编辑：程序博客网时间：2024/09/21 08:57

先思考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 '.'://class                    this.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>

0 0