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,加上原生扩展的开发来管理进程,所以有很多不同的方法来设计一 ...
随机推荐
- django 笔记5 外键 ForeignKey
class UsserGroup(models.Model): uid = models.AutoField(primary_key=True) caption = models.CharField( ...
- Android--ViewPager-Fragment
package com.cnn.viewpager02; import java.util.ArrayList; import java.util.List; import android.os.Bu ...
- 空宏-标C中空宏的妙用
空宏的作用: 1)编译指示: 2)方便阅读: 定义宏,并在预处理过程中将其替换为空字符串(即删除) 偶然的机会,看到了下面的C代码:ISC_PLATFORM_NORETURN_PRE static v ...
- MySQL 大数据量文本插入
导入几万条数据需要等好几分钟的朋友来围观一下! 百万条数据插入,只在一瞬间.呵呵夸张,夸张!! 不到半分钟是真的! 插入指令: load data infile 'c:/wamp/tmp/Data_O ...
- 洛谷1073 NOIP2009 最优贸易
题目大意 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路,双 ...
- 解决Python 插查 MySQL 时中文乱码问题
首先找到这里的解决方法, count = cursor.fetchall() for i in count: idc_a = i[0] if isinstance(idc_a, unicode): i ...
- POJ——T 3728 The merchant
http://poj.org/problem?id=3728 Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 5068 A ...
- jquery快速清除复选框、单选框的选中
$(":checked").attr("checked", "");
- 移动App架构设计
移动App架构设计 本文主要总结了几种经常使用的架构模式, 基本是层层递进的转载请注名出处 http://blog.csdn.net/uxyheaven, 良好的排版在https://github.c ...
- AFNetworking框架的使用
#import "ViewController.h" #import "AFNetworking.h" @interface ViewController () ...