<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. python二 总结--函数-- 装饰器

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

  2. linux常用命令:more 命令

    more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...

  3. linux下怎么删除名称带空格的文件

    linux下怎么删除名称带空格的文件-rm 'mysql bin.000005' 用引号把文件名括起来 某些情况下会出现名称带空格的文件, 如果想要删除的话,直接用rm mysql bin.00000 ...

  4. C# 自定义承载控件

    例如ToolStripTextBox类,里面的封装就是一个TextBox控件..NET的类库提供了ToolStripComBox和ToolStripProgressBar两个类.这些类都是从ToolS ...

  5. 将jar包制作成docker镜像

    将jar包制作成docker镜像1.准备可运行jar包2.建立Dockerfile文件 文件内容: FROM java:8VOLUME /tmpADD xxx-sendemail-0.0.1-SNAP ...

  6. System.getSecurityManager()

    https://www.cnblogs.com/yiwangzhibujian/p/6207212.html java安全管理器SecurityManager入门   一.文章的目的 这是一篇对Jav ...

  7. win10自带虚拟机Hyper V联网

      在控制面板里打开程序和功能     打开启用或关闭windows 功能     勾选Hyper-V     在windows 管理工具打开Hyper-V 管理器   打开虚拟交换机管理器     ...

  8. MXNet官方文档中文版教程(3):神经网络图(Symbol)

    https://blog.csdn.net/qq_36165459/article/details/78394259 文档英文原版参见Symbol - Neural network graphs an ...

  9. git clone 报错Unable to negotiate with xxx.xxx.xxx.xxx port 12345: no matching key exchange method found. Their offer: diffie-hellman-group1-sha1

    在执行git clone命令报错 Unable to negotiate with xxx.xxx.xxx.xxx port 12345: no matching key exchange metho ...

  10. python之接口与抽象类

    一.接口与归一化设计 1.什么是接口 1)是一组功能集合 2)接口的功能是用于交互 3)接口只定义函数,但不涉及函数的实现 4)这些功能是相关的 2.为什么要用接口 接口提取了一群类共同的函数,然后让 ...