![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jQuery
文章平均质量分 84
chen_hua89
专注web前端
展开
-
jQuery-1.9.1源码分析系列完毕目录整理
jQuery 1.9.1源码分析已经完毕。目录如下jQuery-1.9.1源码分析系列(一)整体架构jQuery-1.9.1源码分析系列(一)整体架构续jQuery-1.9.1源码分析系列(二)jQuery选择器jQuery-1.9.1源码分析系列(二)jQuery选择器续1jQuery-1.9.1源码分析系列(二)jQuery选择器续2——筛选jQuery-1.9.1源码原创 2016-03-08 09:25:10 · 416 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——总结与性能分析
Sizzle引擎的主体部分已经分析完毕了,今天为这部分划一个句号。a. Sizzle解析流程总结 是时候该做一个总结了。Sizzle解析的流程已经一目了然了。 1.选择器进入Sizzle( selector, context, results, seed )函数,先对选择器不符合要求的(比如没有选择器、选择器不为字符串、上下文环境context不是节点元素且不是document原创 2016-03-08 09:23:18 · 268 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——一些有用的Sizzle API
说一下Sizzle中零碎的API。这些API有的被jQuery接管,直接使用jQuery.xxx就可以使用,有的没有被接管,如果要在jQuery中使用,使用方法是jQuery.find.xxx。 具体看一下有哪些API//筛选出elements满足CSS选择器表达式expr的节点【最终返回的是节点数组】Sizzle.matches = function( expr, elements原创 2016-03-08 09:23:23 · 514 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(四) 缓存系统
先前在分析Sizzle的时候分析到Sizzle有自己的缓存机制,点击这里查看。不过Sizzle的缓存只是对内使用的(内部自己存,自己取)。接下来分析jQuery可以对外使用的缓存(可存可取)。 首先需要明白jQuery缓存需要解决什么问题,实现它的意义? jQuery缓存要解决的是在往DOM节点添加数据(这些数据往往和该DOM节点紧密相关),但是给DOM添加数据或自定义属性可能起内存泄原创 2016-03-08 09:23:27 · 451 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(五) 回调对象
jQuery.Callbacks()提供的回调函数队列管理本来是延时回调处理的一部分,但是后面将其独立出来作为一个模块。jQuery就是这样,各个模块间的代码耦合度是处理的比较好的,值得学习。虽然是从延时回调处理中独立出来的,但是它的功能非常强大,提供了一种强大的方法来管理回调函数队列。 大家都明白封装函数的目的:去耦合与简化操作。 通常情况下函数队列的处理方式//执行函数原创 2016-03-08 09:23:30 · 383 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(六) 延时对象
首先我们需要明白延时对象有什么用? 第一个作用,解决时序以及动态添加执行函数的问题。function a(){alert(1)};function b(){alert(2)};function c(){alert(3)};a();setTimeout(function(){b();},0);c(); 很明显函数执行顺序是a->c->b,而不是按照函数添加原创 2016-03-08 09:23:34 · 281 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(六) 延时对象续——辅助函数jQuery.when
$.when的说明 描述: 提供一种方法来执行一个或多个对象的回调函数,返回这些对象的延时(Deferred)对象。 说明(结合实例和源码): 如果你不传递任何参数, jQuery.when()将返回一个resolved(解决)状态的promise对象。 如果向jQuery.when()传入一个参数 , 并且它不是一个Deferred或Promise对象, 那么它会被当作原创 2016-03-08 09:23:37 · 320 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(七) 钩子(hooks)机制及浏览器兼容
处理浏览器兼容问题实际上不是jQuery的精髓,毕竟让技术员想方设法取弥补浏览器的过错从而使得代码乱七八糟不是个好事。一些特殊情况的处理,完全实在浪费浏览器的性能;突兀的兼容解决使得的代码看起来既不美观也也不能对前端技术有任何提升。但是不管怎么说,只要不同的浏览器存在,就有可能出现兼容性问题,我们还必须去解决。比较好的是jQuery提供了一些比较优雅的浏览器兼容方案。 在处理浏览器兼容问题的原创 2016-03-08 09:23:41 · 644 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(七) 钩子(hooks)机制及浏览器兼容续
前面一章分析了jQuery.support、钩子原理和属性钩子。这一章主要分析CSS钩子。 b. css操作的钩子 CSS钩子种类: cssHooks cssNumber cssProps jQuery.cssHooks的对象 不过cssHooks中的set函数的作用有些不同,set函数并没有真正的设置相应的值,而是修正要设置到CSS中的值。获取到原创 2016-03-08 09:23:44 · 734 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——编译原理续(伪类选择器“PSEUDO”和子伪类选择器"CHILD"原子选择器详解)
我们知道Sizzle支持的伪类有有很多,为了便于处理被Sizzle分成了两类:单个单词的伪类“PSEUDO”和多个词语使用“-”链接的“CHILD”。我们下面一一分析。 先看"PSEUDO":a. Sizzle的伪类选择器"PSEUDO" 我们先整体看一下有哪些个伪类 伪类生成匹配器的源码如下:matcher = Expr.filter[ to原创 2016-03-08 09:23:14 · 765 阅读 · 1 评论 -
jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——编译原理续(伪类分割器setMatcher)
我也看过很多Sizzle源码分析的博客,伪类分割器setMatcher介绍的比较少。但是本人认为这是一个比较重要的难点,我第一遍看源码的时候也忽略了。现在回来看第二遍,一定要把这个东东弄懂。 a. 伪类分割器setMatcher 伪类分隔器对伪类选择器进行分隔处理,返回处理后的最终匹配器。 伪类和其他原子匹配器有些不同,伪类具有强制的位置关系,特别是和别的选择器并列的时候原创 2016-03-08 09:23:09 · 542 阅读 · 1 评论 -
jQuery-1.9.1源码分析系列(一)整体架构
不废话,直接上关键。这个系列中有好些直接借用别人的资料,我将他们整合在自认为比较合理的地方。所以在此先谢谢那些前辈。注意:后续系列中jQuery实例多用$(...)来表示1. 初始化与链式调用基础 jQuery之所以能够链式调用在于每次调用返回来jQuery本身。实现关键代码如下。 jQuery = function(selector,context){原创 2016-03-08 09:22:40 · 712 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(一)整体架构续
这一节主要是jQuery中最基础的几个东东 2. jQuery的几个基础属性和函数a. jQuery.noConflict函数详解 在jQuery初始化的时候保存了外部的$和jQuery _jQuery = window.jQuery,_$ = window.$,noConflict函数 noConflict: function原创 2016-03-08 09:22:42 · 334 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(二)jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(""), $(null), $(undefined), $(false)原创 2016-03-08 09:22:47 · 351 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(二)jQuery选择器续1
在分析之前说一点题外话。ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对象;documentElement是Document对象的属性,返回的是文档根节点 对于HTML文档来说,documentElement是标签对应的Element对象,ownerDocu原创 2016-03-08 09:22:49 · 463 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(二)jQuery选择器续2——筛选
前面分析了选择器的结构和几个解析函数,接下来分析jQuery对象的伪类选择器。这里所谓的jQuery对象的伪类选择器就是从已有的jQuery对象(元素集合)中筛选出指定的集合出来。4. jQuery的伪类选择函数 先混个脸熟,把所有能找到的jQuery的伪类选择器都列出来。 jQuery.fn.eq(函数用于获取当前jQuery对象所匹配的元素中指定索引的元素,并返原创 2016-03-08 09:22:54 · 396 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——词法解析
jQuery源码9600多行,而Sizzle引擎就独占近2000行,占了1/5。Sizzle引擎、jQuery事件机制、ajax是整个jQuery的核心,也是jQuery技术精华的体现。里面的有些策略确实很值得学习,先膜拜之,然后细细学习。 在学习Sizzle引擎之前我们先准备一点知识,和先了解Sizzle引擎的一点工作原理。 chua的测试用例原创 2016-03-08 09:22:56 · 415 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——词法解析
jQuery源码9600多行,而Sizzle引擎就独占近2000行,占了1/5。Sizzle引擎、jQuery事件机制、ajax是整个jQuery的核心,也是jQuery技术精华的体现。里面的有些策略确实很值得学习,先膜拜之,然后细细学习。 在学习Sizzle引擎之前我们先准备一点知识,和先了解Sizzle引擎的一点工作原理。 chua的测试用例原创 2016-03-08 09:23:00 · 406 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——编译原理
这一节要分析的东东比较复杂,篇幅会比较大,也不知道我描述后能不能让人看明白。这部分的源码我第一次看的时候也比较吃力,现在重头看一遍,再分析一遍,看能否查缺补漏。 看这一部分的源码需要有一个完整的概念后去看才比较容易看懂,所以我们先把整个编译的原理阐述以后再进行解析。 还是以上次的那个CSS选择器为例:#chua > a + .group labe[for="age"]。按照我们正常解析原创 2016-03-08 09:23:05 · 363 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(八) 属性操作
jQuery的属性操作主要包括 jQuery.fn.val jQuery.fn.attr jQuery.fn.removeAttr jQuery.fn.prop jQuery.fn.removeProp jQuery.fn.addClass jQuery.fn.removeClass jQuery.fn.toggleClass 接下来一原创 2016-03-08 09:23:46 · 447 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(九) CSS操作
jquery.fn.css获取当前jQuery所匹配的元素中第一个元素的属性值【$(…).css(cssName),注意这个cssName可以是数组】或给当前jQuery所匹配的每个元素设置样式值【$(…).css(cssname,value) / $(…).css(obj)】; 可以看见函数内部直接调用了jquery.access来处理。access将当前多个元素组成的jQuery对象所匹原创 2016-03-08 09:23:50 · 438 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十四) 一些jQuery工具
为了给下一章分析动画处理做准备,先来看一下一些工具。其中队列工具在动画处理中被经常使用。jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback ))(获取或设置当前匹配元素上待执行的函数队列. 如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列;设置队列(替换队列、追加函数原创 2016-03-08 09:24:42 · 240 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十五) 动画处理
首先需要有队列(queue)的基本知识。见上一章。 a.动画入口jQuery.fn.animate函数执行流程详解 先根据参数调用jQuery.speed获取动画相关参数,得到一个类似如下的对象;并且生成动画执行函数doAnimationoptall = { complete: fnction(){...},//动画执行完成的回调 duration:原创 2016-03-08 09:24:45 · 264 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十五) 动画处理——缓动动画核心Tween
在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成。每一个原子动画的信息都包含在里面了。 仔细查看createTweens函数,实际上就是遍历调用了tweeners ["*"]的数组中的函数(实际上就只有一个元素)。 function createTwee原创 2016-03-08 09:24:49 · 598 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十五) 动画处理——外篇
a.动画兼容Tween.propHooks Tween.propHooks提供特殊情况下设置、获取css特征值的方法,结构如下Tween.propHooks = { _default: { get: function(){...}, set: function(){...} }, scrollTop: {原创 2016-03-08 09:24:52 · 629 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十六)ajax——ajax框架
ajax的介绍就不多说了,点击可看. 既然是ajax框架,那么闲谈一谈jQuery的ajax处理思路。 现在的浏览器都支持ajax,只不过不同的浏览器使用方法可能有不同(IE使用new window.ActiveXObject("Microsoft.XMLHTTP"),标准浏览器使用new window.XMLHttpRequest())。如果按照这种思路,貌似jQajax只需要做好兼原创 2016-03-08 09:24:58 · 523 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十六)ajax——jsonp原理
json jsonp 类型 "json": 把响应的结果当作 JSON 执行,并返回一个JavaScript对象。如果指定的是json,响应结果作为一个对象,在传递给成功处理函数之前使用jQuery.parseJSON进行解析。 解析后的JSON对象可以通过该jqXHR对象的responseJSON属性获得的。json的处理只要是在ajaxConvert方法中把结果给转换成需要是json格原创 2016-03-08 09:25:01 · 371 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十六)ajax——ajax处理流程以及核心函数
先来看一看jQuery的ajax核心处理流程($.ajax)a. ajax( [url,] options )执行流程 第一步,为传递的参数做适配。url可以包含在options中//传递的参数只是一个对象if ( typeof url === "object" ) { options = url; url = undefined;}//o原创 2016-03-08 09:25:03 · 665 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十六)ajax——响应数据处理和api整理
ajax在得到请求响应后主要会做两个处理:获取响应数据和使用类型转化器转化数据a.获取响应数据 获取响应数据是调用ajaxHandleResponses函数来处理。 ajaxHandleResponses的功能有: - 为jqXHR设置所有responseXXX字段(值便是响应数据) - 找到正确的dataType (在content-type和预期的dataTyp原创 2016-03-08 09:25:08 · 439 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十三) 位置大小操作
先列一下这些个apijQuery.fn.css (propertyName [, value ]| object )(函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值。如果需要删除指定的css属性,请使用该函数将其值设为空字符串("") 注意:1、如果省略了value参数,则表示获取属性值;如果指定了该参数,则表示设置属性值。2、css()函数的所有"设置"操作针对的原创 2016-03-08 09:24:40 · 346 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十二) 筛选操作
在前面分析的时候也分析了部分筛选操作(详见),我们接着分析,把主要的几个分析一下。 jQuery.fn.find( selector ) find接受一个参数表达式selector:选择器(字符串)、DOM元素(Element)、jQuery对象。分两种情况处理: 第一种,如果传入的参数是非字符串,则先通过jQuery选择器将selector查找出来,然后过滤出包含于当前jQu原创 2016-03-08 09:24:35 · 445 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十) 事件系统——事件体系结构
又是一个重磅功能点。 在分析源码之前分析一下体系结构,有助于源码理解。实际上在jQuery出现之前,Dean Edwards的跨浏览器AddEvent()设计做的已经比较优秀了;而且jQuery事件系统的设计思想也是基于该思想的,所以我们先分析一下Dean Edwards前辈的事件绑定。 a. jQuery事件原型——Dean Edwards的跨浏览器AddEvent()设计原创 2016-03-08 09:23:55 · 368 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十) 事件系统——事件绑定
事件绑定的方式有很多种。使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只能绑定一个事件处理,多次绑定的只会保留最后一次绑定的结果。 看一下jQuery绑定事件的方式有哪些jQuery.fn.eventType([[data,] fn]) 比如原创 2016-03-08 09:23:57 · 434 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十) 事件系统——事件委托
jQuery的事件绑定有几个比较优秀的特点: 1. 可以绑定不限数量的处理函数 2. 事件可以委托到祖先节点,不必一定要绑到对应的节点,这样后添加的节点也照样能被处理。 3. 链式操作 下面主要分析事件的委托设计。事件源我们成为委托节点,委托节点委托他的祖先节点替他执行事件处理,这个祖先节点被成为被委托节点。 DOM的原生事件将处理绑定在相应的节点上,相应节点原创 2016-03-08 09:24:02 · 316 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十) 事件系统——事件包装
首先需要明白,浏览器的原生事件是只读的,限制了jQuery对他的操作。举个简单的例子就能明白为什么jQuery非要构造一个新的事件对象。 在委托处理中,a节点委托b节点在a被click的时候执行fn函数。当事件冒泡到b节点,执行fn的时候上下文环境需要保证正确,是a节点执行了fn而非b节点。如何保证执行fn的上下文环境是a节点的:看源码(红色部分)//执行ret = ( (jQu原创 2016-03-08 09:24:09 · 459 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十) 事件系统——主动触发事件和模拟冒泡处理
发现一个小点,先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ) { e.stopPropagation();原创 2016-03-08 09:24:13 · 825 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(六) 延时对象应用——jQuery.ready
还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支//document ready简便写法$(function(){…})} else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector );} 所以$(fn)===$(document).r原创 2016-03-08 09:24:17 · 376 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十一) DOM操作
DOM操作包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip。 DOM操作函数中后五种方法使用的依然是前面五种方法,源码jQuery.each({ appendTo: "append",原创 2016-03-08 09:24:20 · 346 阅读 · 0 评论 -
jQuery-1.9.1源码分析系列(十一) DOM操作续——克隆节点
什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况。比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位置上的节点被移除了。有的时候需要保留原来位置上的节点,仅仅是需要一个副本添加到对应位置,这个时候克隆就有了使用场景。 jQuery.fn.clone克隆当前匹配元素集合的一个副本,并原创 2016-03-08 09:24:33 · 540 阅读 · 1 评论 -
十五个常用的jquery代码段【转】
好的文章顶一个 回到顶部按钮通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画:1 // Back to top2 $('a.top').click(function (e) {3 e.preventDefault();4 $(document.body).animate({scrol转载 2016-03-08 09:24:04 · 246 阅读 · 0 评论