1.x 版本与 2.x 版本的区别
- 2.x 版本不再支持 IE6，7，8
简化框架
-
2.0.3 版本的 jQuery 框架主要由以下部分组成
框架核心
-
实现原理：
- 因为 jQuery 中所有的属性和方法都是加在 jQuery 对象上的。而整个 jQuery 代码是被包在一个匿名函数中，此时 jQuery 对象是一个局部对象，如果外界想要调用 jQuery 上的方法，就需要 jQuery 向外界提供接口。
- 第 8826 行就是 jQuery 向外界提供接口，这样外界就可以调用 jQuery 上的方法了
window.jQuery = window.$ = jQuery;
-
jQuery 是以面向对象的思想实现的
$("#div1").css(); $("#div1").html(); var arr = new Array(); arr.push(); arr.sort();上面代码中，arr 为一个数组对象，可以直接调用 push() 方法，而对比 jQuery 写法，$("#div1") 要么本身就是对象，要么就是一个函数，这个函数调用后返回一个对象
返回结果是一个 jQuery 对象
-
jQuery 有两种使用方法
1.$().css()：之前说过，$() 是一个对象，因此 .css() 是这个对象构造函数上的方法。这个 实例方法 只能给 jQuery 对象使用。
2.$.trim()：$ 是个函数，因此 .trim() 是这个函数上的 静态方法（工具方法）。既可以给 jQuery 对象使用，也可以给原生 js 使用 -
（21 - 94） 定义了一些变量和函数 jQuery = function(){}
-
（96 - 283） 给 jQuery 对象，添加一些方法和属性
-
（349 - 817） jQuery.extend()：扩展一些工具方法
-
（877 - 2856） Sizzle：复杂选择器的实现
- Sizzle 也是一个独立的插件，可以在不使用 jQuery 的时候，单独去下载一个 Sizzle 文件使用
-
（2880 - 3042） Callbacks：回调对象：函数的一个统一管理
// Demo function fn1(){ alert(1) } function fn2(){ alert(2) } var cb = $.Callbacks(); // 创建回调对象 // $.Callbacks 是函数 // 添加到 cb 上 cb.add(fn1); cb.add(fn2); cb.fire(); // 1,2 // 也可以删除 cb.remove(fn1); cb.fire(); // 2 -
（2880 - 3042）3043 - 3183 Deferred：延迟对象：对异步的统一管理
// Demo var dfd = $.Deferred(); // 1.创建延迟对象 dfd.done(function(){ // 2.设置需要延迟执行的回调函数 alert(2); }) setTimeout(function(){ alert(1); dfd.resolve(); // 3.调用 },1000); // 4.结果：刷新后等 1 秒弹 1，紧接再着弹 2 -
（2880 - 3042）3184 - 3295 support：功能检测：
2017 - 10 - 19 周四
-
（3308 - 3652） data()：数据缓存：
$('div').data('name','1123'); alert($('div').data("name")); // 注意，name 并没有直接加在 div 元素上 -
（3653 - 3797）queue：队列管理：
- .queue() 入队，.dequeue() 出队
- .animate() 是异步操作的，如何保证下面代码按顺序执行？实际上就是通过 queue 实现，先让 left 入队，执行完 left 后，让 left 出队，top 入队
$("div").animate({left:100}); $("div").animate({top:100}); $("div").animate({width:100}); -
（3803 - 4299） attr() prop() val() addClass() 等：对元素属性的操作
-
（4300 - 5128） on() trigger()：事件操作的相关方法
-
（5140 - 6057） DOM 操作：添加 / 删除 / 获取 / 包装 / DOM 筛选
-
（6058 - 6620） css()：样式的操作
-
（6621 - 7854） 提交的数据和 ajax()：ajax() / load() / getJson() 等
-
（7855 - 8584） animate()：运动的方法
-
（8585 - 8792） offset() scrollTop()：位置和尺寸的方法
-
（8804 - 8821） jQuery 支持模块化的模式
-
（8826） window.jQuery = window.$ = jQuery ：对外提供的接口
2017 - 10 - 20 周五
（21 - 94） 定义了一些变量和函数 jQuery = function(){}
-
jQuery 源码中会有 #13335 这种注释代码，可以在 https://bugs.jquery.com 中搜素相应的代码查找到具体的问题
关于 # 代码
-
jQuery 最外层会把 window 作为参数传到函数中，主要是基于以下两个原因：
- 查找速度快。如果不传 window，当 jQuery 内部某个函数调用 window 对象时，需从自身向外一层一层查找 window 对象，虽然最终也会查找到顶层函数外的 window，但速度会受到影响。因此直接传 window 使得内部函数想调用 window 对象时可以直接定位
- 方便压缩。 window 作为形参时，只是一个标识，在函数体内可以被压缩。
(function(window,undefined){ ... window ... })(window) // window 作为实参 -
严格模式，以下两种写法在严格模式下会报错
"use strict" a = 2; // 不写 var var b = 010; // 八进制
2017 - 10 - 23 周一
-
window.location 等对象的存储，便于压缩。window.location 最终被压缩为一个 i
location = window.location, document = window.document, docElem = document.documentElement, // html 标签
压缩版
-
防冲突机制：解决当其他库调用 $ 或者 jQuery 时的冲突问题
防冲突
<script type="text/javascript"> var $ = 10; // 如果没有这句，_$ 则会被赋值 undefined，因为 window.$ 并没有定义 </script> <script type="text/javascript" src="jquery-2.0.3.js"></script> // 如果注释掉，则下面 $ 为 10 <script type="text/javascript"> console.log($) // 依然是 jquery 对象 </script> -
关于实现方式
实现方式
- 常规的面向对象程序写法
function Aaa(){}; // 1.创建构造函数 Aaa.prototype.init = function(){}; // 2.一般会在原型上添加一个初始化方法 Aaa.prototype.css = function(){}; // 3.添加原型上的其他方法 var a1 = new Aaa(); // 4.实例化 a1.init(); // 5.调用 a1.css();-
简化的 jQuery 面向对象写法（注意，这里 fn 与 prototype 相同）
fn 与 prototype 的关系
function jQuery(){ return new jQuery.fn.init(); } jQuery.prototype.init = function(){}; jQuery.prototype.css = function(){}; jQuery().css();如果直接是这样的话会有个问题：css 方法明明是加在 jQuery 的原型上，为什么 jQuery()，即 new jQuery.fn.init() 可以调用?
因为：
原因
可以看出， jQuery.fn.init.prototype 与 jQuery.prototype 是一样的，因此，加在 jQuery 上的方法 jQuery()，即 new jQuery.fn.init() 也可以调用
2017 - 10 - 25 周三
-
匹配数字
匹配数字
-
匹配单词
匹配单词
-
匹配标签及 ID（防 XSS 攻击）
匹配标签及 ID
-
匹配空标签
空标签
-
浏览器前缀处理
- 常规浏览器进行驼峰处理 -webkit-margin-left => webkitMarginLeft
- IE 浏览器进行驼峰处理 -ms-margin-left => MsMarginLeft
浏览器前缀处理
-
驼峰回调函数
驼峰回调函数
-
DOM 加载成功时触发的回调函数
DOM 加载成功时触发的回调函数
网友评论