用原型封装一个操作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中所有节点类型实现.这 ...
随机推荐
- 向SQL Server中导入Excel的数据
1. 手动界面导入Excel数据 同 https://jingyan.baidu.com/article/ce09321b9a0e252bff858ff9.html 首先打开并登陆sql serve ...
- Hive和sparksql中的dayofweek
dayofweek在hive2.2.0开始支持 ,低版本的hive没有提供原生的dayofweek函数,有时需要用到的时候不甚方便.其实低版本的sparksql和hive中可用以下方式实现dayofw ...
- flask 表单
表单 在Web程序中,表单时和用户交互最常见的方式之一.用户注册.登录.撰写文章.编辑设置,无一不用到表单.不过,表单的处理不简单.要创建表单,验证用户输入的内容,向用户显示错误提示,还要获取并保存数 ...
- Qt浅谈之一:内存泄露(总结)
一.简介 Qt内存管理机制:Qt 在内部能够维护对象的层次结构.对于可视元素,这种层次结构就是子组件与父组件的关系:对于非可视元素,则是一个对象与另一个对象的从属关系.在 Qt 中,在 Q ...
- PNG文件格式详解
源文件地址:https://blog.mythsman.com/2015/12/08/1/ 最近在看隐写术的时候经常需要研究图片文件的二进制文档格式,那么这就很有必要了解我们的图片文件究竟是如何保存的 ...
- URL的解析,C语言实现
源: URL的解析,C语言实现 c语言实现urlencode和decode
- Maven笔记 #01# 入门
索引 Maven是干什么的? 用Maven的好处 Maven与命令行 Maven与IntelliJ IDEA 一.Maven是干什么的? 我相信只要你写过足够多的代码,就... 肯定有思考过写一个脚本 ...
- Java笔记 #03# HtmlUnit爬虫
存档留用 (= 存档留着备用) 爬的是一个开放的自动回复机器人 API 网站 http://i.itpk.cn/. 结构 大致如下: 我做的事情就是[输入文字,点击按钮,爬取内容],如上图所示. pa ...
- 在nginx的http模块下面,一个server就可以看做一个站点,配置形式大概是这样的:
http { index index.php index.htm index.html; server { server_name www.site1.com; location / { # [... ...
- thinkphp 整合微信支付-简单粗暴
<?php//判断是否是微信客户端--该代码只适用于手机微信端--使用方法请看最后面注释if (isset($_SERVER['HTTP_USER_AGENT']) && str ...