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. (转)cygwin个性化配置

    http://blog.cong.co/cygwin.html#%E5%AE%9A%E4%B9%89%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F配置 cygwin 中的服务 ...

  2. 初学springMVC的拦截器

    springMvc拦截器的执行顺序! 拦截器的各个方法的作用: /** * 登录验证拦截器 */      public class Intercepter implements HandlerInt ...

  3. 【ACM】不要62 （数位DP）

    题目:http://acm.acmcoder.com/showproblem.php?pid=2089 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer).杭州交通管理局经常会扩充一些的士车牌照,新 ...

  4. Selenium2+python自动化11-定位一组元素find_elements【转载】

    前言 前面的几篇都是讲如何定位一个元素,有时候一个页面上有多个对象需要操作,如果一个个去定位的话,比较繁琐,这时候就可以定位一组对象. webdriver 提供了定位一组元素的方法,跟前面八种定位方式 ...

  5. sysbench（mysql测试工具 ）

    目录 一.基准测试简介 1.什么是基准测试 2.基准测试的作用 3.基准测试的指标 4.基准测试的分类 二.sysbench 1.sysbench简介 2.sysbench安装 3.sysbench语 ...

  6. (sql server)玩转-数据库行列转换

    虽然开发过程中没用过行列转换,但是听说面试时常常会遇到这个问题,以前在网上也看到过大神的例子,今天自己仔细的玩了下,希望和大家分享一下了. 注意:列转行的方法可能是我独创的了,呵呵,因为在网上找不到哦 ...

  7. laravel 安装碰到的问题：全局安装 Laravel Installer，然后用下面的指令创建新项目： laravel new blog报连接超时解决方案

    在执行laravel new project 的时候报错 cURL error 7: Failed to connect to cabinet.laravel.com port 80: Timed o ...

  8. CF978C Letters【前缀和+二分查找/几房几号】

    [链接]:CF978C [分析]:在前缀和数组种二分找到>=询问数的位置,根据位置就好操作了 [代码]: #include<bits/stdc++.h> using namespac ...

  9. bzoj 3462: DZY Loves Math II

    3462: DZY Loves Math II Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 211  Solved: 103[Submit][Sta ...

  10. 使用Windows Live Writer开始发布cnblogs日志的方法

    1.下载Windows Live Writer http://www.microsoft.com/zh-cn/download/confirmation.aspx?id=8621 2.安装Window ...