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. PHP会话控制

         会话控制的思想是指能够在网站中根据一个会话跟踪用户.      PHP的会话是通过唯一的会话ID来驱动的.会话ID是一个加密的随机数字.它由PHP生成,在会话的生命周期中都会保存在客户端.它 ...

  2. odp.net 读写oracle blob字段

    DEVELOPER: ODP.NET Serving Winning LOBs: http://www.oracle.com/technetwork/issue-archive/2005/05-nov ...

  3. linux知识点小结

    PATH环境变量,记录了所有可以直接执行的二进制命令的原件或者链接 harvey@ubuntu:/etc$ echo $PATH /usr/lib/lightdm/lightdm:/usr/local ...

  4. hdu 5720(贪心+区间合并)

    Wool Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Subm ...

  5. failed to push some refs to 'git@github.com:laniu/liuna.git'报错原因

    出现错误的主要原因是github中的README.md文件不在本地代码目录中 可以通过如下命令进行代码合并[注:pull=fetch+merge] git pull --rebase origin m ...

  6. 全文索引CONTAINS语法

    Like直接在数据据中查找可以查到所有所需记录但是会扫描整个表会影响性能CONTAINS是基于全文索引进行查询,查询结果受系统全文索引分词的方法影响查询结果会不全.Select * FROM A Wh ...

  7. 一篇好文档，请Thymeleaf Layout Dialect

    Thymeleaf Layout Dialect https://ultraq.github.io/thymeleaf-layout-dialect/ This will introduce the  ...

  8. 计蒜客 18488.Extreme Sort (German Collegiate Programming Contest 2015 ACM-ICPC Asia Training League 暑假第一阶段第三场 E)

    E.Extreme Sort 传送门 代码: #include<iostream> #include<cstdio> #include<cstring> #incl ...

  9. Orchard FAQ

    Orchard学习视频已登录百度传课: http://www.chuanke.com/3027295-124882.html 问:Orchard用VS重新生成后为什么那么大? 答:因为每个模块的bin ...

  10. IMAP IDLE模式(推送邮件)

    在电子邮件技术中,IDLE是RFC 2177中描述的一项IMAP功能,它允许客户端向服务器表明它已准备好接受实时通知. Internet消息访问协议IMAP4协议,它要求客户端轮询服务器来更改所选中的 ...