<!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 自定义属性的更多相关文章

  1. 编写可维护的JS 05

    5.UI层的松耦合 松耦合定义 每个组件尽量独立,修改一个不影响其他的组件 将Js从css中抽离 不要使用css表达式,因为浏览器会以高频率重复计算css表达式,严重影响性能,IE9不支持表达式 将C ...

  2. [Node.js] 05 - Modules and Function

    一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码.JSON 或者编译过的C/C++ 扩展. 模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的. No ...

  3. JS——绑定自定义属性

    1.绑定自定义属性: (1)元素节点.属性或元素节点[属性]绑定的属性不会出现在标签中,setAttribute可以出现在标签中. (2)setAttribute获取不到元素节点.属性形式绑定的属性值 ...

  4. JS 05 json

    1.下载jar包: https://www.github.com/alibaba/fastjson/releases https://www.mvnrepository.com/artifact/co ...

  5. js 获取自定义属性值

    html: <p tid="1" onClick="change()">111</p> <p tid="2" ...

  6. 关于JS的总结

    =============================================事件:(事件必须小写) 用户的操作 onclick onmouseover onmouseout======= ...

  7. js复制内容到剪切板，兼容pc和手机端，支持Safari浏览器

      最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...

  8. js实现复制内容到剪切板，兼容pc和手机端，支持Safari浏览器

    Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...

  9. [React] 05 - Route: connect with ExpressJS

    基础: 初步理解:Node.js Express 框架 参见:[Node.js] 08 - Web Server and REST API 进阶: Ref: 如何系统地学习 Express?[该网页有 ...

  10. 全负荷的 Node.js[转载]

    一个Node.JS 的进程只会运行在单个的物理核心上,就是因为这一点,在开发可扩展的服务器的时候就需要格外的注意. 因为有一系列稳定的API,加上原生扩展的开发来管理进程,所以有很多不同的方法来设计一 ...

随机推荐

  1. POJ 3122 Pie 二分答案

    题意:给你n个派,每个派都是高为一的圆柱体,把它等分成f份,每份的最大体积是多少. 思路: 明显的二分答案题-- 注意π的取值- 3.14159265359 这样才能AC,,, //By Sirius ...

  2. 洛谷P3195 [HNOI2008]玩具装箱TOY（单调队列优化DP）

    题目描述 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1...N的N件玩具, ...

  3. 当fastJson邂逅大写字段时

    在项目中遇到了一件令人头疼的事.使用fastJson反序列化时下面的Json时,得到对象属性总为null(如下图),可能细心的朋友一看就知道问题出在哪里,没错!问题就出在返回的字段首字母给大写了.fa ...

  4. 关于Mantle使用个人的一些见解

    前一个月,我接触到了Mantle,由于项目采用的是MVC的设计模式,选用好的model也是至关重要的.先介绍下Mantle的使用吧. 首先定义好数据模型: @property (nonatomic, ...

  5. ML words

    samples:样本 multi-dimensional entry / multivariate data:多属性记录 features:特征,属性 supervised learning:监督学习 ...

  6. NodeJS学习笔记 (11)网络UDP-dgram(ok)

    模块概览 dgram模块是对UDP socket的一层封装,相对net模块简单很多,下面看例子. UPD客户端 vs UDP服务端 首先,启动UDP server,监听来自端口33333的请求. se ...

  7. MPI并行计算模拟N体问题

    实验内容 N体问题是指找出已知初始位置.速度和质量的多个物体在经典力学情况下的后续运动.在本次实验中,你需要模拟N个物体在二维空间中的运动情况.通过计算每两个物体之间的相互作用力,可以确定下一个时间周 ...

  8. Centos7（阿里云服务器）安装Anaconda的详细步骤与心得

    在本地安装Anaconda的各个版本的文章已经很多,但是感觉不是很详细,因此,在此发发自己在Centos7(阿里云服务器)安装Anaconda的心得和步骤: 注:需要注意的地方会用不同颜色区别. 1. ...

  9. 题解 P2872 【[USACO07DEC]道路建设Building Roads】

    这道题真的是令人窒息,Kruskal调了贼久一直RE,最后发现数组大小稍微少了那么一点点.(也就10倍吧..) 言归正传,根据本人的分析(以及算法标签的提示),这是一道求最小生成树的题目,当然要注意已 ...

  10. 怎么打开/查看MySQL的SQL记录

    mysql在执行sql的时候会在日志当中记录很多信息,当然包括执行的所有语句.下面以使用navicat for mysql为例,来展示一下如何打开/查看MySQL的SQL记录: 打开navicat f ...