jQuery相关

原创 前端工程师_钱成 随笔 js知识 312阅读 2018-04-25 16:24:29 举报

JQuery源码难点包含:1、模块处理,2、无new构建,3、深克隆
一、jQuery零碎知识
1、把jQuery对象转化为js对象(1)$div[0];(2)$div.get(0);
2、仍然获取jQuery对象(1)$div.eq(0);
3、把js对象转化为jQuery对象$(div)
6、find()沿着 DOM 树向下遍历所有层级
7、children()沿着 DOM 树向下遍历单一层级。
8、对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
9、对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法
10、具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()
11、$(this).attr("checked",!this.checked);(1)$(this)有attr方法(2)this有checked属性

二、jQuery类库源码总解读

在Node环境下,通过npm install jquery和var AAA = require("jquery")(window),引进jQuery类库,通过AAA.调用。这段代码为处理下列情形准备的:
1、运行环境有window对象,传入(window,factory)
(1)有module对象和module.exports对象,
A、有window.document对象,执行module.exports =factory( window, true )
B、没window.document对象,执行module.exports =function( w ) {}
(2)没module对象和module.exports对象,执行factory( window ),这是前端程序员常使用的情形
2、运行环境没window对象,传入(this,factory)
(1)有module对象和module.exports对象,
A、有this.document对象,执行module.exports =factory( this, true )
B、没this.document对象,执行module.exports =function( w ) {}
(2)没module对象和module.exports对象,执行factory( this )

三、jQuery实例的无new构建(3段)

思路:
(1)jQuery执行时,new它原型上的init方法;
(2)把init方法的原型指向jQuery的原型
(4)来源:https://segmentfault.com/a/1190000003501504

四、extend方法源码

五、extend方法应用
注意:被克隆的只能是键值对,值可以是任何数据类型,第一个参数如果为true,则是深克隆,当值是键值对或数组时发挥作用。

实例:供查看执行步骤

六、each方法源码

七、jQuery版文件上传

参考:https://www.cnblogs.com/LoveTX/p/7081515.html

八、各种高
1、height(仅内容)
2、innerHeight(包括补白)
3、outerHeight(包括补白和边框)
4、outerHeight(true,包括补白、边框、margin)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复