1.测试页面;

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>手写jQuery框架</title>

	<style type="text/css">

		*{margin: 0px;padding: 0px;font-family: "微软雅黑";}

		.box{width: 300px;height: 300px;border:1px solid #ddd;margin: 50px auto;padding: 20px;}

		.header{height: 40px;}

		.header span{display: block;width: 80px;height: 40px;text-align: center;line-height: 40px;color: #fff;background-color: blue;float: left;margin-left: 50px;font-size: 14px;cursor: pointer;}

		.conter{height: 240px;background: #abcdef;margin-top: 20px;}

	</style>

	<script src="js/jquery-1.2.0.js"></script>

</head>

<body>

	<div id="box" class="box">

		<div class="header">

			<span class="star">开启</span>

			<span class="end">关闭</span>

		</div>

		<div class="conter"></div>

	</div>

	<script type="text/javascript">

		// $(function() { // window.onload只能出现一次  $(function(){})可以出现多次

		// 	alert(1);

		// });

		// $(function() { // window.onload只能出现一次  $(function(){})可以出现多次

		// 	alert(2);

		// })

		// javascript 语言的设计原理

		// console.log($("#box"));

		// console.log($(".end"));

		$(".star").click(function(){

			alert(1);

		}); // jquery对象 event属性 element对象

	</script>

</body>

</html>

2.理论分析：

/**

 * 忍者秘籍

 * 函数 对象 面向对象 设计原理

 * 简化DOM操作 ajax请求

 * 从对象开始

 * js 基于原型的面向对象语言

 * 注：不存在独立的函数,所有的函数必须是某个对象的方法

 * $('#box') jQuery对象

 * $('#box').animate()  //对象

 */

/*创建自运行函数(闭包) $*/

// 方法一：将自运行函数赋值给一个变量,通过运行自运行函数获取返回值

/*var jQuery = (function(){

	return "$"; //

})(); // 调用 返回值

alert(jQuery); // 获取自运行函数的返回值*/

// 方法二：在自运行函数中再声明一个函数(构造函数)

/*(function(window){ // 参数 window

	function jQuery(){ // 在jQuery()函数中封装document对象

		//

	}

	function $(){

		new jQuery(); // new一个jquery实例

	}

	window.jQuery = window.$ = $;// 将 $ 挂载在 window.$ 上

})(window); // 传参 window

$(); // 调用$()方法*/

/**

 * 面向对象

 * 封装 继承 多态

 * 通过构造函数 定义 类

 * 通过类 创建 实例对象

 * 通过实例对象 调用 方法(方法不能独自调用,需要通过对象调用)

 */

function Person(){

	// 如果将Person()作为普通函数看待,Person() 就是一个 function对象, 我们关注其返回值

	// 如果将Person()作为构造函数看待,Person() 就是一个 类, 我们关注 通过new创建Person的实例对象

	this.name = 'Tom'; // 在构造函数中,this指向实例对象

	this.sun = function() {

		// body...

	}

}

var a = new Person(); // 创建实例对象

console.log(a.name);

// 所有的数据类型都是对象

// function Function 通过字面量的写法,创建function的实例对象

3.实现;

jQuery-1.1.0.js

/**

 * 通过$进行驱动

 * 通过类 封装属性和方法

 * 对象与类之间就是一个继承的过程,实例对象会继承类封装的属性和方法

 * 不是通过extend关键字而是通过prototype属性来继承(将属性和方法封装在原型对象中)

 * 构造函数有一个prototype属性,该属性指向当前构造函数的prototype的原型对象

 */

// 注：原型对象继承 与 this关键字继承 之间的区别

function jQuery(arg){ // 构造函数 本质而言,jQuery是Function的实例对象,拥有prototype、agruments、this等属性

	this.event = []; // this指向当前所创造的实例对象  对象上面来进行添加 复制(继承)

	// 判断arg类型

	switch(typeof arg){

		case "function":

			// window.onload = arg; // 绑定window.onload事件

			myAddevent(window,"load",arg);

		break;

		case "string": // 3中结果 $(".box") $("#box") $("span")

			// 判断字符串首字符

			switch(arg.charAt(0)){ // 将arg作为对象

				case "#":

					// 注:将element对象转换为jquery对象

					var obj = document.getElementById(arg.substring(1)); //#box 去掉# element对象

					// 将element对象方法数组中,转换成jquery对象

					this.event.push(obj);

				break;

				case ".":

					// 适配的设计模式

					this.event = getClass(document,arg.substring(1)); // 去除.

				break;

				default: // 其他情况

				break;

			}

		break;

		case "object":

		break;

	}

}

function $(arg){ // arg 代表任意的类型

	return new jQuery(arg);

}

// 给函数绑定事件

function myAddevent(obj,sev,fn){ // 参数1：对象,参数2；绑定的事件,参数3：绑定的函数

	// 低版本浏览器兼容处理

	if(obj.addachEvent){ // 当前传入的obj支持addachEvent()方法

		obj.addachEvent("on"+sev,fn); // 参数1：事件绑定的类型,参数2：要绑定的函数

	}else{

		obj.addEventListener(sev, fn, false); // 参数1：事件类型,参数2：回调函数,参数3：事件的捕获

	}

}

// 查到当前文档指定的class名称的元素

function getClass(ohtml,oclass){// 参数1：所有的元素  参数2：指定的class

	// 遍历所有的元素 查找指定的class

	var myElement = ohtml.getElementsByTagName("*"); // 获得当前所有的元素

	var result = []; // 定义结果数组

	for(var i=0;i<myElement.length;i++){

		if(myElement[i].className == oclass){ // 依次判断所选值 与 传值 是否相等

			result.push(myElement[i]); // 放入结果数组

		}

	}

	return result;

}

// css eq click

jQuery.prototype = {

	// 在原型对象中写规则

	click:function(fn){ // 传入function参数

		for(var i=0;i<this.event.length;i++){

			// 给所有的element对象绑定事件

			myAddevent(this.event[i],"click",fn); // 调用事件绑定函数

		}

	}

};// 通过jQuery的prototype属性,指向原型对象

// Element.addEventListener(load, fn, false); // 参数1：事件类型,参数2：回调函数,参数3：事件的捕获

// console.log($().__proto__); // __proto__ 是每个对象都有的隐藏属性,它指向原型对象,指向它的构造函数(也就是它的类) 此处执行当前的jQuery

/**

 * 1.$(".box")  $("#box")  $("span")  通过字符串查找

 * 2.$(this)  通过关键字查找

 * 3.$(function(){})  传递函数

 */

$(function(){ // 相当于 window.onload

});// 页面加载完毕,回调的函数

// 类 进行封装

// prototype 进行继承

// var a = new jQuery();

// alert(a.event);

.

手写 jQuery 框架的更多相关文章

  1. 手写DAO框架（三）-数据库连接

    -------前篇:手写DAO框架(二)-开发前的最后准备--------- 前言 上一篇主要是温习了一下基础知识,然后将整个项目按照模块进行了划分.因为是个人项目,一个人开发,本人采用了自底向上的开 ...

  2. 手写DAO框架（二）-开发前的最后准备

    -------前篇:手写DAO框架(一)-从“1”开始 --------- 前言:前篇主要介绍了写此框架的动机,把主要功能点大致介绍了一下.此篇文章主要介绍开发前最后的一些准备.主要包括一些基础知识点 ...

  3. 手写DAO框架（一）-从“1”开始

    背景: 很久(4年)之前写了一个DAO框架-zxdata(https://github.com/shuimutong/zxdata),这是我写的第一个框架.因为没有使用文档,我现在如果要用的话,得从头 ...

  4. 手写DAO框架（四）-SQL执行

    -------前篇:手写DAO框架(三)-数据库连接--------- 前言 通过上一篇写的方法,可以灵活的获取.释放数据库连接,拿到连接之后,我们就可以执行sql了!所以,本篇介绍的就是SQL执行器 ...

  5. (二)springMvc原理和手写springMvc框架

    我们从两个方面了解springmvc执行原理,首先我们去熟悉springmvc执行的过程,然后知道原理后通过手写springmvc去深入了解代码中执行过程. (一)SpringMVC流程图 (二)Sp ...

  6. 手写RPC框架指北另送贴心注释代码一套

    Angular8正式发布了,Java13再过几个月也要发布了,技术迭代这么快,框架的复杂度越来越大,但是原理是基本不变的.所以沉下心看清代码本质很重要,这次给大家带来的是手写RPC框架. 完整代码以及 ...

  7. 手写SpringMVC 框架

    手写SpringMVC框架 细嗅蔷薇 心有猛虎 背景:Spring 想必大家都听说过,可能现在更多流行的是Spring Boot 和Spring Cloud 框架:但是SpringMVC 作为一款实现 ...

  8. 手写Spring框架，加深对Spring工作机制的理解！

    在我们的日常工作中,经常会用到Spring.Spring Boot.Spring Cloud.Struts.Mybatis.Hibernate等开源框架,有了这些框架的诞生,平时的开发工作量也是变得越 ...

  9. 要想精通Mybatis？从手写Mybatis框架开始吧！

    1.Mybatis组成 动态SQL Config配置 Mapper配置 2.核心源码分析 Configuration源码解析 SqlSessionFactory源码解析 SqlSession源码解析 ...

随机推荐

  1. ClientScript.RegisterClientScriptBlock 不执行

    ClientScript.RegisterClientScriptBlock 不执行 页面中 form标签必须加入 runat=server

  2. bzoj 4765 普通计算姬 dfs序 + 分块

    题目链接 Description "奋战三星期,造台计算机".小G响应号召,花了三小时造了台普通计算姬.普通计算姬比普通计算机要厉害一些.普通计算机能计算数列区间和,而普通计算姬能 ...

  3. 杭电oj2072

    因为一直不能ac先发这里,希望有看到的大佬能指点一二. 先讲一下我的基本思路,首先将一整行数据保存在数组中,接着遍历数组,根据空格将每个单词存入二维数组中,最后遍历二维数组,找出其中不同的单词并计数. ...

  4. POCO库中文编程参考指南（2）基本数据类型（Poco/Types.h）

    POCO库中文编程参考指南(2)基本数据类型 作者:柳大·Poechant 博客:Blog.CSDN.net/Poechant 邮箱:zhongchao.ustc#gmail.com (# -> ...

  5. C/51单片机

    1.    串口也可以有多根线的,但是各线之间没有协调同步发送,而是各自是独自发送的.并口是同步发送,同步一次8位同时成功同时失败,类比事务. 2.    ASCII码的前32位是通讯预留的编码即使现 ...

  6. 【转载】Photoshop-制作图片圆角2种方法

    学习网址:http://www.23ps.com/photoshop/cjjc/300002034.htm 方案一: 使用选区和蒙版相结合,用图章制作圆角选区,删除多余部分 效果: 实现步骤: 一.如 ...

  7. BZOJ 4589 Hard Nim（FWT加速DP）

    题目链接  Hard Nim 设$f[i][j]$表示前$i$个数结束后异或和为$j$的方案数 那么$f[i][j] = f[i-1][j$ $\hat{}$ $k]$,满足$k$为不大于$m$的质数 ...

  8. struts2进阶

    Struts2 一.Struts的工作原理 Struts2的工作机制3.1Struts2体系结构图 Strut2的体系结构如图15所示: (图15) 3.2Struts2的工作机制 从图15可以看出, ...

  9. 线段树【p1607】[USACO09FEB]庙会班车Fair Shuttle

    Description 逛逛集市,兑兑奖品,看看节目对农夫约翰来说不算什么,可是他的奶牛们非常缺乏锻炼--如果要逛完一整天的集市,他们一定会筋疲力尽的.所以为了让奶牛们也能愉快地逛集市,约翰准备让奶牛 ...

  10. What makes grep consider a file to be binary?

    grep -a worked for me: $ grep --help [...] -a, --text equivalent to --binary-files=text