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:body

				3:字符串 html字符串 #id .class

				4:选择器表达式  #id .class

				5:function 事件回调

				6:对象

			*/

		}

		// jQuery.extend  // 对象 属性

		// jQuery.prototype // 原型 

	};

	// 3.桥接设计模式

	// jQuery.prototype.init.prototype = jQuery.prototype;

	jQuery.fn.init.prototype = jQuery.fn;

	// console.log(jQuery.prototype.init);

	// 5

	jQuery.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++){ // 1

			if((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静态方法

	异步列队

	数据缓存

	属性操作

	事件处理

	选择器  // 正则 sizzle

	DOM遍历

	DOM操作

	css操作

	动画

	坐标

*/

.

jQuery 技术揭秘的更多相关文章

  1. jquery技术揭秘静态工具函数源码重构

    1.调用页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. 【直播】APP全量混淆和瘦身技术揭秘

    [直播]APP全量混淆和瘦身技术揭秘 近些年来移动APP数量呈现爆炸式的增长,黑产也从原来的PC端转移到了移动端,通过逆向手段造成数据泄漏.源码被盗.APP被山寨.破解后注入病毒或广告现象让用户苦不堪 ...

  3. [转载]JavaEE学习篇之——JQuery技术详解

    原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...

  4. （转） 技术揭秘：海康威视PASCAL VOC2012目标检测权威评测夺冠之道

    技术揭秘:海康威视PASCAL VOC2012目标检测权威评测夺冠之道 原创 2016-09-21 钟巧勇 深度学习大讲堂 点击上方“深度学习大讲堂”可订阅哦!深度学习大讲堂是高质量原创内容平台,邀请 ...

  5. 技术揭秘12306改造（一）：尖峰日PV值297亿下可每秒出票1032张

    [编者按]12306网站曾被认为是"全球最忙碌的网站",在应对高并发访问处理方面,曾备受网民诟病. 2015年铁路客票春运购票高峰期已过,并且12306网站今年没"瘫痪& ...

  6. 15个实用的jQuery技术

    JQuery是目前最流行的JavaScript框架之一,可以显著的提高用户与网络应用的交互. 今天为大家介绍50有用的jQuery技术: 1.移动Box 2.滑动框和标题 3.数据的可视化:使用HTM ...

  7. 阅读《Oracle内核技术揭秘》的读书笔记

    阅读<Oracle内核技术揭秘>,对oracle的内存结构.锁.共享池.undo.redo等整理成了如下的思维导图:

  8. C++反汇编与逆向分析技术揭秘

    C++反汇编-继承和多重继承   学无止尽,积土成山,积水成渊-<C++反汇编与逆向分析技术揭秘> 读书笔记 一.单类继承 在父类中声明为私有的成员,子类对象无法直接访问,但是在子类对象的 ...

  9. “声讨”高云的《jQuery技术内幕》

    1. 前言: 其实本文有点太标题党了,哈哈,见谅.说“声讨”,就是说说我作为一个<jQuery技术内幕>一个忠实读者,读本书的一些想法和建议. 2014年2月20日,我收到了<jQu ...

随机推荐

  1. C#操作windows事件日志项

    /// <summary> /// 指定事件日志项的事件类型 /// </summary> public enum EventLogLevel { /// <summar ...

  2. linux下挂载U盘【转】

    转自:http://www.cnblogs.com/yeahgis/archive/2012/04/05/2432779.html 一.Linux挂载U盘:1.插入u盘到计算机,如果目前只插入了一个u ...

  3. PO-BO-VO-DTO-POJO-DAO

    POJO,BO,VO的关系: 简单理解:http://www.blogjava.net/vip01/archive/2007/01/08/92430.html 全面:https://www.cnblo ...

  4. ssh登录服务器免密钥

    我有三台Linux,IP分别为a:10.0.0.20/b:10.0.0.50/c:10.0.0.60/d:10.0.0.70 # a为本地主机  b c d为远程主机 #在a上生成密钥对(3次回车出现 ...

  5. logrotate 学习使用

    logrotate Summary : Rotates, compresses, removes and mails system log files Description : The logrot ...

  6. Codeforces Round #289 (Div. 2, ACM ICPC Rules) A. Maximum in Table【递推】

    A. Maximum in Table time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  7. servlet之request

    1. request的setAttribute与getAttribute方法一般都是成对出现的,首先通过setAttribute方法设置属性与属性值,然后通过getAttribute方法根据属性获取到 ...

  8. 洛谷——P1614 爱与愁的心痛

    题目背景 (本道题目隐藏了两首歌名,找找看哪~~~) <爱与愁的故事第一弹·heartache>第一章 <我为歌狂>当中伍思凯神曲<舞月光>居然没赢给萨顶顶,爱与愁 ...

  9. bzoj 5020: [THUWC 2017]在美妙的数学王国中畅游【泰勒展开+LCT】

    参考:https://www.cnblogs.com/CQzhangyu/p/7500328.html --其实理解了泰勒展开之后就是水题呢可是我还是用了两天时间来搞懂啊 泰勒展开是到正无穷的,但是因 ...

  10. POJ 1795 DNA Laboratory（状压DP）

    [题目链接] http://poj.org/problem?id=1795 [题目大意] 给出n个字符串,求一个最小长度的串,该串包含给出的所有字符串. 要求长度最小且字典序最小. [题解] dp[i ...