用原型封装一个操作DOM的例子
<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的例子的更多相关文章
- 自己封装的操作DOM方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS21. 使用原生JS封装一个公共的Alert插件(HTML5: Shadow Dom)
效果预览 Shadow DOM Web components 的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整 ...
- DOM编程艺术章12:一个简单的Ajax例子
大概入了JavaScript的门,现在要回过头恶补Ajax和json了,随手翻到dom编程艺术发现有一个适合回忆的例子,先抄录下来,引入对Ajax作用的大概印象,再去掰开了研究. <!DOCTY ...
- 一个最简的Thinkphp3.2 操作Mongodb的例子
看到Thinkphp网站上没有调用Mongodb的例子,就写一个一个最简的Thinkphp操作Mongodb的例子.欢迎讨论[前提]Thinkphp对Mongdb的支持依赖于PHP对Mongodb的支 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 一个少女心满满的例子带你入门canvas
https://blog.csdn.net/sunshine940326/article/details/76572850 本文首发于我的个人博客:http://cherryblog.site/ gi ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- JavaScript操作DOM与jQuyer操作DOM的对比
1.通过jQuery方法包装后的对象,是一个类数组对象.它与DOM对象完全不同,唯一相似的是它们都能操作DOM. 2.通过jQuery方法包装后的对象,是一个类数组对象.它与DOM对象完全不同,唯一相 ...
- Javascript操作DOM常用API总结
基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...
随机推荐
- python二 总结--函数-- 装饰器
装饰器是什么? 有什么用? 为什么要用? 真的有用吗? 1.装饰器: 装饰器: 定义:本质是函数,(装饰其他函数)就是为其他函数添加附加功能. 原则:1.不能修改被装饰的函数的源代码 ...
- linux常用命令:more 命令
more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...
- linux下怎么删除名称带空格的文件
linux下怎么删除名称带空格的文件-rm 'mysql bin.000005' 用引号把文件名括起来 某些情况下会出现名称带空格的文件, 如果想要删除的话,直接用rm mysql bin.00000 ...
- C# 自定义承载控件
例如ToolStripTextBox类,里面的封装就是一个TextBox控件..NET的类库提供了ToolStripComBox和ToolStripProgressBar两个类.这些类都是从ToolS ...
- 将jar包制作成docker镜像
将jar包制作成docker镜像1.准备可运行jar包2.建立Dockerfile文件 文件内容: FROM java:8VOLUME /tmpADD xxx-sendemail-0.0.1-SNAP ...
- System.getSecurityManager()
https://www.cnblogs.com/yiwangzhibujian/p/6207212.html java安全管理器SecurityManager入门 一.文章的目的 这是一篇对Jav ...
- win10自带虚拟机Hyper V联网
在控制面板里打开程序和功能 打开启用或关闭windows 功能 勾选Hyper-V 在windows 管理工具打开Hyper-V 管理器 打开虚拟交换机管理器 ...
- MXNet官方文档中文版教程(3):神经网络图(Symbol)
https://blog.csdn.net/qq_36165459/article/details/78394259 文档英文原版参见Symbol - Neural network graphs an ...
- 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 ...
- python之接口与抽象类
一.接口与归一化设计 1.什么是接口 1)是一组功能集合 2)接口的功能是用于交互 3)接口只定义函数,但不涉及函数的实现 4)这些功能是相关的 2.为什么要用接口 接口提取了一群类共同的函数,然后让 ...