对于JQuery，想必大家都很熟悉。目前，很多web项目，在实施的过程中，考虑到各浏览器原生JS API的兼容性，大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发。JQuery上手简单，也很容易学，即使是刚接触JQuery的开发人员，借助JQuery手册，也很快能在项目中使用开发。
虽然JQuery相对简单，但要全面掌握，且快速灵活的使用它也并不那么容易，它提供了很多方法，包含了网页开发的各个知识面，所以要全面掌握这些知识点，个人认为还是需要对jquery有深入的理解，对这些知识点做分类整理记忆，这样你才能面对一些JQuery代码的时候不会感到迷惑，才会知道采用何种方式实现某个特效是最佳实践，才能快速的采用JQuery来进行项目开发。
简单模拟JQuery
JQuery里的代码是出了名的刁钻，里面的奇技淫巧太多太多，如果你想通过源码来学习JQuery，没有一定的功底是很难做到的。所以下面写一个非常简单的库来模拟JQuery，方便大家理解。
总体代码
(function(window) { var doc = window.document; // -------------代码段二 ------------------ var JQuery = function(selector) { return new JClass(selector); } // --------------- 代码段三 ---------------- JQuery.html = function(obj) { if(obj && obj.nodeType === 1) { return obj.innerHTML; } } // ---------代码段一 -------------- var JClass = function(selector) { if (selector.nodeType ) { // 如果传入的是DOM元素 this.length = 1; }else if(selector.charAt(0) === '#') { //如果传入的是'#..'形式 this.length = 1; this[0] = doc.getElementById(selector.slice(1)); }else if(typeof selector === 'string') { //传入的是字符串，假设全部为html标签 ，如'div' 'p'等 var nodes = doc.getElementsByTagName(selector); this.length = nodes.length; for(var i=0,len=nodes.length;i<len;i++) { this[i] = nodes[i]; } }else { //都不是的话，就不识别咯 this.length = 0; } }; // ------------ 代码段四 -------------------- JQuery.prototype.html = function() { if(this[0]) { return JQuery.html(this[0]); } } JClass.prototype = JQuery.prototype; // ------------ 代码段五 --------------- window.$ = window.JQuery = JQuery; }(window));
首先，先看代码段一，我们创建一个javascript引用类型，可以根据该引用类型以及输入的参数创建一个实例对象，输入的参数模拟JQuery选择参数，但没有JQuery强大，支持部分类型。
我们知道，可以通过new JClass(...)来构造一个实例对象，这没问题，但是JClass也是一个函数，可以被直接调用，而直接调用并不是我们想要的结果，为了防止JClass被开发人员直接调用，我们不能将JClass暴露给开发人员，那我们只能通过代码段二方式来构造JClass实例对象。
在代码段二，我们可以将JQuery暴露给开发人员，因为无论是通过new JQuery()还是JQuery(),返回的都是JClass实例对象，这是我们要的结果。
在网页开发过程中，为了代码的复用，我们常常会提供一些工具方法来方便开发，既然JQuery是完全暴露给开发人员使用的，我们完全可以将这些工具方法作为JQuery的静态属性。具体可参照代码段三，当然，我们还可以按照这种方式添加其它的工具方法 如text,val,attr,css ........
这些工具方法确实不错。JClass实例对象（封装了DOM）也存在一些公用的方法，正好这些方法也可以借助工具方法来实现，那怎么为JClass实例对象创建公用方法呢？ 可以通过代码段四的方式实现（如果对这里不理解，请百度JS的原型继承概念） 。
最后可通过代码段五，将JQuery取个别名 $ 且作为全局变量暴露出来。然后将代码引入到HTML文件中进行测试，可参照下面代码：
<html> <head> <title>jquery-t2</title> <script src="https://www.jb51.net/article/JQ.js"></script> </head> <body> <div> <span> 点击看效果 </span> </div> <div>div文本值</div> </body> <script> alert($.html(document.getElementById('result '))); //点击看效果 alert($('span').html()); //点击看效果 alert($('#tst').html()); //div文本值 </script> </html>
JQuery的知识点分类
通过上面模拟的JQuery库，我们应该可以大概知道JQuery的主要功能：通过强大的选择器获得DOM元素，然后针将这些DOM元素的日常操作封装成对应的方法，如取值、赋值、修改、删除等，同时JQuery还为网页开发提供了一些工具类方法，如each、ajax、isArray、extend等。所以总的来说，JQuery知识点可分为三大类：
JQuery选择器
JQuery对象的操作，如DOM操作、表单操作等
JQuery的工具方法
JQuery插件编写（知识扩展）