jQuery 技术揭秘

1.平时jquery调用页：

index.html :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script src="js/jquery.min.js"></script><script>var obj = {name:"Tom"};var obj1 = {age:30,height:175,weight:68};console.log(obj);$.extend(obj,obj1);console.log(obj);// extend 给对象扩展属性 参数2以上// extend 给jquery对象扩展属性方法(静态) 参数1// extend 给jquery实例对象(公共 原型)扩展属性方法 参数1$.extend({getName:function(){alert("Tom is Tom");}})$.fn.extend({ // 在原型上getName:function(){alert("Tom is Tom");}});console.log($.getName());console.log($().getName());</script>
</body>
</html>

2.测试页

test.html :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jquery源码</title>
</head>
<body><script src="js/jquery.1.1.0.js"></script><script>// 将jquery作为对象对待// jQuery.fn  // 指向jquery原型// jQuery.extend // 给对象扩展属性// jQuery.extend({// });// jQuery.fn.extend({// });var obj = {name:"tom"};var obj1 = {age:30,height:175,weight:68};$.extend(obj,obj1)$.extend({getName:function(){//}});var result = $.extend({},obj,obj1);console.log(result);</script>
</body>
</html>

3.自己封装的jquery代码

jquery-1.1.0.js :

/*** 创建自运行函数* 私有的命名空间* 局部作用域*/
(function(window){ // 局部作用域// 2.创建jquery的构造函数var jQuery = function(selector){ //jQuery 类return new jQuery.prototype.init(selector); // 桥接设计模式}// 4.将jQuery作为对象,fn是其属性jQuery.fn = jQuery.prototype = { // 原型对象init:function(selector){ // 原型对象初始化方法,相当于构造函数/*1:DOM元素2:body3:字符串 html字符串 #id .class4:选择器表达式  #id .class5:function 事件回调6:对象*/}// jQuery.extend  // 对象 属性// jQuery.prototype // 原型 };// 3.桥接设计模式// jQuery.prototype.init.prototype = jQuery.prototype;jQuery.fn.init.prototype = jQuery.fn;// console.log(jQuery.prototype.init);// 5jQuery.extend = jQuery.fn.extend = function(){var length = arguments.length; // 参数个数var target = arguments[0] || {};var i = 1;var options;var name;var copy;var src;// 类型if(typeof target !=="object" && typeof target !=="function"){target = {}; // 默认是一个对象}console.log(target);// 传一个参数if(length == i){target = this; // 改变this指向console.log(target);--i;}// 传2个以上for(;i<length;i++){ // 1if((options = arguments[i]) != null){ // 下标为1及以上console.log(options);for(name in options){ //// 循环可枚举属性console.log(options[name]);copy = options[name];src = target[name]; // 第一参数 扩展属性console.log(src);if(copy != undefined){target[name] = copy;}}}return target;}// 扩展工具函数jQuery.extend = ({isFunction:function(){ // 静态方法//},isWindow:function(){//}})}window.$ = window.jQuery = jQuery;
})(window) // 1.传window对象(全局作用域里的对象)console.log($().css); // 数据类型是object  $() 创建实例对象    $(this)  mvc mvvm Grunt// 类 class 构造函数 函数 对象// function xxx() {}   Function
// var obj = {};
// obj.name="max"; //私有 静态/*工具函数 jQuery静态方法异步列队数据缓存属性操作事件处理选择器  // 正则 sizzleDOM遍历DOM操作css操作动画坐标
*/

转载于:https://www.cnblogs.com/crazycode2/p/7096922.html

jQuery 技术揭秘相关推荐

零代价修复海量服务器的内核缺陷——UCloud内核热补丁技术揭秘
下述为UCloud资深工程师邱模炯在InfoQ架构师峰会上的演讲--<UCloud云平台的内核实践>中非常受关注的内核热补丁技术的一部分.给大家揭开了UCloud云平台内核技术的神秘面纱. ...
第五章业务架构，5.3 千亿访问量下的开放平台技术揭秘(作者：风胜)
5.3 千亿访问量下的开放平台技术揭秘前言淘宝开放平台(open.taobao.com)是阿里系统与外部系统通讯的最重要平台,每天承载百亿级的API调用,百亿级的消息推送,十亿级的数据同步,经历了 ...
（转）技术揭秘：海康威视PASCAL VOC2012目标检测权威评测夺冠之道
技术揭秘:海康威视PASCAL VOC2012目标检测权威评测夺冠之道原创 2016-09-21 钟巧勇深度学习大讲堂点击上方"深度学习大讲堂"可订阅哦!深度学习大讲堂是高质 ...
如何让机器获得幽默感——Goolge图学习技术揭秘
原文: Graph-powered Machine Learning at Google 作者: Sujith Ravi 译者: KK4SBB 责编:何永灿,关注人工智能,投稿请联系heyc@csdn ...
阿里云CDN技术揭秘
阿里云CDN技术揭秘 http://yunpan.cn/cA2N5fnd5TEx3 提取码 a232 转载于:https://blog.51cto.com/zj1991/1581950
jQuery技术内幕：深入解析jQuery架构设计与实现原理
为什么80%的码农都做不了架构师?>>> jQuery技术内幕:深入解析jQuery架构设计与实现原理本书由阿里巴巴资深前端开发工程师撰写,从源代码角度全面而系统地解读了jQ ...
反欺诈技术揭秘-设备指纹VS关系网络模型此博文包含图片 (2017-05-12 10:23:52)转载▼ 标签：设备指纹关系网络反欺诈神经网络模型分类：风控文章来源：网络（经整合梳理
反欺诈技术揭秘-设备指纹VS关系网络模型 (2017-05-12 10:23:52) 转载▼ 标签: 设备指纹关系网络反欺诈神经网络模型分类: 风控文章来源:网络(经整合梳理,仅供交流学习使 ...
阅读《Oracle内核技术揭秘》的读书笔记
阅读<Oracle内核技术揭秘>,对oracle的内存结构.锁.共享池.undo.redo等整理成了如下的思维导图: 转载于:https://www.cnblogs.com/hikeepg ...
实时音频抗弱网技术揭秘
本文由百度智能云-视频云技术架构师--柯于刚在百度开发者沙龙线上分享的演讲内容整理而成.内容从抗弱网技术意义出发,梳理抗弱网的概念与方法,结合百度RTC抗弱网过程中遇到的问题,重点分享抗弱网技术优化 ...

jQuery 技术揭秘

jQuery 技术揭秘相关推荐

最新文章

热门文章