JQuery源码解读 JQ框架简化( 妙味讲堂 - 视频笔记 - 第一部分)
JQuery源码解读 JQ框架简化( 妙味讲堂 - 视频笔记 - 第一部分) 1.1 定义一些变量和函数 jQuery = fuction() {} 1.2 给JQ对象添加一些方法和属性 length 1.3 extend: jQ的继承方法 1.4 jQuery.extend() 扩展一些工具方法 1.5 Sizzle: 复杂选择器的实现 1.6 Callback: 对调对象, 函数的统一管理 function fun1() { console.log(1) } function fun2() { console.log(2) } var cb = $.Callback(); cb.add(fun1); cb.add(fun2); cb.fire(); // 1,2 cb.remove(fun1) cb.fire(); //2 fun1被移除 1.7 Deferred: 延迟对象, 对异步的统一管理 setTimeout(function() { console.log(1); }) console.log(2) // 先输出2,在输出1 setTimeout 异步函数 var dfd = $.Deferred(); //创建延迟对象 setTimeout(function() { console.log(1) dfd.resolve(); }) dfd.done(function() { console.log(2) }) //先输出1,在输出2 //先用deferred 保存函数, 然后使用回调的方式调用后面的函数 1.8 support: 功能检测 // 功能检测: 浏览器版本变更快,浏览器功能不会变更,以功能的形式检测浏览器版本,更加稳定 1.9 data(): 数据存储 $("#div").data(name: "Hello") //给id为div的节点添加 name的值为Hello的属性 $("div").data("name"); // Hello 1.10 queue(): 队列管理 $("#div1").animate({ left: 100 }); $("#div1").animate({ top: 100 }); $("#div1").animate({ width: 300 }); //队列管理运动,函数等的顺序管理 1.11 attr() prop() val() addClass() 等, 对元素属性的操作 1.12 on() trigger(): 事件操作相关的方法 1.13 DOM操作: 添加append 删除empty() remove() 获取innerHTML 包装 wrap 1.14 css(): 样式操作 boxSize 样式操作兼容处理 1.15 提交的数据和ajax() 封装ajax script标签 load() 1.16 动画方法的封装 animate(); 1.17 offset() scrollTop() 位置和屏幕尺寸的方法封装 1.18 JQuery 支持模块化的模式 前端的AMD模块化的支持 后端 common模块化的支持 1.19 window.jQuery = window.$ = jquery // $ 防冲突