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. 使用matlab判断男声与女声

    (转自) http://wenku.baidu.com/view/1d55480fbe1e650e52ea99a3.html %filename:manwoman.m %different man f ...

  2. V4L2 camera 驱动 capture测试程序【转】

    转自:http://blog.csdn.net/kickxxx/article/details/6336346 在网上找了一个测试程序, 看了看,是根据capture.c修改的.测试步骤如下 . gc ...

  3. Android平台开发-WIFI 驱动移植 -- 详细

    一.WIFI的基本架构(代码路径)     1.WIFI Settings应用程序:       packages/apps/Settings/src/com/android/settings/wif ...

  4. 微信小程序实现豆瓣读书

    个人练习项目,使用了scss+webstorm watcher来处理样式.整体上没有什么难点. github:https://github.com/axel10/wx-douban-read

  5. Controlled Tournament（状态压缩DP）

    Controlled Tournament 题意 n 名选手进行淘汰赛,R[i][j] = 1 表示 i 能胜过 j.要求通过安排淘汰赛使得,m 选手获得最终胜利,问使得比赛数最少的方案数. 分析 设 ...

  6. POJ 2482 Stars in Your Window 离散化+扫描法 线段树应用

    遇见poj上最浪漫的题目..题目里图片以上几百词为一篇模板级英文情书.这情感和细腻的文笔深深地打动了我..不会写情书的童鞋速度进来学习.传送门 题意:坐标系内有n个星星,每个星星都有一个亮度c (1& ...

  7. 【拓扑排序topsort】【p1226】神经网络

    描述 Description 神经网络就是一张有向图,图中的节点称为神经元,而且两个神经元之间至多有一条边相连,下图是一个神经元的例子: 神经元[编号为1) 图中,X1—X3是信息输入渠道,Y1-Y2 ...

  8. [POI2014]Solar Panels

    题目大意: $T(T\le1000)$组询问,每次给出$A,B,C,D(A,B,C,D\le10^9)$,求满足$A\le x\le B,C\le y\le D$的最大的$\gcd(x,y)$. 思路 ...

  9. Android Activity为什么要细化出onCreate、onStart、onResume、onPause、onStop、onDesdroy这么多方法让应用去重载？

    原文:http://www.xuebuyuan.com/1608083.html 最近在研究Activity的启动流程,老罗的blog在看,也找了其它资料学习,也跟过Android4.3的源码, 在跟 ...

  10. Python学习笔记——对象

    Python 的对象定义方式如下: class Person:        def __init__(self, name):            self.name = name         ...