jquery原理以及学习技巧介绍


Posted in Javascript onNovember 11, 2015

对于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对象我们要明白以下几点:

1、JQuery对象继承了JQuery原型(prototype)的所有属性和方法
2、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原理以及学习技巧介绍,内容很充实,信息量很大,需要同学耐心学习,希望从中有所收获吧。

Javascript 相关文章推荐
js中top/parent/frame概述及案例应用
Feb 06 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
基于JavaScript实现轮播图效果
Jan 02 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 #Javascript
轻松实现javascript数据双向绑定
Nov 11 #Javascript
谈谈对offsetleft兼容性的理解
Nov 11 #Javascript
详解 javascript中offsetleft属性的用法
Nov 11 #Javascript
jquery事件的ready()方法使用详解
Nov 11 #Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 #Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 #Javascript
You might like
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
php多进程应用场景实例详解
2019/07/22 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
python中的闭包函数
2018/02/09 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python3爬虫怎样构建请求header
2018/12/23 Python
python线程join方法原理解析
2020/02/11 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
python 实现两个npy档案合并
2020/07/01 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
农村婚礼证婚词
2014/01/08 职场文书
护士自我介绍信
2014/01/13 职场文书
留学推荐信怎么写
2014/01/25 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
服务理念口号
2014/06/11 职场文书
公司租房协议书范本
2014/10/08 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
七年级地理教学计划
2015/01/22 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
公司周年庆寄语
2019/06/21 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang