javascript-初级-day03自定义属性

day01-自定义属性应用

<!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>

day02-自定义属性应用-按钮控制一组应用的变化

<!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 = [ 'A', 'B', 'C', 'D' ];

    for( var i=0; i<aBtn.length; i++ ){

        aBtn[i].num = 0;

        aBtn[i].onclick = function (){

            // alert( arr[ this.num ] );

            this.value = arr[ this.num ];

            this.num++;

            if( this.num === arr.length ){

                this.num = 0;

            }

        };

    }

};

</script>

</head>

<body>

<input type="button" value="0" />

<input type="button" value="0" />

<input type="button" value="0" />

</body>

</html>

初始值都是0，点击一次变成a,再次点击，b..c,d,a.....

day03-自定义属性索引值的应用

<!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 aP = document.getElementsByTagName('p');

    // 想建立“匹配”“对应”关系，就用索引值

    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 ];

            aP[ this.index ].innerHTML = arr[ this.index ];

        };

    }

};

</script>

</head>

<body>

<input type="button" value="btn1" />

<input type="button" value="btn2" />

<input type="button" value="btn3" />

<p>a</p>

<p>b</p>

<p>c</p>

</body>

</html>

day04-图片切换实例

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

ul { padding:0; margin:0; }

li { list-style:none; }

body { background:#333; }

#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }

#pic img { width:400px; height:500px; }

#pic ul { width:40px; position:absolute; top:0; right:-50px; }

#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }

#pic .active { background:#FC3; }

#pic span { top:0; }

#pic p { bottom:0; margin:0; }

#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }

</style>

<script>

window.onload = function (){

    var oDiv = document.getElementById('pic');

    var oImg = oDiv.getElementsByTagName('img')[0];

    var oSpan = oDiv.getElementsByTagName('span')[0];

    var oP = oDiv.getElementsByTagName('p')[0];

    var oUl = oDiv.getElementsByTagName('ul')[0];

    var aLi = oUl.getElementsByTagName('li');

    var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];

    var arrText = [ '小宠物', '图片二', '图片三', '面具' ];

    var num = 0;

    var oldLi = null;

    for( var i=0; i<arrUrl.length; i++ ){

        oUl.innerHTML += '<li></li>';

    }

    oldLi = aLi[num];

    // 初始化

    oImg.src = arrUrl[num];

    oSpan.innerHTML = 1+num+' / '+arrUrl.length;

    oP.innerHTML = arrText[num];

    aLi[num].className = 'active';

    for( var i=0; i<aLi.length; i++ ){

        aLi[i].index = i;            // 索引值

        aLi[i].onclick = function (){

            oImg.src = arrUrl[ this.index ];

            oP.innerHTML = arrText[ this.index ];

            oSpan.innerHTML = 1+this.index + ' / '+arrText.length;

            /*

                <li class="active"></li>

                <li></li>

                <li></li>

                <li></li>

            */

            // 思路一：全部清空，当前添加

            for( var i=0; i<aLi.length; i++ ){

                aLi[i].className = '';

            }

            this.className = 'active';

            /*

            // 思路二：清空上个，当前添加

            oldLi.className = '';

            oldLi = this;

            this.className = 'active';

            */

        };

    }

};

</script>

</head>

<body>

<div id="pic">

    <img src="" />

  <span>数量正在加载中……</span>

  <p>文字说明正在加载中……</p>

  <ul></ul>

</div>

</body>

</html>

重构：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

ul { padding:0; margin:0; }

li { list-style:none; }

body { background:#333; }

#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }

#pic img { width:400px; height:500px; }

#pic ul { width:40px; position:absolute; top:0; right:-50px; }

#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }

#pic .active { background:#FC3; }

#pic span { top:0; }

#pic p { bottom:0; margin:0; }

#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }

</style>

<script>

window.onload = function (){

    var oDiv = document.getElementById('pic');

    var oImg = oDiv.getElementsByTagName('img')[0];

    var oSpan = oDiv.getElementsByTagName('span')[0];

    var oP = oDiv.getElementsByTagName('p')[0];

    var oUl = oDiv.getElementsByTagName('ul')[0];

    var aLi = oUl.getElementsByTagName('li');

    var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];

    var arrText = [ '小宠物', '图片二', '图片三', '面具' ];

    var num = 0;

    for( var i=0; i<arrUrl.length; i++ ){

        oUl.innerHTML += '<li></li>';

    }

    // 初始化

    function fnTab(){

        oImg.src = arrUrl[num];

        oSpan.innerHTML = 1+num+' / '+arrUrl.length;

        oP.innerHTML = arrText[num];

        for( var i=0; i<aLi.length; i++ ){

            aLi[i].className = '';

        }

        aLi[num].className = 'active';

    }

    fnTab();

    for( var i=0; i<aLi.length; i++ ){

        aLi[i].index = i;            // 索引值

        aLi[i].onclick = function (){

            num = this.index;

            fnTab();

        };

    }

};

</script>

</head>

<body>

<div id="pic">

    <img src="" />

  <span>数量正在加载中……</span>

  <p>文字说明正在加载中……</p>

  <ul></ul>

</div>

</body>

</html>

day05-qq列表

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

ul , h2 { padding:0; margin:0; }

li { list-style:none; }

#list { width:240px; border:1px solid #333; margin:0 auto; }

#list .lis {}

#list h2 { height:30px; line-height:30px; text-indent:20px; background:url(img/ico1.gif) no-repeat 5px center #6FF; color:#000; }

#list .active { background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; }

#list ul { display:none; }

#list ul li { line-height:24px; border-bottom:1px solid #333; text-indent:24px; }

#list ul .hover { background:#6FF; }

</style>

<script>

window.onload = function (){

    var oUl = document.getElementById('list');

    var aH2 = oUl.getElementsByTagName('h2');

    var aUl = oUl.getElementsByTagName('ul');

    var aLi = null;

    var arrLi = [];

    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 = '';

            }

        };

    }

    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<arrLi.length; i++ ){

        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 = '';

            }

        };

    }

};

</script>

</head>

<body>

<ul id="list">

    <li class="lis">

      <h2>我的好友</h2>

    <ul>

        <li>张三</li>

        <li>张三</li>

        <li>张三</li>

        <li>张三</li>

    </ul>

  </li>

    <li class="lis">

      <h2>企业好友</h2>

    <ul>

        <li>李四</li>

        <li>李四</li>

        <li>李四</li>

        <li>李四</li>

        <li>李四</li>

    </ul>

  </li>

    <li class="lis">

      <h2>黑名单</h2>

    <ul>

        <li>张小三</li>

        <li>李小四</li>

    </ul>

  </li>

</ul>

</body>

</html>

javascript-初级-day03自定义属性的更多相关文章

JavaScript初级面试题
前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型: ...
Javascript初级学习总结
首先,在Html页面输出,使用document.write('内容'); <html> <head> <title></title> <scrip ...
javascript根据元素自定义属性获取元素，操作元素
写在前面:给某个或多个元素自定义属性data-tar,想获取data-tar='123'的元素来进行进一步的操作,如何实现? function getElementByAttr(tag,attr,va ...
妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
javascript中的自定义属性
标签的自定义属性: 在开发中,有时需要在标签上添加一些自定义属性用来存储数据或状态. 设置了自定义属性的标签,就是在这个标签上添加了这个属性,浏览器中的html结构中可以看到. 使用点语法(如oWra ...
FCC的javascript初级算法题解答
FCC上的javascript基础算法题前一阵子做的基础算法题,感觉做完后收获还蛮大的,现在将自己的做法总结出来,供大家参考讨论.基本上做到尽量简短有效,但有些算法还可以继续简化,比如第七题若采用正 ...
JavaScript初级学习
1. JavaScript的介绍前身是LiveScript+JavaScript JavaScript(js)是一个脚本语言基于浏览器的脚本语言基于对象,面向对象的一个编程语言 2. EcmaS ...
关于JavaScript初级的知识点一（持续更新）
自己刚开始接触JS这是自己一个多月以来的一些总结和回顾. 一.什么是js? js是一种弱类型的脚本语言,是HTML的3大组成部分之一.HTML标签 CSS样式 JS脚本. 二.js的5种基本数据类型 ...
JavaScript初级教程（Jquery）
序,学习前端页面编程技术,JS是不得不学的一门技术,目前JS不仅可以作为前端编程语言,在服务器端也有了一定发展,例如NodeJS.废话不多书,本篇博客主要介绍JS作为前端语言,怎样获得和改变HTML标 ...

随机推荐

android和IOS自动化定位方法
元素定位方法:id定位,name定位(text定位),class_name定位, accessibility_id定位,xpath定位等 (目前1.5版本的已经不支持name定位了),所以APP的定 ...
PTA数据结构习题2.8 输出全排列 (20分)
习题2.8 输出全排列 (20分) 请编写程序输出前n个正整数的全排列(n<10),并通过9个测试用例(即n从1到9)观察n逐步增大时程序的运行时间. 输入格式: 输入给出正整数n(<10 ...
TCP 粘包 - 拆包问题及解决方案
目录 TCP粘包拆包问题什么是粘包 - 拆包问题为什么存在粘包 - 拆包问题粘包 - 拆包演示粘包 - 拆包解决方案方式一: 固定缓冲区大小方式二: 封装请求协议方式三: 特殊字符结 ...
Vue3学习（八）之 Vue CLI多环境配置
一.前言这里相对于之前就没那么麻烦了,通俗点说就是使用配置文件来管理多环境,实现环境的切换. 二.实现切换 1.增加开发和生产配置文件在web的根目录下,创建开发环境切换配置文件.env.dev, ...
【Java虚拟机3】类加载器
前言 Java虚拟机设计团队有意把类加载阶段中的"通过一个类的全限定名来获取描述该类的二进制字节流"这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需的类. ...
你知道什么是JUC了吗？
多线程一直Java开发中的难点,也是面试中的常客,趁着还有时间,打算巩固一下JUC方面知识,我想机会随处可见,但始终都是留给有准备的人的,希望我们都能加油!!! 沉下去,再浮上来,我想我们会变的不一样 ...
OO_JAVA_四个单元的总结
总结本单元两次作业的架构设计设计目标尽量减少特殊容器的存在,能通用就通用,减少重复的类同代码. 基础容器的存在,就是为上述目标而服务的. 设计概要底层:基础的.类型无关.无依赖的容器以及对应的查 ...
替换excel模板中的内容并使用JavaMail发送邮件
由于在公司工作,常年出差,每天都要以日报的形式向公司汇报当天的工作内容.而日报的内容大体上就只有当天工作的主要内容时变化的,其余的都是不变的. 而我的电脑刚打开excel有点卡,因此决定使用Java ...
期望dp好题选做
前言: 最近连考两场期望dp的题目,sir说十分板子的题目我竟然一点也不会,而且讲过以后也觉得很不可改.于是开个坑. 1.晚测10 T2 大佬(kat) 明明有\(O(mlog)\)的写法,但是\(m ...
RAW RGB格式
RAW RGB格式 10bit Raw RGB, 就是说用10bit去表示一个R, G, 或者B, 通常的都是用8bit的. 所以你后面处理时要把它转换为8bit的, 比较简单的方法就是将低两位去掉, ...

javascript-初级-day03自定义属性

javascript-初级-day03自定义属性的更多相关文章

随机推荐

热门专题