JQuery原理介绍及学习方法_H5之家 - 中国HTML5教程资源分享第一站

jQuery技术

JQuery原理介绍及学习方法

字号+ 作者：H5之家来源：H5之家 2015-11-04 08:46 我要评论( )

JQuery原理介绍及学习方法,JavaScript,UDN开发者论坛,专注企业开发的IT技术社区

cat77

588发布主题

712回复的帖子

4041积分

威望

活力

U币

发消息

当前离线

楼主

cat77

588

主题

712

帖子

4041

积分

楼主

发表于 4 天前

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文件中进行测试，可参照下面代码：‘

　

JavaScript 开发者 IT社区用友 ERP 移动开

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章

7个有用的jQuery小技巧

2016-02-26 13:02
全面详细的jQuery常见开发技巧手册

2016-02-26 10:02
jQuery Touchwipe Plugin 轻量级的手机触摸特效插件（javascript

2016-02-16 17:04
javascript与jQuery的那些事

2016-01-19 12:01

网友点评

精彩导读

吾牛工作室

Tab页界面，用jQuery及Ajax技术实现

深入学习jQuery Validate表单验证

jQuery验证插件 Validate详解

JQuery学习笔记 - 小孩不笨

热门资讯

关注我们

关注微信公众号，了解最新精彩内容

>