1. 写一个构造函数G,调用G 时,返回G上的fn 对象的init() 的实例

2.设置G.fn 的指向,使用G.fn 与G.prototype指向同一个对象

2.1 重写G.prototype 对象,修复constructor 的指向为G,确认调用init()时的要处理的内容:主要是获取元素,init()中有两个参数,分别是选择器selector 和 选择范围context,根据这两个参数查找到需要选择的元素

2.2  通过init 设置实例上属性的值

2.4 返回 这个实例

3.重写G.fn.init.prototype ,把这个原型对象指向G.fn ,即G.fn.init.prototype = G.fn ,这样G.fn.init() 的实例就可以调用G.fn 上的属性和方法了

4.在G上扩展函数extend,同时在G.fn上也扩展extend,把这两个扩展指向同一个函数,即G.extend = G.fn.extend = function(){}, 这样,调用了扩展函数也可以同时调用G 的原型对象上的属性和方法了;

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 创建一个构造函数,函数有两个参数,分别为选择器selector 和 选择范围,
// 当调用G函数时,返回G的fn对象上的init()的实例
var G = function(selector, context) {
return new G.fn.init(selector, context);
};
// G的fn指向与G.prototype都指向一个匿名对象{} G.fn = G.prototype = {
// 设置匿名对象的constructor的属性,使这个属性指向构造函数,修复原型对象的指向
constructor: G,
// 对象上有一个初始化函数,有两个参数selector,和context,分别代表选择器和选择范围;
// this 指向prototype,操作init(),设置proto上的属性,
init: function(selector, context) {
this.length = 0; // 设置this.length 属性为0
var context = context || document; // 当有范围时,选择范围,没有范围时,context就直接赋值为context
if (selector.indexOf("#") == 0) { // 当选择器中有#号时,说明是Id选择器,
this[0] = document.getElementById(selector.substring(1)); // 直接设置this[0] 为选中的Id元素
this.length = 1; // 同时设置this.length 属性为1,因为只有一个元素
} else {
var aNode = context.getElementsByTagName(selector); // 当选择器为元素选择器时,获取所有的元素
for (var i = 0, len = aNode.length; i < len; i++) { // 对所有的元素进行遍历
this[i] = aNode[i]; // 对应的元素赋值给this中对象的下标属性
};
this.length = len; // 设置this.length 的属性为元素的个数
};
this.selector = selector; //把元素的选择器也放到this的属性里
this.context = context; //把元素的范围也放到this的属性里
return this; // 返回this对象
},
length: 0, // 原型对象上的属性,初始为0
size: function() { // 原型对象上的size() 函数
return this.length;
}
}
// 重写G.fn.init的原型对象,即G.fn.init.prototype
G.fn.init.prototype = G.fn; // 这里是为了确保 init()的实例可以调用G.prototype 原型对象上的属性和方法
// 把扩展的函数extend 挂载在G 上,同时也挂载在G.prototype上,这两个挂载指向同一个函数 ,这个函数返回dst;
// 当G的实例调用这个扩展函数时,就直接调用这个匿名函数了
G.extend = G.fn.extend = function() {
var i = 1,
len = arguments.length,
dst = arguments[0],
j;
if (i == len) {
dst = this;
i--;
};
for (; i < len; i++) {
for (j in arguments[i]) {
dst[j] = arguments[i][j];
}
}
return dst;
};
window.onload = function() {
console.log(G("#box"));
G("#box")[0].style.background = "#789";
G("ul")[1].style.color = 'red';
console.log(G("ul"));
console.log(G("#box").extend({
'name': 'huanying2015'
}, {
'sex': 'man'
}, {
'age': 25
}, {
'show': function() {
console.log("huanying2015");
}
}));
}
</script>
</head>
<body>
<div class="box" id="box">huanying2015,这是一个测试</div>
<ul id="box2">huanying2015,这是另外一个测试</ul>
<ul id="box3">huanying2015,这是再一个测试</ul>
</body>
</html>

运行结果:

jquery 设计的扩展---初级的更多相关文章

  1. jquery 设计的思路-----初级

    jquery.js 很经典,其中有一些设计思路简直非常经典 1.安全的创建一个构造函数并进行调用: <script> // 这是一种安全的构造函数的创建方法,在调用构造函数G的时候,不论使 ...

  2. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  3. jQuery设计思想

    jQuery设计思想 原文网址:http://jqfundamentals.com/book/ 阮一峰 翻译整理 [目录] 一.选择网页元素 二.改变结果集 三.链式操作 四.元素的操作:取值和赋值 ...

  4. Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式

    Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式 >>>>>>>>>>>>>> ...

  5. jQuery,js如何扩展自定义方法

    (jQuery.fn.myMethod=function () { alert('myMethod'); }) (function ($) { $.fn.extend({ myMethod : fun ...

  6. JQuery的extend扩展方法

    jQuery.extend 函数使用详解   JQuery的extend扩展方法:      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去 ...

  7. 基于OAS设计可扩展OpenAPI

    前言 随着互联网行业的兴起,开发模式已逐步转换为微服务自治:小团队开发微服务,然后通过Restful接口相互调用.开发者们越来越渴望能够使用一种“官话”进行流畅的沟通,甚至实现多种编程语言系统的自动化 ...

  8. JQ实现选项卡(jQuery原型插件扩展)

    下边分为两个版本,一种是点击切换选项(index.js),一种是滑过切换选项(index1.js) HTML文件: jq使用jquery-1.11.3.js版本 <!DOCTYPE html&g ...

  9. JQuery系列(6) - jQuery设计思想

    jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. JQuery设计 ...

随机推荐

  1. java的几种引用

    强引用:无论内存是否足够,不会回收. 软引用:内存不足时,回收该引用关联的对象. 弱引用:垃圾回收时,无论内存是否足够,都会回收. 虚引用:任何时候都可能被垃圾回收器回收. 在Java中,虽然不需要程 ...

  2. linux系统安装SNMP(可用)

    一般我们监控Linux都是通过SSH或Telnet方式,有时候我们不方便通过这两种方式,比如遇到监控端口因为安全原因被封禁.以及SSH需要密钥登录,这都会让监控工具很难直接远程连接.而通过SNMP的方 ...

  3. Java基础知识_毕向东_Java基础视频教程笔记(19-21 IO流)

    18天-06-IO流 字节流和字符流 字节流两个基类:InputStream,FileInputStream,BufferedInputStream OutputStream,FileOutputSt ...

  4. sso CAS

    sso:single sign on,在多个应用系统中,用户只需要登陆一次就可以访问所有相互信任的应用系统 CAS框架:Central Authentication Service是实现sso单点登录 ...

  5. maven的web项目和shiro集成的问题

    在自定义shiro然后在加入spring的配置文件时,启动tomcat的时候一直报错 原因:刚学,对maven的依赖构建属性不熟悉 只是完成了maven父项目和子项目的依赖关系,并没有配置子项目之间的 ...

  6. MapReduce Demo

    功能:统计公司员工一个月内手机上网上行流量.下行流量及总流量. 测试数据如下: 13612345678     6000    1000 13612345678     2000    3000 13 ...

  7. CS229 6.15 Neurons Networks Deep Belief Networks

    Hintion老爷子在06年的science上的论文里阐述了 RBMs 可以堆叠起来并且通过逐层贪婪的方式来训练,这种网络被称作Deep Belife Networks(DBN),DBN是一种可以学习 ...

  8. Centos7基于容器安装运行Docker私有仓库及添加认证

    一.前言 官方的Docker hub是一个用于管理公共镜像的好地方,我们可以在上面找到我们想要的镜像,也可以把我们自己的镜像推送上去.但是,有时候,我们的使用场景需要我们拥有一个私有的镜像仓库用于管理 ...

  9. Error running app: Default Activity not found ; 安卓程序运行不了,也不报错。

    我最近copy一个工程,写完了去运行时不能运行,项目不报错,就是运行的地方有个叉号:尝试很多办法后准备重新New一个时发现:"10:17 Error running app: Default ...

  10. 禁用SSL v2.0、SSL v3.0协议

    1.禁用SSL v2.0.SSL v3.0协议,禁用低强度加密密钥.使用TLS 1 TLSv1.1 TLSv1.2版本.2.禁用SSLv2参考修补方法如下:查看本机sslv3加密列表:openssl ...