11 2015 档案
摘要：所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。 当前所知的脱离文档流的方式有两种：浮动和定位。 a.定位属性positon 先看一下定位。看一段对
阅读全文
摘要：首先说明本人所理解的这几个元素的计算 window高度应当是文档所在窗口的可视高度（没有包括浏览器的滚动条），计算方法document.documentElement.clientHeight document高度应该为文档内容的高度，计算方法Math.max(document.body[ "scr
阅读全文
摘要：DOM操作包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip。 DOM操作函数中后五种方法使用的依然是前面五种方法，源码 j
阅读全文
摘要：还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支 //document ready简便写法$(function(){…}) } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( se
阅读全文
摘要：发现一个小点，先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ) { e.stopPropagation(); } jQuery重载stopPropagation
阅读全文
摘要：首先需要明白，浏览器的原生事件是只读的，限制了jQuery对他的操作。举个简单的例子就能明白为什么jQuery非要构造一个新的事件对象。 在委托处理中，a节点委托b节点在a被click的时候执行fn函数。当事件冒泡到b节点，执行fn的时候上下文环境需要保证正确，是a节点执行了fn而非b节点。如何保证
阅读全文
摘要：好的文章顶一个回到顶部按钮通过使用 jQuery 中的animate和scrollTop方法，你无需插件便可创建一个简单地回到顶部动画：1 // Back to top2 $('a.top').click(function (e) {3 e.preventDefault();4 $(docu...
阅读全文
摘要：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
阅读全文
摘要：几个jQuery基础的属性和函数：noConflict/extend/type
阅读全文
摘要：jQuery 1.9.1 框架分析
阅读全文
浙公网安备 33010602011771号