使用了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等重要特性。