js---05 自定义属性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { list-style:none; width:114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; }
</style>
<script>
window.onload = function (){
var aLi = document.getElementsByTagName('li');
// var onOff = true; // 只能控制一组!
for( var i=0; i<aLi.length; i++ ){
aLi[i].onOff = true;
aLi[i].onclick = function (){
// alert( this.style.background );
// 背景不能判断
// color red #f00
// 相对路径
if ( this.onOff ) {
this.style.background = 'url(img/active.png)';
this.onOff = false;
} else {
this.style.background = 'url(img/normal.png)';
this.onOff = true;
}
};
}
};
</script>
</head> <body> <ul>
<li></li>
<li></li>
<li></li>
</ul> </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var aBtn = document.getElementsByTagName('input');
// 想建立“匹配”“对应”关系,就用索引值
var arr = [ '莫涛', '张森', '杜鹏' ];
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].index = i; // 每个都加一个属性,自定义属性(索引值)
aBtn[i].onclick = function (){
// alert( arr[ this.index ] );
this.value = arr[ this.index ];
};
}
};
</script>
</head> <body> <input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" /> </body>
</html>
window.onload = function (){
var aBtn = document.getElementsByTagName('input');
// aBtn[0].abc = 123; // 自定义属性
// alert( aBtn[0].abc );
// aBtn[0].abc = 456;
// JS 可以为任何HTML元素添加任意个 自定义属性
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].abc = 123;
aBtn[i].xyz = true;
}
}; arrLi[i].onclick = function (){
for( var i=0; i<arrLi.length; i++ ){
if( arrLi[i] !=this ){
arrLi[i].className = '';
}
}
if( this.className == '' ){
this.className = 'hover';
}else{
this.className = '';
}
}; for( var i=0; i<aUl.length; i++ ){
aLi = aUl[i].getElementsByTagName('li');
for( var j=0; j<aLi.length; j++ ){
arrLi.push( aLi[j] );
}
} for( var i=0; i<aH2.length; i++ ){
aH2[i].index = i;
aH2[i].onclick = function (){ for( var i=0; i<aH2.length; i++ ){
if( i != this.index ){
aUl[i].style.display = 'none';
aH2[i].className = '';
}
} if( this.className == '' ){
aUl[this.index].style.display = 'block';
this.className = 'active';
} else {
aUl[this.index].style.display = 'none';
this.className = '';
}
};
}
js---05 自定义属性的更多相关文章
- 编写可维护的JS 05
5.UI层的松耦合 松耦合定义 每个组件尽量独立,修改一个不影响其他的组件 将Js从css中抽离 不要使用css表达式,因为浏览器会以高频率重复计算css表达式,严重影响性能,IE9不支持表达式 将C ...
- [Node.js] 05 - Modules and Function
一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码.JSON 或者编译过的C/C++ 扩展. 模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的. No ...
- JS——绑定自定义属性
1.绑定自定义属性: (1)元素节点.属性或元素节点[属性]绑定的属性不会出现在标签中,setAttribute可以出现在标签中. (2)setAttribute获取不到元素节点.属性形式绑定的属性值 ...
- JS 05 json
1.下载jar包: https://www.github.com/alibaba/fastjson/releases https://www.mvnrepository.com/artifact/co ...
- js 获取自定义属性值
html: <p tid="1" onClick="change()">111</p> <p tid="2" ...
- 关于JS的总结
=============================================事件:(事件必须小写) 用户的操作 onclick onmouseover onmouseout======= ...
- js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...
- js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...
- [React] 05 - Route: connect with ExpressJS
基础: 初步理解:Node.js Express 框架 参见:[Node.js] 08 - Web Server and REST API 进阶: Ref: 如何系统地学习 Express?[该网页有 ...
- 全负荷的 Node.js[转载]
一个Node.JS 的进程只会运行在单个的物理核心上,就是因为这一点,在开发可扩展的服务器的时候就需要格外的注意. 因为有一系列稳定的API,加上原生扩展的开发来管理进程,所以有很多不同的方法来设计一 ...
随机推荐
- 25.不改变原生数据的STL algorithm
通过仿函数for_each操作 vector<,,,, }; list<double> db{ 1.1,2.2,3.3,4.4,5.5 }; //循环算法,算法的泛型 print p ...
- 支付宝SDK集成加密库迁移错误问题
最近项目中集成了第三方支付,主要有微信支付和支付宝支付,当然这里我主要想说一下关于集成支付宝支付. 首先从支付宝开发者网站上下载下来了SDK以及DEMO,我们就可以根据DEMO进行分析以及集成.支付宝 ...
- NSURLSession的作用
NSURLSession的作用: 1.全局配置: 2.任务生成与管理: 3.数据链接管理: po self.urlSession.delegateQueue.operations <__NSAr ...
- Decorator - 利用装饰器武装前端代码
历史 以前做后端时,接触过一点Spring,也是第一次了解DI.IOC等概念,面向切面编程,对于面向对象编程还不怎么熟练的情况下,整个人慌的一批,它的日志记录.数据库配置等都非常方便,不回侵入到业务代 ...
- 转移顺序的艺术 luogu4394 + lougu2966 + luogu3537
lougu4394: N个政党要组成一个联合内阁,每个党都有自己的席位数. 现在希望你找出一种方案,你选中的党的席位数要大于总数的一半,并且联合内阁的席位数越多越好. 对于一个联合内阁,如果某个政党退 ...
- 题解 CF327C 【Magic Five】
这道题带坑,假如没有发现肯定会爆. 首先先搜索一遍0和5,储存在数组a里面. 那么应当有2 ^ a1 +2 ^ a2 +...+ 2 ^ an. 然而这道题没那么简单,数串还可以重复k次. 因此,需要 ...
- Hadoop学习总结(1)——大数据以及Hadoop相关概念介绍
一.大数据的基本概念 1.1.什么是大数据 大数据指的就是要处理的数据是TB级别以上的数据.大数据是以TB级别起步的.在计算机当中,存放到硬盘上面的文件都会占用一定的存储空间,例如: 文件占用的存储空 ...
- 【转】30分钟掌握 C#6
[转]30分钟掌握 C#6 1. 只读自动属性(Read-only auto-properties) C# 6之前我们构建只读自动属性: public string FirstName { get; ...
- centos7 安装rsyslog
http://blog.csdn.net/u011630575/article/details/50896781 http://blog.chinaunix.net/uid-21142030-id-5 ...
- 洛谷 P1824 进击的奶牛
P1824 进击的奶牛 题目描述 Farmer John建造了一个有N(2<=N<=100,000)个隔间的牛棚,这些隔间分布在一条直线上,坐标是x1,...,xN (0<=xi&l ...