jquery原理以及学习技巧介绍

2020-05-29 07:14:41易采站长站整理

在代码段二,我们可以将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源码分析系统