Jquery源码分析---构建jQuery对象

2.1、jQuery的设计理念

使用jQuery之前,我们都会问jQuery是什么?jQuery是一个类库,和 prototype,mootools等类库一样,为Web的Js开发提供辅助功能。那为什么要选 用jQuery呢?在jQuery出现之前,Prototype,YUI都是很成熟的Js的框架,而且 是各有各的特点。为什么要抛弃它们,而使用后起之秀的jQuery,它有什么优秀 的特性吸引开发人员呢?

回答这个问题,我们得明白jQuery的设计理念。回忆或想象一下,我们在web 开发中是如何使用JS?绝大多数时间都是采用getElementById在Dom文档中找到 Dom元素,然后取值或设定值,采用innerHTML取其内容或设定其内容,或进行事 件的监听(如click),在控制样式方面,我们会进行height,width,display等的 改变,达到视觉上的效果,对于Ajax方面,也是取到数据在页面的某元素里面去 添充内容。

综之,我们就是在对Dom元素在进行操作。这个元素可能是一个或是多个。这 个元素可能是document,window或Dom元素。这样我们的任务就是二大部分,一 是找Dom元素,二是对Dom元素进行操作。

对于用得熟练一点,不管是采用如getElementById这样的直接查找方式还是 采用如Element.lastChild这类的间接查找方式不是很难的,对于Dom元素,Dom 的操作方面也是很丰富,也不是很难使用?那么要类库做什么用呢?最难的一个 问题就是浏览器的兼容的问题。所有的JS框架都要解决这一个问题,同时简化JS 的本身自带的操作。

Prototype可以说是开创了Js类库的先河,给我们耳目一新的感觉。它解决大 部分的浏览器的兼容的问题。同时简化了原始函数名长难于记忆的经常书写出的 错的问题(采用$(xx)代替getElementById),提供了Ajax的访问方式,扩展了 Array,Object,Function,Event等JS原生对象。

但是这些还是不能满足开发的需要,比如在Dom树中寻找dom元素,仅仅只能 是通过元素的ID,但是我们想要更方便的查找方法,同时还希望能有一个统一的 入口,不要太泛,学习曲线过高或难于使用。

Jquery就是从这里出发,把所有一切都统一在jQuery对象中。使用jQuery就 是使用jQuery对象。其实jQuery开创性的工作就是如其名一样:query。它强大 的查找功能令所有的框架都黯然失色。

jQuery实质就是一个查询器。在查询器的基础还提供对查找到的元素进行操 作的功能。这样说来jQuery就是查询和操作的统一。查询是入口,操作是结果。

jQuery在实现上也可以分成两大部分,一部分是jQuery的静态方法,也可以 称作实用方法或工具方法,通过jQuery.xxx()的jQuery命名空间直接引用。第二 部分是jQuery的实例方法,通过jQuery(xx)或$(xx)来生成jQuery实例,然后通 过这个实例来引用的方法。这部分的方法大多数是从采用静态方法代理来完成功 能。真正的功能性的操作都在jQuery的静态方法中实现。

这些功能细分起来,可以分成以下几个部分:

1、Selector,查找元素。这个查找不但包含基于CSS1~CSS3的CSS Selector 功能,还包含其对直接查找或间接查找而扩展的一些功能。

2、Dom元素的属性操作。Dom元素可以看作html的标签,对于属性的操作就是 对于标签的属性进行操作。这个属性操作包含增加,修改,删除,取值等。

3、Dom元素的CSS样式的操作。CSS是控制页面的显示的效果。对CSS的操作那 就得包含高度,宽度,display等这些常用的CSS的功能。

4、Ajax的操作。Ajax的功能就是异步从服务器取数据然后进行相关操作。

5、Event的操作。对Event的兼容做了统一的处理。

6、动画(Fx)的操作。可以看作是CSS样式上的扩展。

时间: 2024-10-20 12:52:25

Jquery源码分析---构建jQuery对象的相关文章

Jquery源码分析---构建Jquery的Dom元素

在jQuery.fn.init函数中,最终的结果是把Dom元素放到jQuery对象的集合, 我们可以传入单个Dom元素或Dom元素集合直接把其存到jQuery对象的集合.但是 如果第一个参数是string类型的话,如#id就要把Dom文档树去查找.对于html的 片断就得生成Dom元素.我们再进一步,传入的单个Dom元素或Dom元素集合参数 又是从那里来的?我们可以通过Dom元素的直接或间接的查找元素的方式. 这一部分首先分析如何从html的片断就得生成Dom元素,然后分析jQuery 是如何通

jQuery源码分析之jQuery.fn.each与jQuery.each用法_jquery

本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法.分享给大家供大家参考.具体分析如下: 先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 复制代码 代码如下: $('div').each(function(index, elem){       $(this).addClass('red'); } }); 上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的 复制代码 代码如下: j

jQuery源码分析之jQuery中的循环技巧详解_jquery

jQuery的源码中有很多值得学习借鉴的技巧,本文即收集了jQuery中出现的各种遍历技巧和场景.具体分析如下: // 简单的for-in(事件) for ( type in events ) { } // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常明显,因为每次访问HTMLCollection的属性,HTMLCollection都会内部匹配一次所有的节点 for ( var j = 0, l = ha

jQuery源码分析-03构造jQuery对象-工具函数_jquery

作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪个模块感兴趣的,建议优先分析的,可以告诉我,一起学习. 3.4 其他静态工具函数

Jquery源码分析---导言

jQuery是一个非常优秀的JS库,与Prototype,YUI,Mootools等众多的Js类库 相比,它剑走偏锋,从web开发的实用角度出发,抛除了其它Lib中一些中看但不 实用的东西,为开发者提供了优美短小而精悍的类库.其使用简单,文档丰富, 而且性能高效,能极大地提高web系统的开发效率.因此可以说是web应用开发中 最佳的Js辅助类库之一.大部分开发者正在抛弃Prototype,而选择Jquery做为 他们进行web开发的JS库. 如是开发人员仅仅只知道文档中的简单的使用 方法,却不明

Jquery源码分析---概述

jQuery是一个非常优秀的JS库,与Prototype,YUI,Mootools等众多的Js类库 相比,它剑走偏锋,从web开发实用的角度出发,抛除了其它Lib中一些不实用的 东西,为开发者提供了短小精悍的类库.其短小精悍,使用简单方便,性能高效 ,能极大地提高开发效率,是开发web应用的最佳的辅助工具之一.因此大部分 开发者在抛弃Prototype而选择Jquery来进行web开发. 一些开发人员在使用jquery时,由于仅仅只知道Jquery文档中的使用方法, 不明白Jquery的运行原理

jQuery源码分析-01总体架构分析_jquery

1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: 复制代码 代码如下: (function( window, undefined ) { // jquery code })(window); 1. 这是一个自调用匿名函数.什么东东呢?在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2. 为什么要创建这样一个"自调用匿名函数"呢? 通过定义一个匿名函数,创建了一个"

jQuery 源码分析 CSS 操作原理

jquery.fn.css获取当前jQuery所匹配的元素中第一个元素的属性值[$(-).css(cssName),注意这个cssName可以是数组]或给当前jQuery所匹配的每个元素设置样式值[$(-).css(cssname,value) / $(-).css(obj)]; 可以看见函数内部直接调用了jquery.access来处理.access将当前多个元素组成的jQuery对象所匹配的元素分解成单一元素逐个调用第二个参数中的回调function( elem, name, value )

jQuery源码分析之Callbacks详解

 这篇文章主要分为以下知识:什么是Callbacks.Callbacks模型.基本模块实现.once和auto(memory).源码和源码下载,十分的细致全面,这里推荐给大家,有需要的小伙伴参考下吧.     代码的本质突出顺序.有序这一概念,尤其在javascript--毕竟javascript是单线程引擎. javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是需要有序的执行.优秀代码常常 把函数切割成各自的模块,然后在某一特定条件下执行,既然这些函