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. Android控件点击事件

    1. 介绍 本文介绍了Android控件的点击事件 Android控件点击(onClick)事件可以用如下三种方式来实现 2. 实现onClick方法 在layout的xml中指定onClick方法, ...

  2. Windows录音API学习笔记--转

    Windows录音API学习笔记 结构体和函数信息  结构体 WAVEINCAPS 该结构描述了一个波形音频输入设备的能力. typedef struct { WORD      wMid; 用于波形 ...

  3. Centos7一键安装lnmp脚本

    mkdir /root/softwarewget http://mirrors.sohu.com/mysql/MySQL-5.7/mysql-boost-5.7.18.tar.gzwget https ...

  4. hdu 5108(数论-整数分解)

    Alexandra and Prime Numbers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...

  5. AC日记——Mice and Holes codeforces 797f

    797F - Mice and Holes 思路: XXYXX: 代码: #include <cmath> #include <cstdio> #include <cst ...

  6. MSSQL取得或删除重复数据

    1.取得不重复的数据 select * from Persons where Id in ( SELECT MAX(Id) AS Expr1 FROM Persons GROUP BY Name, G ...

  7. CF986A Fair【图论/BFS】

    [题意]: 有些公司将在Byteland举办公平的会议.Byteland的n个城镇,m条两镇之间的双向道路.当然,你可以使用道路从任一个城镇到达任何城镇. 有k种商品产自Byteland,并且每个城镇 ...

  8. CSS，HTML页面定制

    /*simplememory*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlight ...

  9. 你也许还不知道const_cast,static_cast,dynamic_cast,reinterpret_cast的区别吧？

    [QQ群: 189191838,对算法和C++感兴趣可以进来]       开篇立意: C++中各种转换令人眼花缭乱,看似差不多,实际差很多,而且在当今时间,做一个"差不多先生"其 ...

  10. iOS AudioSession详解 Category选择 听筒扬声器切换

    在你读这篇文章之前,如果你不嫌读英文太累,推荐阅读下苹果iOS Human Interface Guidelines中Sound这一章.   选择一个Category AVAudioSessionCa ...