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标 ...
随机推荐
- 分布式应用开发 | SpringBoot+dubbo+zookeeper实现服务注册发现 | 远程服务调用
前言 通过新建两个独立服务--提供者.消费者,模拟两个独立分布的应用,通过使用dubbo+zookeeper来实现远程服务调用. 目录 项目搭建 provider-server consumer-se ...
- ORM框架查询数据库时返回指定的字段
django model.objects.filter() 查询指定字段 1.model.objects.filter().values('field_name'),单个字段 2.model.obje ...
- 第五课第四周笔记1：Transformer Network Intuition 变压器网络直觉
目录 Transformer Network Intuition 变压器网络直觉 Transformer Network Intuition 变压器网络直觉 深度学习中最令人兴奋的发展之一是 Tran ...
- Coursera Deep Learning笔记 卷积神经网络基础
参考1 参考2 1. 计算机视觉 使用传统神经网络处理机器视觉的一个主要问题是输入层维度很大.例如一张64x64x3的图片,神经网络输入层的维度为12288. 如果图片尺寸较大,例如一张1000x10 ...
- 第二次Alpha Scrum Meeting
本次会议为Alpha阶段第二次Scrum Meeting会议 会议概要 会议时间:2021年4月24日 会议地点:线上会议 会议时长:30min 会议内容简介:本次会议主要由每个人展示自己目前完成的工 ...
- BUAA 2020 软件工程 个人项目作业
BUAA 2020 软件工程 个人项目作业 Author: 17373051 郭骏 项目 内容 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 个人项目作业 ...
- Spring Security Resource Server的使用
Spring Security Resource Server的使用 一.背景 二.需求 三.分析 四.资源服务器认证流程 五.实现资源服务器 1.引入jar包 2.资源服务器配置 3.资源 六.测试 ...
- 你知道如何从单片机过渡到嵌入式linux需要经历那些吗？（这个亲身体验有效）
就现在的行业发展来看只会单片机已经不吃香了并且在薪资待遇方面来看的话单片机的收入限制性太强可能工作很多年之后发现没有了成长空间,因此逐渐转到嵌入式Linux这个方向是越来越多的人的一个选择,那么接触了 ...
- Linux资料 帮你理清思路
很多同学接触linux不多,对linux平台的开发更是一无所知. 而现在的趋势越来越表明,作为一个优秀的软件开发人员,或计算机it行业从业人员,="" 掌握linux是一种很重要的 ...
- 洛谷 P5665 [CSP-S2019] 划分
链接: P5665 题意: 给出 \(n\) 个整数 \(a_i\) ,你需要找到一些分界点 \(1 \leq k_1 \lt k_2 \lt \cdots \lt k_p \lt n\),使得 \( ...