JQuery原理介绍及学习方法
2015-10-29 17:23
633 查看
前言
对于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拖放排序插件DDSort
- jQuery实现瀑布流布局详解(PC和移动端)
- jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则
- 利用jquery的jsonp实现的必应搜索
- jQuery实现切换页面过渡动画效果
- jQuery EasyUI中window/dialog 窗口折叠和展开方法(显示)
- jquery 集合操作
- jQuery.i18n.properties实现前端国际化
- jquery delay()介绍及使用指南
- jquery expand
- jQuery on 方法对于网页元素动态绑定好处
- jQuery-easyUI的使用:easyloader的使用解析
- jQuery-easyUI的使用:基本组件的使用、使用组件的两种方式
- JQuery的初学笔记——和原生JS的区别
- jQuery选择参数中带有动态值的元素
- Jquery树插件zTree入门教程
- Eclipse去掉jquery的红叉
- 很容易学习的JQuery库 : (五) HTML
- js jquery的加载问题
- jQuery与ajax 基础运用