随笔分类 - jQuery
jQuery相关,包括源码系列和使用系列
摘要:jQuery的事件绑定有几个比较优秀的特点: 1. 可以绑定不限数量的处理函数 2. 事件可以委托到祖先节点,不必一定要绑到对应的节点,这样后添加的节点也照样能被处理。 3. 链式操作 下面主要分析事件的委托设计。事件源我们成为委托节点,委托节点委托他的祖先节点替他执行事件处理,这个祖先节点被成为被
阅读全文
摘要:事件绑定的方式有很多种。使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只能绑定一个事件处理,多次绑定的只会保留最后一次绑定的结果。 看一下jQuery绑定事件的方式有哪些
阅读全文
摘要:又是一个重磅功能点。 在分析源码之前分析一下体系结构,有助于源码理解。实际上在jQuery出现之前,Dean Edwards的跨浏览器AddEvent()设计做的已经比较优秀了;而且jQuery事件系统的设计思想也是基于该思想的,所以我们先分析一下Dean Edwards前辈的事件绑定。 a. jQ
阅读全文
摘要:jquery.fn.css获取当前jQuery所匹配的元素中第一个元素的属性值【$(…).css(cssName),注意这个cssName可以是数组】或给当前jQuery所匹配的每个元素设置样式值【$(…).css(cssname,value) / $(…).css(obj)】; 可以看见函数内部直
阅读全文
摘要:jQuery的属性操作主要包括 jQuery.fn.val jQuery.fn.attr jQuery.fn.removeAttr jQuery.fn.prop jQuery.fn.removeProp jQuery.fn.addClass jQuery.fn.removeClass jQuery.
阅读全文
摘要:前面一章分析了jQuery.support、钩子原理和属性钩子。这一章主要分析CSS钩子。 b. css操作的钩子 CSS钩子种类: cssHooks cssNumber cssProps jQuery.cssHooks的对象 不过cssHooks中的set函数的作用有些不同,set函数并没有真正的
阅读全文
摘要:处理浏览器兼容问题实际上不是jQuery的精髓,毕竟让技术员想方设法取弥补浏览器的过错从而使得代码乱七八糟不是个好事。一些特殊情况的处理,完全实在浪费浏览器的性能;突兀的兼容解决使得的代码看起来既不美观也也不能对前端技术有任何提升。但是不管怎么说,只要不同的浏览器存在,就有可能出现兼容性问题,我们还
阅读全文
摘要:$.when的说明 描述: 提供一种方法来执行一个或多个对象的回调函数,返回这些对象的延时(Deferred)对象。 说明(结合实例和源码): 如果你不传递任何参数, jQuery.when()将返回一个resolved(解决)状态的promise对象。 如果向jQuery.when()传入一个参数
阅读全文
摘要:首先我们需要明白延时对象有什么用? 第一个作用,解决时序以及动态添加执行函数的问题。 function a(){alert(1)}; function b(){alert(2)}; function c(){alert(3)}; a(); setTimeout(function(){b();},0)
阅读全文
摘要:jQuery.Callbacks()提供的回调函数队列管理本来是延时回调处理的一部分,但是后面将其独立出来作为一个模块。jQuery就是这样,各个模块间的代码耦合度是处理的比较好的,值得学习。虽然是从延时回调处理中独立出来的,但是它的功能非常强大,提供了一种强大的方法来管理回调函数队列。 大家都明白
阅读全文
摘要:先前在分析Sizzle的时候分析到Sizzle有自己的缓存机制,点击这里查看。不过Sizzle的缓存只是对内使用的(内部自己存,自己取)。接下来分析jQuery可以对外使用的缓存(可存可取)。 首先需要明白jQuery缓存需要解决什么问题,实现它的意义? jQuery缓存要解决的是在往DOM节点添加
阅读全文
摘要:说一下Sizzle中零碎的API。这些API有的被jQuery接管,直接使用jQuery.xxx就可以使用,有的没有被接管,如果要在jQuery中使用,使用方法是jQuery.find.xxx。 具体看一下有哪些API //筛选出elements满足CSS选择器表达式expr的节点【最终返回的是节点
阅读全文
摘要:Sizzle引擎的主体部分已经分析完毕了,今天为这部分划一个句号。 a. Sizzle解析流程总结 是时候该做一个总结了。Sizzle解析的流程已经一目了然了。 1.选择器进入Sizzle( selector, context, results, seed )函数,先对选择器不符合要求的(比如没有选
阅读全文
摘要:我们知道Sizzle支持的伪类有有很多,为了便于处理被Sizzle分成了两类:单个单词的伪类“PSEUDO”和多个词语使用“-”链接的“CHILD”。我们下面一一分析。 先看"PSEUDO": a. Sizzle的伪类选择器"PSEUDO" 我们先整体看一下有哪些个伪类 伪类生成匹配器的源码如下:
阅读全文
摘要:我也看过很多Sizzle源码分析的博客,伪类分割器setMatcher介绍的比较少。但是本人认为这是一个比较重要的难点,我第一遍看源码的时候也忽略了。现在回来看第二遍,一定要把这个东东弄懂。 a. 伪类分割器setMatcher 伪类分隔器对伪类选择器进行分隔处理,返回处理后的最终匹配器。 伪类和其
阅读全文
摘要:这一节要分析的东东比较复杂,篇幅会比较大,也不知道我描述后能不能让人看明白。这部分的源码我第一次看的时候也比较吃力,现在重头看一遍,再分析一遍,看能否查缺补漏。 看这一部分的源码需要有一个完整的概念后去看才比较容易看懂,所以我们先把整个编译的原理阐述以后再进行解析。 还是以上次的那个CSS选择器为例
阅读全文
摘要:jQuery源码9600多行,而Sizzle引擎就独占近2000行,占了1/5。Sizzle引擎、jQuery事件机制、ajax是整个jQuery的核心,也是jQuery技术精华的体现。里面的有些策略确实很值得学习,先膜拜之,然后细细学习。 在学习Sizzle引擎之前我们先准备一点知识,和先了解Si
阅读全文
摘要:前面分析了选择器的结构和几个解析函数,接下来分析jQuery对象的伪类选择器。这里所谓的jQuery对象的伪类选择器就是从已有的jQuery对象(元素集合)中筛选出指定的集合出来。 4. jQuery的伪类选择函数 先混个脸熟,把所有能找到的jQuery的伪类选择器都列出来。 jQuery.fn.e
阅读全文
摘要:在分析之前说一点题外话。 ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对象;documentElement是Document对象的属性,返回的是文档根节点 对于HTML文档
阅读全文
摘要:1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(""), $(null), $(undefined), $(false) ... // Handle HTM
阅读全文

浙公网安备 33010602011771号