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. Struts2的类型转换机制

    Struts2的类型转换机制 在基于HITP 协胆的Web 应用中,客户端〈浏览器〉和服务器之间传输的都是字符串形式的数据,换句话说,服务器接收到的用户数据只能是字符串或字符数组, 但在服务器端的Ja ...

  2. Linux查看进程堆栈信息命令

    jps -lvm #查看进程IDjstack -l <进程ID> # 查看进程堆栈信息

  3. 12.OpenStack镜像和存储服务配置

    配置镜像服务 编辑 /etc/glance/glance-api.conf与/etc/glance/glance-registry.conf添加以下内容 [DEFAULT] notification_ ...

  4. Optional int parameter 'rows' is not present but cannot be translated into a null value due to being declared as a primitive type.

    我的spring mvc 代码: @Controller @RequestMapping("/product") public class Fancy { @RequestMapp ...

  5. windows下xampp安装PHP的pthreads多线程扩展

    我的运行环境: 系统:windows10 ,64位 PHP:5.6.8 TS,VC11 ,32位 Apache: 2.0 我安装的是xampp集成环境 pthreads的windows扩展文件下载地址 ...

  6. 使用dom4j工具包对xml文件解析

    xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http: ...

  7. PHP源码加密- php-beast

    php-beast 详细介绍 使用案例: http://www.beastcoder.com/ PHP Beast是一个源码加密模块,使用这个模块可以把PHP源码加密并在此模块下运行. 为什么要用PH ...

  8. Javascript短路表达式

    短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短 ...

  9. 树链剖分【p3038】[USACO11DEC]牧草种植Grass Planting

    表示看不太清. 概括题意 树上维护区间修改与区间和查询. 很明显树剖裸题,切掉,细节处错误T了好久 TAT 代码 #include<cstdio> #include<cstdlib& ...

  10. 使用ARC也可能发生内存泄露

    1,循环参照 A有个属性参照B,B有个属性参照A,如果都是strong参照的话,两个对象都无法释放. 这种问题常发生于把delegate声明为strong属性了. 例, @interface Samp ...