<script>
// 一句话 在构造函数里面写属性 在原型里面写方法
function Elem(d){
this.even=document.getElementById(d);
}
Elem.prototype.html=function(val){
var e = this.even;
if(val){
e.innerHTML=val;
return this; // 链式操作 返回整个这个Elem.prototype.html整体 ,不写这个return 就不能进行链式操作
}else{
return e.innerHTML;
}
}
Elem.prototype.on=function(type,fn){
var e = this.even;
e.addEventListener(type,fn);
return this;//同理 也是为了能够继续链式操作
}
var box = new Elem('page-info');
// box.html('123')
// box.on('click',function(){
// alert('test')
// })
// 上面注释部分的链式操作
// box.html('123').on('click',function(){ alert('test')})
box.html('123').on('click',function(){ alert('test')}).html('从123变成456')
</script>

字面量形式的原型不需要加function

  var   vehicle  = function(){
this.door=;
}
vehicle.prototype ={
getName: function(){
return 'vehicle'
},
getInfo: function(){
return [
this.getName(),'has',this.door,'doors'
].join(',')
}
}
var vehicle = new vehicle();
console.log(vehicle.getInfo()) // vehicle,has,4,doors

用原型封装一个操作DOM的例子的更多相关文章

  1. 自己封装的操作DOM方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JS21. 使用原生JS封装一个公共的Alert插件(HTML5: Shadow Dom)

    效果预览 Shadow DOM Web components  的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整 ...

  3. DOM编程艺术章12:一个简单的Ajax例子

    大概入了JavaScript的门,现在要回过头恶补Ajax和json了,随手翻到dom编程艺术发现有一个适合回忆的例子,先抄录下来,引入对Ajax作用的大概印象,再去掰开了研究. <!DOCTY ...

  4. 一个最简的Thinkphp3.2 操作Mongodb的例子

    看到Thinkphp网站上没有调用Mongodb的例子,就写一个一个最简的Thinkphp操作Mongodb的例子.欢迎讨论[前提]Thinkphp对Mongdb的支持依赖于PHP对Mongodb的支 ...

  5. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  6. 一个少女心满满的例子带你入门canvas

    https://blog.csdn.net/sunshine940326/article/details/76572850 本文首发于我的个人博客:http://cherryblog.site/ gi ...

  7. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  8. JavaScript操作DOM与jQuyer操作DOM的对比

    1.通过jQuery方法包装后的对象,是一个类数组对象.它与DOM对象完全不同,唯一相似的是它们都能操作DOM. 2.通过jQuery方法包装后的对象,是一个类数组对象.它与DOM对象完全不同,唯一相 ...

  9. Javascript操作DOM常用API总结

    基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...

随机推荐

  1. [mysql]Date和String相互转换(DATE_FORMAT&STR_TO_DATE)

    1.Date  ——>  String 使用的函数:DATE_FORMAT(date,format)     date:需要转换的日期       format:格式化的样式 format样式整 ...

  2. python二 总结--函数-- 装饰器

    装饰器是什么? 有什么用? 为什么要用? 真的有用吗? 1.装饰器: 装饰器: 定义:本质是函数,(装饰其他函数)就是为其他函数添加附加功能. 原则:1.不能修改被装饰的函数的源代码          ...

  3. 【Linux学习三】VI/VIM全屏文本编辑器

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 一.打开关闭文件打开文件:vim /path/to/somefilev ...

  4. QNetworkAccessManager

    [1]头文件 想要利用QNetworkAccessManager类,必须在pro文件中添加对应库network,如下: QT += network 如果利用的VS + QT开发环境,请参考随笔< ...

  5. flask 单个页面多个表单(单视图处理、多视图处理)

    单个页面多个表单 除了在单个表单上实现多个提交按钮,有时还需要在单个页面上创建多个表单.比如,在程序的主页上同时添加登录和注册表单.当在同一个页面上添加多个表单时,我们需要解决的问题是在视图函数中判断 ...

  6. word2vec原理知识铺垫

    word2vec: 词向量计算工具====>训练结果 词向量(word embedding) 可以很好的度量词与词的相似性,word2vec为浅层神经网络 *值得注意的是,word2vec是计算 ...

  7. xshell中出现的绿色背景的文件夹

    这种文件夹表示权限为777的文件夹 可以使用chmod 777 fileName进行权限修改 如果需要将文件夹以及其子文件夹的权限全部置为777 chmod 777 -R directoryName/ ...

  8. 利用iOS中Safari浏览器创建伪Web App

    在safari浏览器里有一个“添加到主屏幕”选项,我们可以用来创建伪Web App,下面来了解一下iOS中Safari的私有属性 第一步设置Web App的主屏幕图标: 有两种属性值apple-tou ...

  9. Kali Linux没有无线网卡?玩个锤纸~

    一.USB无限网卡 使用Kali linux,先准备好一个适合Kali系统的USB外置无限网卡,注意内置网卡并不适合渗透测试. Linux系统的指令相对于一般人来说比较晦涩难懂,最好选择免驱动类型,省 ...

  10. Python进阶【第十一篇】模块(下)之常用模块

    内置模块是Python自带的功能,在使用内置模块相应的功能时,需要[先导入]再[使用] 一.time模块 在Python中,通常有这几种方式来表示时间: 时间戳(timestamp):通常来说,时间戳 ...