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标 ...

随机推荐

Oracle-绑定执行计划
一.绑定执行计划 Oracle存在某个SQL多个执行计划的情况,那么如何快速将Oracle 好的执行计划,绑定到不好的SQL上呢? 由于版本的演进,绑定执行计划在10g 一般使用sql profile ...
免费 CDN 玩法 —— 文件一键上传到 NPM
前言 unpkg.jsdelivr 等站点可加速 NPM 包文件,适合作为个人网站或演示案例的免费 CDN. 虽然上传文件到 NPM 很简单,创建 package.json 然后 npm publis ...
javascript运算符和表达式
1.表达式的概念由运算符连接操作组成的式子,不管式子有多长,最终都是一个值. 2.算术运算符加+ 减- 乘* 除/ 取模% 负数- 自增++ 自减-- 3.比较运算符等于== 严格等于=== ...
微信小程序的登录流程
一.背景传统的web开发实现登陆功能,一般的做法是输入账号密码.或者输入手机号及短信验证码进行登录服务端校验用户信息通过之后,下发一个代表登录态的 token 给客户端,以便进行后续的交互,每当t ...
django-admin和django-admin.py的区别
问题 django初学者在使用django-admin创建项目时容易出现无法创建的错误,这是因为网上很多教程用的都是django-admin.py创建的项目,不出意外的话,你输入相同的命令会发现项目没 ...
UltraSoft - Beta - Postmortem事后分析
UltraSoft - Beta - PostMORTEM 设想和目标我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决的问题和定义都在[软软软]功能规格说明书 ...
认识spring security
在一个系统中认证和授权是常有的事情,现在比较流行的框架有spring security.shiro等等.他们都能很好的帮助我们完成认证和授权的功能.那么假如说让我们自己完成一个登录那么应该大致的流程是 ...
spring cloud zuul的回退
当我们使用 @EnableZuulProxy 注解来开启zuul的路由时,默认在@EnableZuulProxy注解上就包含了@EnableCircuitBreaker注解,即开启了断路器功能.那么在 ...
Kubernetes集群环境搭建全过程
资源准备以及服务器初始化所有服务器执行一下脚本进行配置信息初始化: #!/bin/bash cd `dirname $0` # 关闭selinux setenforce 0 sed -i '/SEL ...
深入理解Linux C语言内存管理
问题不能拖,我这就来学习一下吧,争取一次搞定. 在任何程序设计环境及语言中,内存管理都十分重要. 内存管理的基本概念分析C语言内存的分布先从Linux下可执行的C程序入手.现在有一个简单的C源程序h ...

javascript-初级-day03自定义属性

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

随机推荐

热门专题