JQuery原理介绍及学习方法
前言
对于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="JQ.js"></script>
</head>
<body>
<div style="margin:10px 10px;">
<span id='result'>
点击看效果
</span>
</div>
<div id='tst'>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插件编写（知识扩展）
JQuery太流行了，网上的资料太多太多，以致于很多初学者根本不知道从哪学起，这里看一篇博客，那里翻一翻源码，收集了大量的资料，最后发现根本没时间学习，即使花了大量的时间学习，学习到的JQuery也成不了一个体系，到最后全部忘记了。开发的时候又只能去翻手册，一直翻手册能写出好的代码么？不可能吧。
下面我分享一下个人认为比较好的资料供初学者一步一步学习。
JQuery入门(书籍+一篇博客)
锋利的JQuery（第二版）
JQuery设计思想
JQuery深入学习（深入学习JQuery和javascript很好的资料）
JQuery源码分析系统
JQuery的一些概念
学习永远都不是记忆，记忆的东西迟早会被遗忘。真正要学习一门技术，最基本的原则就是要理解它。学习JQuery也是，在学习JQuery的知识点时，你首先要理解一些概念来辅助你理解这些知识点。 JQuery中的概念主要有这三个： JQuery()、JQuery对象和DOM对象。
先说DOM对象，这个很简单，它定义了访问HTML文档对象的一套属性、方法和事件，没有JQuery前，我们通常直接操作DOM，比较熟悉的API有getElementById 、GetElementByTagName等。
JQuery，它在JQuery中有个别名 $ 。通过上面章节的模拟代码（对应模拟代码中的JQuery)可知，其实就是一个函数，说得更细致点就是JQuery对象的工厂方法，它可以根据不同的入参来构造JQuery对象，如：
字符串表达式。如 $('span') 、$('span .class')、$('#id')等
HTML 代码片段。如 $('<span>text</span>') 等
DOM元素。 如$(dom) //假设 var dom = document.getElementById('id');
JS Function 。 如 $(function(...) { ... } ); 一般对象或数组。如 { ｝ 、[ ... ]等
JQuery除了能创建JQuery对象的同时，JQuery自身也有很多静态方法，也可以称为工具方法，如 each、ajax、trim等。这些工具方法不仅在网页设计时常常会被用到，而且也会被当作工具方法用来实现JQuery对象的原型方法。
JQuery对象，非常重要的一个概念，类似于模拟代码中的JClass实例，通常是通过JQuery构造出的实例。在JQuery中，我们常常见到的JQuery对象是这样的： $('#id') 、$('div')等。关于JQuery对象我们要明白以下几点：
JQuery对象继承了JQuery原型(prototype）的所有属性和方法
JQuery对象不是数组，但是采用了类似数组的结构来存储元素，而且存储的元素是通过选择器获取得到的DOM对象。参照上面章节的模拟代码(JClass实例对象），JQuery对象有个length属性，表示当前对象里存储DOM对象的个数，而这些通过选择获得的DOM对象，是采用下标为0、1、2、3 ... 作为属性名来进行存储的。所以，根据以上特性，我们完全可以通过下面这种方式来访问元素：
var objs = $('div');
for(var i=0,len=objs.length;i<length;i++) {
var o = objs[i]; //获取dom元素
... ...
}
综合来说，JQuery、JQuery对象、DOM对象三者之间的关系是： JQuery是个工厂方法，用来构造JQuery对象； JQuery对象是个类数组对象，里面存储了DOM对象；
理解了三者之间的关系，我们在理解下面知识点时，相对来说也就比较容易了：
关于过滤选择器如何理解？ 如$('div:first') 。
如果理解了JQuery对象的内部结构，理解JQuery的过滤选择器就很容易了，如 :first 其实就是取JQuery对象属性为'0'的对象（封装成JQuery对象），同理 :last取的是属性为 length-1 的元素，:eq(index)取的是属性为index的元素。
在JQuery中，如何验证某个元素是否为空？
var $o = $('div .class');
if($ == null) { // 错误的做法
//什么都没找到
......
}
//正确的做法
if($o.html() == null) {
//什么都没找到
... ...
}
//正确的做法
if($o.length) {
//什么都没找到
... ...
}
JQuery对象和DOM对象如何转换？
var dom = document.getElementById('id');
// DOM对象转换成JQuery对象
var $dom = $(dom); // 参照JQuery对象的构造方式
// 将JQuery对象转换成DOM对象
for(var i=0,len=$dom.length;i<length;i++) {
var o = $dom[i]; //获取dom元素
... ...
}
总结
关于JQuery，上手虽然简单，但如果要高效快速的使用开发，还是需要好好理解下JQuery的。以上只是个人学习过程中的一些感悟和整理，建议各位在学习时也按照自己的思维习惯形成一套自己的知识体系，一来便于日后的开发，二来也便于查阅别人的代码。最后附注一些有意思的小问题，各位有兴趣就思考下吧。
问题一. 你觉得下面哪种方式代码好一点？为什么？
// 方式一
var $text = $("#text");
var $ts = $text.text();
//方式二
var $text = $("#text");
var $ts = $.text($text);
问题二. 下面代码中的this是什么呢？大概实现原理有什么？
全选复制放进笔记
$('#box').click(function(){
var obj = this;
... ...
}
对于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="JQ.js"></script>
</head>
<body>
<div style="margin:10px 10px;">
<span id='result'>
点击看效果
</span>
</div>
<div id='tst'>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插件编写（知识扩展）
JQuery太流行了，网上的资料太多太多，以致于很多初学者根本不知道从哪学起，这里看一篇博客，那里翻一翻源码，收集了大量的资料，最后发现根本没时间学习，即使花了大量的时间学习，学习到的JQuery也成不了一个体系，到最后全部忘记了。开发的时候又只能去翻手册，一直翻手册能写出好的代码么？不可能吧。
下面我分享一下个人认为比较好的资料供初学者一步一步学习。
JQuery入门(书籍+一篇博客)
锋利的JQuery（第二版）
JQuery设计思想
JQuery深入学习（深入学习JQuery和javascript很好的资料）
JQuery源码分析系统
JQuery的一些概念
学习永远都不是记忆，记忆的东西迟早会被遗忘。真正要学习一门技术，最基本的原则就是要理解它。学习JQuery也是，在学习JQuery的知识点时，你首先要理解一些概念来辅助你理解这些知识点。 JQuery中的概念主要有这三个： JQuery()、JQuery对象和DOM对象。
先说DOM对象，这个很简单，它定义了访问HTML文档对象的一套属性、方法和事件，没有JQuery前，我们通常直接操作DOM，比较熟悉的API有getElementById 、GetElementByTagName等。
JQuery，它在JQuery中有个别名 $ 。通过上面章节的模拟代码（对应模拟代码中的JQuery)可知，其实就是一个函数，说得更细致点就是JQuery对象的工厂方法，它可以根据不同的入参来构造JQuery对象，如：
字符串表达式。如 $('span') 、$('span .class')、$('#id')等
HTML 代码片段。如 $('<span>text</span>') 等
DOM元素。 如$(dom) //假设 var dom = document.getElementById('id');
JS Function 。 如 $(function(...) { ... } ); 一般对象或数组。如 { ｝ 、[ ... ]等
JQuery除了能创建JQuery对象的同时，JQuery自身也有很多静态方法，也可以称为工具方法，如 each、ajax、trim等。这些工具方法不仅在网页设计时常常会被用到，而且也会被当作工具方法用来实现JQuery对象的原型方法。
JQuery对象，非常重要的一个概念，类似于模拟代码中的JClass实例，通常是通过JQuery构造出的实例。在JQuery中，我们常常见到的JQuery对象是这样的： $('#id') 、$('div')等。关于JQuery对象我们要明白以下几点：
JQuery对象继承了JQuery原型(prototype）的所有属性和方法
JQuery对象不是数组，但是采用了类似数组的结构来存储元素，而且存储的元素是通过选择器获取得到的DOM对象。参照上面章节的模拟代码(JClass实例对象），JQuery对象有个length属性，表示当前对象里存储DOM对象的个数，而这些通过选择获得的DOM对象，是采用下标为0、1、2、3 ... 作为属性名来进行存储的。所以，根据以上特性，我们完全可以通过下面这种方式来访问元素：
var objs = $('div');
for(var i=0,len=objs.length;i<length;i++) {
var o = objs[i]; //获取dom元素
... ...
}
综合来说，JQuery、JQuery对象、DOM对象三者之间的关系是： JQuery是个工厂方法，用来构造JQuery对象； JQuery对象是个类数组对象，里面存储了DOM对象；
理解了三者之间的关系，我们在理解下面知识点时，相对来说也就比较容易了：
关于过滤选择器如何理解？ 如$('div:first') 。
如果理解了JQuery对象的内部结构，理解JQuery的过滤选择器就很容易了，如 :first 其实就是取JQuery对象属性为'0'的对象（封装成JQuery对象），同理 :last取的是属性为 length-1 的元素，:eq(index)取的是属性为index的元素。
在JQuery中，如何验证某个元素是否为空？
var $o = $('div .class');
if($ == null) { // 错误的做法
//什么都没找到
......
}
//正确的做法
if($o.html() == null) {
//什么都没找到
... ...
}
//正确的做法
if($o.length) {
//什么都没找到
... ...
}
JQuery对象和DOM对象如何转换？
var dom = document.getElementById('id');
// DOM对象转换成JQuery对象
var $dom = $(dom); // 参照JQuery对象的构造方式
// 将JQuery对象转换成DOM对象
for(var i=0,len=$dom.length;i<length;i++) {
var o = $dom[i]; //获取dom元素
... ...
}
总结
关于JQuery，上手虽然简单，但如果要高效快速的使用开发，还是需要好好理解下JQuery的。以上只是个人学习过程中的一些感悟和整理，建议各位在学习时也按照自己的思维习惯形成一套自己的知识体系，一来便于日后的开发，二来也便于查阅别人的代码。最后附注一些有意思的小问题，各位有兴趣就思考下吧。
问题一. 你觉得下面哪种方式代码好一点？为什么？
// 方式一
var $text = $("#text");
var $ts = $text.text();
//方式二
var $text = $("#text");
var $ts = $.text($text);
问题二. 下面代码中的this是什么呢？大概实现原理有什么？
全选复制放进笔记
$('#box').click(function(){
var obj = this;
... ...
}
热门话题 · · · · · · ( 去话题广场 )
- 维系精神生活的北京角落 1174次浏览
- 我在网络上感受到的陌生人善意 1374次浏览
- 身边的科普现场 新话题
- 羞耻的社死瞬间 8325次浏览
- 一人一杯一口入魂的夏日特饮 1.5万次浏览
- 解锁我的夏日旅行足迹地图 新话题