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. VS2013 Sqlite3 操作指令

    extern "C"{ #include "sqlite3.h" }; #pragma comment(lib,"sqlite.lib") ...

  2. Windows基础-实时录音程序（WaveXXX）

    写在前面 一开始是打算用这个老接口做讯飞语音识别的程序,在转移到UWP时发现,这玩意在Windows Runtime中屏蔽(弃用)了,将来会更新使用WASAPI的程序 WaveRecorder类代码下 ...

  3. 安装戴尔OMSA

    设置变量versionum=`cat /etc/redhat-release | awk '{print $3}' | awk -F '.' '{print $1}'`versionname=`cat ...

  4. Ubuntu配置网络遇到的一些问题

    Ubuntu配置网络遇到的一些问题 在配置Ubuntu网络时,曾遇到了一些问题.查找了一些博客,所幸都解决了.记录一下,以便日后查阅. 设置DNS sudo vim /etc/resolv.conf ...

  5. hdu 2489(状态压缩+最小生成树)

    Minimal Ratio Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  6. (13)C#数组

    如果需要使用同一类型的多个对象,数组是一种数据结构,它包含同一类型的多个元素 一.一维数组 1.数组的声明方法 int [] a; 因为数组是引用类型,引用类型有个特点是:声明变量时不会马上分配一个内 ...

  7. Python的功能模块[0] -> wmi -> 获取 Windows 内部信息

    wmi模块 / wmi Module WMI (Windows Management Instrumentation) 模块可用于获取 Windows 内部信息.该模块需要 win32com 的支持, ...

  8. kibana-Coordinate Map

    1. Visualize 添加图形 2. 选择图形类型  Coordinate Map 3. 选择索引 4. 设定成图的聚合字段 如果有数据,点击右上角的三角形,地图上就会有显示. 5. 保存图形

  9. RandomeAccessFile - read write

    RandomeAccessFile use write replace writeBytes public class RandomAccessFileTest { public static voi ...

  10. Find the Duplicate Number -- LeetCode

    Given an array nums containing n + 1 integers where each integer is between 1 and n (inclusive), pro ...