jQuery源码解析
jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理
声明：本文为原创文章，如需转载，请注明来源并保留原文链接Aaron，谢谢！ 先来回答博友的提问： 如何解析 div > p + div.aaron input[type="checkbox"] 顺便在深入理解下解析的原理： HTML结构 <div id="text"> <p> <input type="text" /> </
日期 2023-06-12 10:48:40
jQuery 2.0.3 源码分析Sizzle引擎 - 词法解析
声明：本文为原创文章，如需转载，请注明来源并保留原文链接Aaron，谢谢！ 浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别，但也有一定规则。 简单讲，通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显
日期 2023-06-12 10:48:40
十三.jQuery源码解析之$.type()
512行:出现了一个class2type. 在jQuery中全局搜索这个变量. 这段代码的意思是将一串字符串通过空格分割成数组,并且使用each遍历数组来初始化class2type. 最终的结果应该是这样的. { "[object Array]":"array", "[object Bool
日期 2023-06-12 10:48:40
十二.jQuery源码解析之.eq().first().last().slice()
eq(index):将集合中的索引为index的元素提取出来. first():返回集合中的第一个元素. .last():防护集合中的最后一个元素. .slice(start[,end]):返回集合中的给定区间段的元素. first()和last()调用eq(),eq()通过slice()实现,slice()通过 .pushS
日期 2023-06-12 10:48:40
十一.jQuery源码解析之.pushStack()
pushStack()顾明思意,就是像桟中添加东西呗,现在看看他是如何添加东西的. 创建一个空的jQuery对象,然后把Dom元素集合放入这个jQuery对象中, 并保留对当前jQuery对象的引用. pushStack是核心方法之一,它为以下方法提供支持: jQuery对象遍历:.eq(),first(),.last(),.slice()
日期 2023-06-12 10:48:40九jQuery源码解析之.each()
jQuery中存在两个each方法都是用于遍历的, 一个是对jQuery对象集合使用.each(),用于遍历这个集合; .each(function(index,element)) 还有一个是扩展jQuery的静态.each()方法. 从源码中可以看到,存在一个调用,那么我们就顺藤摸瓜,直接寻找jQuery.each(this, callb
日期 2023-06-12 10:48:40八.jQuery源码解析之get()
理论上get是用来返回jQuery对象中部分或全部元素为数组的,但是转换为数组后, 数组中的单个元素又是一个一个dom元素.所以get还有另外一个功效,就是将jQuery对象转换成dom对象. 如果get中的参数为空了,则直接调用toArray(); 如果参数小于0,则表示从元素后面开始计算,如果num>0表示直接返回指定位置的元素.
日期 2023-06-12 10:48:40七.jQuery源码解析之.toArray()
toArray()是将jQuery对象转换成数组 从源码中可以看到,这些常见的方法,都是直接从原生的 javascript中"借鉴"过来的.为什么这么说呢? 225行中,在运行时,this是指向jQuery对象的,通过call语句借鉴slice方法,切割出一个数组出来,这种"借鸡下蛋"的方法,真的是让人拍手叫绝. slice(start,end)是用
日期 2023-06-12 10:48:40十七.jQuery源码解析之入口方法Sizzle(1)
函数Sizzle(selector,context,results,seed)用于查找与选择器表达式selector匹配的元素集合.该函数是选择器引擎的入口. 函数Sizzle执行的6个关键步骤如下: 1.解析选择器表达式,解析出块表达式和关系符. 2.如果存在位置伪类,则从左向右查找: a.查找第一个块表达式匹配的元素集合,得到
日期 2023-06-12 10:48:40十六.jQuery源码解析之Sizzle设计思路.htm
为了便于后面的叙述,需要了解一些相关术语和约定. 并列选择器表达式:"div,p,a"====>div,p,a是并列的. 块表达式:"div>p"中的div和p就是两个块. 块表达式的类型:共8种.id,class,name,attr,tag,child,pos,pseudo(伪类表达式) 块间的关系符:共4种.">":父
日期 2023-06-12 10:48:40十五.jQuery源码解析之Sizzle总体结构.htm
Sizzle是一款纯javascript实现的css选择器引擎,它具有完全独立,无库依赖;小;易于扩展和兼容性好等特点. W3C Selectors API规范定义了方法querySelector()和querySelectorAll(),但是IE6,7不支持这两个方法. 在Sizzele内部,如果浏览器支持方法querySelectorAll(),则调用该方法查找元
日期 2023-06-12 10:48:40五.jQuery源码解析之jQuery.extend(),jQuery.fn.extend()
给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生. jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN]) 这两个属性都是用于合并两个或多个对象的
日期 2023-06-12 10:48:40四.jQuery源码解析之jQuery.fn.init()的参数解析
从return new jQuery.fn.init( selector, context, rootjQuery )中可以看出 参数selector和context是来自我们在调用jQuery方法时传过来的. 那么selector和context都有哪些可能. 对于表格中的4~9行中的可能做具体分析. 如果selector是字符串,则首先检测是html代
日期 2023-06-12 10:48:40三.jQuery源码解析之jQuery的框架图
这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含的所有js代码都会被执行. 二.在22行中声明的jQuery变量最终接受的是内部创建的jQuery构造器函数. 这个变量在9284行
日期 2023-06-12 10:48:40二.jQuery源码解析之构建jQuery之构建函数jQuery的7种用法
一:$(selectorStr[,限制范围]),接受一个选择器(符合jQuery规范的字符串),返回一个jQuery对象; 二:$(htmlStr[,文档对象]),$(html[,json对象])传入html字符串,创建一个新的dom元素 三:$(dom元素),$(dom元素集合)将dom元素转换成jQuery对象. 四:$(自定义对象)封装普通对象为
日期 2023-06-12 10:48:40一.jQuery源码解析之总体架构
1 (function (window, undefined) { 2 //构建jQuery对象 3 var document = window.document, 4 navigator = window.navigator, 5 location = window.lo
日期 2023-06-12 10:48:40