首页 > 代码库 > 简单模仿jquery的几个特性
简单模仿jquery的几个特性
使用了jquery之后，原生的javascript写的很少了，最近准备复习下，于是想到了自己写一点js来模拟jquery的几个核心特性。
先看页面代码：
1 <html> 2 <head> 3 <title>learn jquery demo</title> 4 <style> 5 .box-bg{background-color:#eee;} 6 </style> 7 <script type="text/javascript" src="jquery-learn.js"></script> 8 <!-- 9 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>10 -->11 <script type="text/javascript">12 $(function(){13 $("#btn").click(function(){14 var text=$(".box").text();15 var htmlText="<h3>" + text + "jquery" + "</h3>"16 $(".box").html(htmlText).addClass("box-bg");17 });18 });19 </script>20 </head>21 <body>22 <a id="btn" href="#">click me.</a>23 </br></br>24 25 <p class="box">Hello</p>26 <p class="box">Hello</p>27 <p class="box">Hello</p>28 </body>29 </html>
页面效果是点击超链接后设置三个p标签中的内容，然后添加一个css class使背景变成灰色，但并没有用到jquery库。
再来看下我的js代码（jquery-learn.js)：
1 function JQuery(selector){ 2 3 this.selector=selector; 4 this.domEles=[]; 5 6 //get domEles 7 if(this.selector.indexOf("#")==0){ //id selector 8 var id=this.selector.replace("#",""); 9 var ele=document.getElementById(id);10 this.domEles.push(ele);11 }else if(this.selector.indexOf(".")==0){ //class selector12 var cls=this.selector.replace(".","");13 var eles=document.getElementsByClassName(cls);14 for(var i=0;i<eles.length;i++){15 this.domEles.push(eles[i]);16 }17 }18 19 this.click=function(func){20 if (func) {21 for(var i = 0;i<this.domEles.length;i++){22 this.domEles[i].onclick=func;23 }24 }25 return this;26 }27 28 this.text=function(txt){29 if(txt){30 for(var i=0;i<this.domEles.length;i++){31 this.domEles[i].innerText=txt;32 }33 return this;34 }else{35 //jquery中好像是返回的多个元素的文本内容，这里只返回第一个匹配元素的文本内容36 if(this.domEles.length>0)37 return this.domEles[0].innerText;38 }39 }40 41 this.html=function(html){42 if(html){43 for(var i=0;i<this.domEles.length;i++){44 this.domEles[i].innerHTML=html;45 }46 return this;47 }else{48 if(this.domEles.length>0)49 return this.domEles[0].innerHTML;50 }51 }52 53 this.addClass=function(className){54 if(!className||className.length<1) throw "className";55 56 for(var i=0;i<this.domEles.length;i++){57 var strCls=this.domEles[i].attributes["class"].value;58 var classNames=strCls.split(" ");59 var objCls=[];60 for(var j=0;j<classNames.length;j++){61 if(classNames[j]==""||classNames[j]==className)continue;62 63 objCls.push(classNames[j]);64 }65 objCls.push(className);66 this.domEles[i].attributes["class"].value=http://www.mamicode.com/objCls.join(" ");67 }68 69 return this;70 }71 }72 73 function $(){74 75 if (arguments.length<1) {throw "$函数缺少参数！"};76 77 if(typeof(arguments[0])=="function"){78 window.onload=arguments[0];79 }else if(typeof(arguments[0])=="string"){80 //这里不考虑创建元素的情况81 return new JQuery(arguments[0]);82 }83 }84 85 /*86 87 1.参数重载一般是通过参数类型(typeof)和长度(arguments.length)的判断;88 2.浏览器兼容问题一般是通过方法可用性检查；89 90 91 */
做了什么：
1.注册文档加载完成的事件处理程序；
$()函数中判断参数是否是一个函数，如果是就将该函数注册给window.onload时间。
2.id、class选择器；
利用document.getElementById和document.getElementByClassName函数实现。
3.click事件绑定函数；
分别给匹配的每一个dom元素绑定onclick事件。
4.text函数获取元素文本；
获取第一个（或设置所有）匹配元素的innerText属性。
5.html函数设置元素html内容；
获取或设置所有匹配元素的innerHTML属性。
6.addClass函数为元素添加css class；
向所有匹配元素中添加一个class。
7.链式操作；
jquery对象的方法最后返回this，函数式编程：$("").html("").addClass("")。
8.隐式迭代
默认的将操作作用在匹配的所有元素上，关键在于jquery对象中有一个存储dom对象的数组：domELes。
说明：jquery的强大真的可以让我们写很少的代码来实现需要的效果，但不要用了jquery忘了javascript。
当然这里的简单实现目的只是为了展示jquery的几个特性的大致实现原理，代码当中也有很多不妥之处，这里也没有模拟jquery的dom操作、动画、浏览器兼容、Ajax等重要特性。
简单模仿jquery的几个特性