jQuery - 随笔分类(第2页) - 【艾伦】

jQuery2.0.3源码分析系列(28) 元素大小

摘要：最近的分析都是有点不温不火，基本都是基础的回顾了今年博客的目标目前总的来说有2大块JS版的设计模式，会用jQuery来诠释JS版的数据结构，最近也一直在狠狠的学习中.HTML息息相关的的样式偏移量offsetWidth offsetHeight offsetLeft offsetTopoffsetHeight/offsetWidth: 表述元素的外尺寸：元素内容+内边距+边框(不包括外边距)offsetLeft/offsetTop: 表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离。offsetParent元素是指元素最近的定位（relative,a 阅读全文

posted @ 2014-02-25 09:01 【艾伦】阅读(4233) 评论(7) 推荐(11) 编辑

解密jQuery内核样式操作

摘要：基础回顾jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的，本章通一下分解探究下jquery里这部分代码的实现那么jQuery要处理样式的哪些问题?先简单回顾下样式操作会遇到的问题HTML样式定义3种方式了外部引入也就是定义CSS中的嵌入式样式style特性地定义给一个HTML元素设置css属性，如var head= document.getElementById("head");head.style.width = "20px";head.style.height = "10px";head.style.dis 阅读全文

posted @ 2014-02-21 16:12 【艾伦】阅读(5259) 评论(3) 推荐(15) 编辑

解密jQuery内核 DOM操作方法（二）html,text,val

摘要：回顾下几组DOM插入有关的方法innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式看图对照区别innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 innerText 和outerText 在读取得时候是一样的，只是在设置的时候outerText 会连带标签一起替换成目标文本 firefox不支持innerText ，但是可以用textContent作为替代方案。nodeValue 对于文本节点，nodeValue 属... 阅读全文

posted @ 2014-01-19 08:12 【艾伦】阅读(9146) 评论(5) 推荐(11) 编辑

解密jQuery内核 DOM操作

摘要：jQuery针对DOM操作的插入的方法有大概10种append、prepend、before、after、replaceWithappendTo、prependTo、insertBefore、insertAfter、replaceAll分2组，上下对照，实现同样的功能。主要的不同是语法——特别是内容和目标的位置依赖的domManip，buildFragment模块在之前就分析过了在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点对于 .after(), 选择表达式在函数的前面，参数是将要插入的内容。对于.insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元阅读全文

posted @ 2014-01-13 08:44 【艾伦】阅读(6697) 评论(9) 推荐(13) 编辑

解密jQuery内核 DOM操作的核心buildFragment

摘要：文档碎片是什么http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3DocumentFragment is a "lightweight" or "minimal" Document object. It is very common to want to be able to extract a portion of a document's tree or to create a new fragment of a document参考标准的描述，Documen 阅读全文

posted @ 2014-01-10 09:00 【艾伦】阅读(6150) 评论(2) 推荐(13) 编辑

解密jQuery内核 DOM操作的核心函数domManip

摘要：domManip是什么dom即Dom元素，Manip是Manipulate的缩写，连在一起就是Dom操作的意思。.domManip()是jQuery DOM操作的核心函数对封装的节点操作做了参数上的校正支持，与对应处理的调用append、prepend、before、after、replaceWithappendTo、prependTo、insertBefore、insertAfter、replaceAll为什么需要用这个domManip函数呢？我们知道节点操作浏览器提供的接口无非就是那么几个appendChild()通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点。阅读全文

posted @ 2014-01-08 15:34 【艾伦】阅读(7290) 评论(4) 推荐(9) 编辑

解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）

摘要：本章开始分析过滤器，根据API的顺序来主要涉及的知识点jQuery的组成pushStack方法的作用sizzle伪类选择器首页我们知道jQuery对象是一个数组对象内部结构jQuery的选择最终还是依靠的DOM提供的接口，jQuery只是最了最佳的方式最快的匹配到合适的位置构建一个基础的jQuery对象有：元素合集元素数量上下文通过pushStack()方法构建的prevObject的引用储存，这个在DOM操作的时候特别有用选择器具体文章前面有分析，pushStack有什么用处，sizzler如何最佳匹配，这里就不详说了，接下来看具体的操作.eq( index )如果一个jQuery对象表示一阅读全文

posted @ 2013-12-26 13:54 【艾伦】阅读(6223) 评论(3) 推荐(12) 编辑

解密jQuery事件核心 - 模拟事件（四）

摘要：前几章已经把最核心的实现都分解过了，这一章我们看看jQuery是如何实现事件模拟的在Internet Explorer 8和更低，一些事件change 和 submit本身不冒泡，但jQuery修改这些冒泡，创建一致的跨浏览器的行为。焦点事件blur :在这个事件触发前，元素已经失去焦点，不冒泡，同步触发。target 指向当前失去焦点的元素。focus:在这个事件触发前，元素已经得到焦点，不冒泡，同步触发。target 指向当前得到焦点的元素。与此同时DOM Level 3 事件模块还定义了 focusin ,focusout 以及 DOMFocusIn ，DOMFocusOut 四个事件阅读全文

posted @ 2013-12-19 09:20 【艾伦】阅读(12136) 评论(6) 推荐(15) 编辑

解密jQuery事件核心 - 自定义设计（三）

摘要：接上文http://www.cnblogs.com/aaronjs/p/3447483.html本文重点:自定义事件“通过事件机制，可以将类设计为独立的模块，通过事件对外通信，提高了程序的开发效率。”对象之间通过直接方法调用来交互1）对象A直接调用对象B的某个方法，实现交互；直接方法调用本质上也是属于一种特殊的发送与接受消息，它把发送消息和接收消息合并为一个动作完成；方法调用方和被调用方被紧密耦合在一起；因为发送消息和接收消息是在一个动作内完成，所以无法做到消息的异步发送和接收；2）对象A生成消息->将消息通知给一个事件消息处理器（Observable）->消息处理器通过同步或异步阅读全文

posted @ 2013-12-09 09:12 【艾伦】阅读(19764) 评论(3) 推荐(19) 编辑

解密jQuery事件核心 - 委托设计（二）

摘要：第一篇http://www.cnblogs.com/aaronjs/p/3444874.html从上章就能得出几个信息：事件信息都存储在数据缓存中对于没有特殊事件特有监听方法和普通事件都用addEventListener来添加事件了。而又特有监听方法的特殊事件，则用了另一种方式来添加事件。本章分析的重点：通过addEventListener触发事件后，回调句柄如何处理？具体来说就是，如何委派事件的，用到哪些机制，我们如果用到项目上是否能借鉴？涉及的处理：事件句柄的读取与处理事件对象的兼容，jQuery采取什么方式处理？委托关系的处理jQuery引入的处理方案jQuery.event.fix(e 阅读全文

posted @ 2013-12-02 08:37 【艾伦】阅读(17544) 评论(18) 推荐(43) 编辑

解密jQuery事件核心 - 绑定设计（一）

摘要：说起jQuery的事件，不得不提一下Dean Edwards大神 addEvent库，很多流行的类库的基本思想从他那儿借来的jQuery的事件处理机制吸取了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery处理事件绑定的时候相当的可靠。在预留退路(graceful degradation)，循序渐进以及非入侵式编程思想方面，jQuery也做的非常不错事件的流程图总的来说对于JQuery的事件绑定在绑定的时候做了包装处理在执行的时候有过滤器处理.on( events [, selector ] [, data ], handler(eventObject) 阅读全文

posted @ 2013-11-27 09:08 【艾伦】阅读(26022) 评论(22) 推荐(75) 编辑

jQuery 2.0.3 源码分析事件体系结构

摘要：那么jQuery事件处理机制能帮我们处理那些问题？毋容置疑首先要解决浏览器事件兼容问题可以在一个事件类型上添加多个事件处理函数，可以一次添加多个事件类型的事件处理函数提供了常用事件的便捷方法支持自定义事件扩展了组合事件提供了统一的事件封装、绑定、执行、销毁机制……为了更深入的理解幕后的实现,所以先整理整体的结构思路,从1.7后就去除了live绑定,所以现在的整个事件的API如图：jQuery的事件绑定有多个方法可以调用，以click事件来举例：click方法bind方法delegate方法on方法$('#foo').click(function(){ })$('#foo 阅读全文

posted @ 2013-11-26 08:47 【艾伦】阅读(8678) 评论(11) 推荐(23) 编辑

jQuery 2.0.3 源码分析事件绑定 - bind/live/delegate/on

摘要：事件(Event)是JavaScript应用跳动的心脏，通过使用JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应事件的基础就不重复讲解了，本来是定位源码分析实现的，所以需要有一定的基础才行为了下一步更好的理解内部的实现,所以首先得清楚的认识到事件接口的划分网上资料遍地都是,但是作为一个jQuery系列的源码分析,我还是很有必要在重新总结一下jQuery对事件的绑定分别有几个API http://www.css88.com/jqapi-1.9/.bind().live().delegate().on()不管是用什么方式绑定,归根到底还是用addEven 阅读全文

posted @ 2013-11-25 00:03 【艾伦】阅读(13739) 评论(12) 推荐(29) 编辑

深入浏览器兼容细数jQuery Hooks 属性篇

摘要：关于钩子：http://www.cnblogs.com/aaronjs/p/3387906.html本章的目的很简单，通过钩子函数更细节的了解浏览器差异与处理方案,版本是2.0.3所以不兼容ie6.7.8，所以对应了钩子会少很多。。总的来说钩子在.attr(), .prop(), .val() and .css() 四种操作中会涉及属性操作的钩子propFixpropHooksattrHooksvalHooksjQuery.propFix 中的对象源码部分1：保留值属性名字修正jQuery.propFix: { for : "htmlFor", class : " 阅读全文

posted @ 2013-11-22 10:41 【艾伦】阅读(7095) 评论(3) 推荐(11) 编辑

jQuery 2.0.3 源码分析样式操作

摘要：根据API分类CSSaddClass()jQuery.cssHooks.hasClass().removeClass().toggleClass().addClass()对元素的样式操作,底层的实现就是修改元素的className值实现的功能：增加一条样式规则： .addClass(‘myClass’)增加多条样式规则： .addClass(‘myClass yourClass’)传递回调遍历样式规则：$("ul li:last").addClass(function(index) { return "item-" + index;});从接口传参去分析阅读全文

posted @ 2013-11-20 21:49 【艾伦】阅读(3977) 评论(1) 推荐(10) 编辑

jQuery 2.0.3 源码分析钩子机制 - 属性操作

摘要：jQuery提供了一些快捷函数来对dom对象的属性进行存取操作. 这一部分还是比较简单的.根据API这章主要是分解5个方法.attr() 获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。.prop() 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。.removeAttr() 为匹配的元素集合中的每个元素中移除一个属性（attribute）。.removeProp() 为集合中匹配的元素删除一个属性（property）。.val() 获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值jQue 阅读全文

posted @ 2013-11-19 13:01 【艾伦】阅读(10306) 评论(9) 推荐(24) 编辑

jQuery 2.0.3 源码分析回溯魔法 end()和pushStack()

摘要：了解了jQuery对DOM进行遍历背后的工作机制，可以在编写代码时有意识地避免一些不必要的重复操作，从而提升代码的性能从这章开始慢慢插入jQuery内部一系列工具方法的实现关于jQuery对象的包装var $aaron = $("aaron");通过对sizzle的分析呢，jQuery选择器，反正最终都是通过dom接口实现取值的, 但是通过jQuery处理后返回的不仅仅只有dom对象，而是一个包装容器返回的jQuery对象：$aaronjQuery对象,其中有个prevObject这个是干嘛用的呢？jQuery对象栈jQuery内部维护着一个jQuery对象栈。每个遍历方法阅读全文

posted @ 2013-10-25 11:59 【艾伦】阅读(6386) 评论(4) 推荐(12) 编辑

jQuery 2.0.3 源码分析数据缓存

摘要：历史背景：jQuery从1.2.3版本引入数据缓存系统，主要的原因就是早期的事件系统 Dean Edwards 的 ddEvent.js代码带来的问题：没有一个系统的缓存机制，它把事件的回调都放到EventTarget之上，这会引发循环引用如果EventTarget是window对象，又会引发全局污染不同模块之间用不同缓存变量一般jQuery开发，我们都喜欢便捷式的把很多属性，比如状态标志都写到dom节点中,也就是HTMLElement好处：直观，便捷坏处：循环引用直接暴露数据，安全性？增加一堆的自定义属性标签，对浏览器来说是没意义的取数据的时候要对HTML节点做操作什么是内存泄露内存泄露是指阅读全文

posted @ 2013-10-22 08:42 【艾伦】阅读(8869) 评论(8) 推荐(34) 编辑

jQuery 2.0.3 源码分析 Deferred（最细的实现剖析，带图）

摘要：Deferred的概念请看第一篇http://www.cnblogs.com/aaronjs/p/3348569.html******************构建Deferred对象时候的流程图************************************************源码解析**********************因为callback被剥离出去后，整个deferred就显得非常的精简jQuery.extend({ Deferred : function(){} when : function())}对于extend的继承这个东东，在之前就提及过j... 阅读全文

posted @ 2013-10-09 08:20 【艾伦】阅读(13263) 评论(21) 推荐(97) 编辑

jQuery 2.0.3 源码分析 Deferred概念

摘要：JavaScript编程几乎总是伴随着异步操作，传统的异步操作会在操作完成之后，使用回调函数传回结果，而回调函数中则包含了后续的工作。这也是造成异步编程困难的主要原因：我们一直习惯于“线性”地编写代码逻辑，但是大量异步操作所带来的回调函数，会把我们的算法分解地支离破碎。此时我们不能用if来实现逻辑分支，也不能用while/for/do来实现循环，更不用提异步操作之间的组合、错误处理以及取消操作了。因此也诞生了如jQuery Deferred这样的辅助类库举一个例子会有助于理解我做的是phonegap项目，所以涉及到的异步处理就别特多：1. 常见的setTimeout2. 与底层代码通信，调用. 阅读全文

posted @ 2013-10-02 18:00 【艾伦】阅读(11701) 评论(5) 推荐(23) 编辑

随笔分类 - jQuery