<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. html5-div布局

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

  2. GGTalk即时通讯系统(支持广域网)终于有移动端了!(技术原理、实现、源码)

    首先要感谢大家一直以来对于GGTalk即时通讯系统的关注和支持!GGTalk即时通讯系统的不断完善与大家的支持分不开! 从2013年最初的GG1.0开放源码以来,到后来陆续增加了网盘功能.远程协助功能 ...

  3. caffe生成voc格式lmdb

    要训练ssd基本都是在liu wei框架下改,生成lmdb这一关照葫芦画瓢总遇坑,记录之: 1. labelmap_voc.prototxt要根据自己的分类修改,比如人脸检测改成这样: item { ...

  4. numpy.random随机数生成

    seed 确定随机数生成器的种子 permutation 返回一个序列的随机排列或返回一个随机排列的返回 shuffle 对一个序列就地随机乱序 rand 产生均匀分布的样本值 randint 从给定 ...

  5. Shell 脚本编程基础

    通过本文记录学习Linux Shell的一些笔记思考和总结,以加强记忆和理解.主要学习参考资料有: 1.<鸟哥的Linux私房菜-基础篇>第四版 2.菜鸟教程——Linux教程 3.ear ...

  6. C++中set用法详解

    1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...

  7. vue 实现modal

    本文只是作为练习弹出框,弹框内部的东西需要进行自定义添加,主要对更新,删除,新建 ,提示四种弹框进行实现,例子中只是简单的组件应用 Modal.vue文件 <template> <d ...

  8. 目标检测论文阅读:Deformable Convolutional Networks

    https://blog.csdn.net/qq_21949357/article/details/80538255 这篇论文其实读起来还是比较难懂的,主要是细节部分很需要推敲,尤其是deformab ...

  9. Linux共享内存的管理

    在进程通信应用中会用到共享内存,这就涉及到了IPC,与IPC相关的命令包括:ipcs.ipcrm(释放IPC).IPCS命令是Linux下显示进程间通信设施状态的工具.我们知道,系统进行进程间通信(I ...

  10. python的os模块中的os.walk()函数

    os.walk('path')函数对于每个目录返回一个三元组,(dirpath, dirnames, filenames), 第一个是路径,第二个是路径下面的目录,第三个是路径下面的文件 如果加参数t ...