标签：style blog http color io os ar 使用 java
使用了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 selector 12 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=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等重要特性。
标签：style blog http color io os ar 使用 java
原文地址：http://www.cnblogs.com/initial/p/4033229.html
