仿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库相关推荐

【jQuery】学习一下JS库——jQuery
[jQuery]学习一下JS库--jQuery jQuery 一.jQuery对象 01. 基本概念,区分DOM对象和jQuery对象 02. 两个对象之间的转换二.jQuery的使用方法关于隐式 ...
摆脱jquery,用自己的JS库实现ajax功能
可以将下面的代码保存在一个文件里如:myAjax.js,以后在项目中如果觉得jquery那一套很重,就完全可以使用自己的ajax库,不用担心性能和兼容性! /** * 创建ajax请求对象 * @ ...
UI框架-JQuery Smart / 淘宝JS库 KISSY UI
JQuery Smart UI 简介(五) - 框架设计[前篇](前台UI层架构) JQuery SmartUI 2.0 方案启动 http://docs.kissyui.com/ KISSY U ...
50 jQuery拷贝对象与多库共存
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery拷贝对象如果想要把某个对象拷贝(合并)给另外一个对象使用,此时使用$.e ...
jQuery(JS库) | 一文带你掌握jQuery的使用
目录一:开篇基础 1. 为什么使用 jQuery 2. DOM 对象 3. JS对象和 jQuery 对象 4. 获取 jQuery 5. 牛刀小试 6. DOM 对象和 jQuery 对象二:选 ...
jQuery避免$符和其他JS库冲突的方法对比
jQuery避免$符和其他JS库冲突的方法对比 1.如果jquery库在第三方库之后引用.这个时候jquery库会占用$. 解决办法:剔除$符号的使用权. <script type=" ...
贡献一个连jquery都觉的大的时候可以用的 js库
在一些很小的项目里,连用jquery都还觉的大的时候,你就可以用我的这个库了. 一个库或者框架,是应需求而生的,当你的项目实际上只需要简单的一个好用的选择器一个ajax 封装一个兼容的事件封装的时 ...
jQuery库与其他JS库冲突的解决办法
关键字: javascript 现在的js库很多,而且各有所长.像我,就比较喜欢jQuery,但同时也会使用一下其他的js库,如YUI,DWR什么的.但是它们却时不时地相互闹些小矛盾,真是让人头痛.究 ...
JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...

仿jquery 编写自己的js库

仿jquery 编写自己的js库相关推荐

最新文章

热门文章