005 DOM02
在上一篇DOM的基础上，继续案例的实践。
一：案例
1.禁用文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="禁用文本框" id="btn1">
<input type="text" value="文本框" id="text">
<script>
var btn1=document.getElementById("btn1");
btn1.onclick=function () {
document.getElementById("text").disabled=true;
}
</script>
</body>
</html>
效果：
2.点击超链接，在下面出现一个大图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="image/00_1.png" id="ak">
<img src="data:image/00_2.jpg" alt="">
</a><br>
<img src="" alt="" id="big">
<script>
document.getElementById("ak").onclick=function () {
document.getElementById("big").src=document.getElementById("ak").href;
return false;
}
</script>
</body>
</html>
效果：
3.相册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
width: 150px;
height: 100%;
}
</style>
</head>
<body>
<a href="image/00_3.jpg" title="A">
<img src="data:image/00_3.jpg" alt="111" title="A">
</a>
<a href="image/00_5.jpg" title="B">
<img src="data:image/00_5.jpg" alt="" title="B">
</a>
<a href="image/00_6.jpg" title="C">
<img src="data:image/00_6.jpg" alt="" title="C">
</a>
<a href="image/00_7.jpg" title="D">
<img src="data:image/00_7.jpg" alt="" title="D">
</a> <br>
<img src="" alt="" id="image" style="width: 600px;">
<p id="des">选择一个图片</p> <script>
var a = document.getElementsByTagName("a");
for (var i=0;i<a.length;i++){
a[i].onclick=function () {
document.getElementById("image").src=this.href;
document.getElementById("des").innerText=this.title;
return false;
}
}
</script>
</body>
</html>
效果：
4.隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
list-style: none;
}
</style>
</head>
<body>
<input type="button" value="隔行变色" id="btn">
<ul id="ul">
<li>色白板擦</li>
<li>无色的农维年费</li>
<li>列为可能粉扑舞IE牛排</li>
<li>明晚地玻尿酸单车呢</li>
<li>依然未必</li>
<li>美津浓你后悔</li>
<li>不能说地方居委会吃</li>
<li><问客服部农委非农></问客服部农委非农></li>
</ul>
<script>
document.getElementById("btn").onclick=function () {
var li = document.getElementById("ul").getElementsByTagName("li");
for (var i=0;i<li.length;i++){
if (i%2==0){
li[i].style.backgroundColor="#ccc";
} else{
li[i].style.backgroundColor="#aaa";
}
}
} </script>
</body>
</html>
效果：
5.鼠标经过变色
这里这要是鼠标的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
list-style: none;
}
</style>
</head>
<body>
<input type="button" value="鼠标经过变色" id="btn">
<ul id="ul">
<li>色白板擦</li>
<li>无色的农维年费</li>
<li>列为可能粉扑舞IE牛排</li>
<li>明晚地玻尿酸单车呢</li>
<li>依然未必</li>
<li>美津浓你后悔</li>
<li>不能说地方居委会吃</li>
<li><问客服部农委非农></问客服部农委非农></li>
</ul>
<script>
document.getElementById("btn").onclick=function () {
var li = document.getElementById("ul").getElementsByTagName("li");
for (var i=0;i<li.length;i++){
//
li[i].onmouseover=function () {
this.style.backgroundColor="yellow";
}
//
li[i].onmouseout=function () {
//恢复事件
this.style.backgroundColor="";
}
}
} </script>
</body>
</html>
效果：
6.鼠标经过二维码的展示与离开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(image/bgs.png) no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
}
.erweima {
position: absolute;
top: 0;
left: -150px;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="nodeSmall" id="node_small">
<a href="#"></a><!--锚定-->
<div class="erweima hide" id="er">
<img src="data:image/456.png" alt=""/>
</div>
</div>
<script>
var a = document.getElementById("node_small").getElementsByTagName("a")[0];
a.onmouseover=function () {
document.getElementById("er").className="erweima show";
}
a.onmouseout=function () {
document.getElementById("er").className="erweima hide";
}
</script>
</body>
</html>
效果：
7.根据表单标签的name值，获取value
有一个新的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="获取" id="btn"><br>
<input type="text" name="AAA"><br>
<input type="text" name="BBB"><br>
<input type="text" name="CCC"><br>
<input type="text" name="AAA"><br>
<script>
document.getElementById("btn").onclick=function(){
var names=document.getElementsByName("AAA");
for (var i=0;i<names.length;i++){
names[i].value=names[i].name;
}
} </script>
</body>
</html>
效果：
8.根据类的样式来获取元素
有新函数，但是兼容性需要考虑，因为属于H5的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.dv {
width: 200px;
height: 50px;
background-color: #ccc;
margin-top: 20px;
}
.dv2 {
width: 200px;
height: 50px;
background-color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<p>额佛典欧恩</p>
<p>么破门委们</p>
<span class="dv">读课文你发我呢</span><br>
<span>拍农产品</span><br>
<div class="dv">
23233223ljhfnpoweijfn
</div> <script>
//根据样式class获取
var dv =document.getElementsByClassName("dv");
for (var i=0;i<dv.length;i++){
dv[i].onmouseover=function () {
this.className="dv2";
}
dv[i].onmouseout=function () {
this.className="dv";
}
}
</script>
</body>
</html>
效果：
9.根据选择器获取元素
这个是根据id来获取。
也属于H5的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="效果" id="btn">
<script>
var btn = document.querySelector("#btn");
btn.onclick=function () {
alert("njmnjnjolin");
}
</script>
</body>
</html>
效果：
10.获取焦点与失去焦点
主要是失去焦点与获取焦点的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<input type="text" value="输入内容" id="btn">
<script>
var btn = document.querySelector("#btn");
btn.onfocus=function () {
if(this.value=="输入内容"){
this.value="";
this.style.color="black";
}
}
btn.onblur=function () {
if(this.value.length==0){
this.value="输入内容";
this.style.color="gray";
}
}
</script>
</body>
</html>
11.innerText，textContext，与兼容代码
说明在代码中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<input type="button" value="输入内容" id="btn">
<div id="dv"></div>
<script>
var btn = document.querySelector("#btn");
btn.onclick=function () {
// IE8不支持textContent，其他浏览器都支持；然后innerText是IE8的标准，都支持，不过火狐版本低时不支持
// document.getElementById("dv").textContent="洗净忧伤的尘埃";
// document.getElementById("dv").innerText="洗净忧伤的尘埃"; //因此，写兼容代码，判断这个属性的类型，如果是undefined，则不支持
//设置任意的标签中间的任意文本内容
function setInnerText(ele,text) {
//判断浏览器是否支持这个属性
if(typeof ele.textContent=="undefined"){
ele.innerText=text;
}else {
ele.textContent=text;
}
} var text="洗净忧伤的尘埃";
setInnerText(document.getElementById("dv"),text);
}
</script>
</body>
</html>
效果：
12.innerHtml
所有的浏览器都支持。
所以，推荐使用。
主要的功能是在标签中设置新的html标签内容，有显示效果。
二：自定义属性
1.获取li的自定义属性
获取自定义属性，使用getAttribute函数。直接点是不能获取的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
cursor: pointer;
list-style: none;
}
</style>
</head>
<body>
<ul id="ul">
<li score="20">数学</li>
<li score="30">英语</li>
<li score="40">语文</li>
<li score="50">体育</li>
</ul>
<script>
var li = document.getElementById("ul").getElementsByTagName("li");
for (var i=0;i<li.length;i++){
li[i].onclick=function () {
alert(this.getAttribute("score"));
}
}
</script>
</body>
</html>
效果：
2.给标签添加自定义属性
使用setAttribute函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
cursor: pointer;
list-style: none;
}
</style>
</head>
<body>
<ul id="ul">
<li>数学</li>
<li>英语</li>
<li>语文</li>
<li>体育</li>
</ul>
<script>
var li = document.getElementById("ul").getElementsByTagName("li");
for (var i=0;i<li.length;i++){
//先添加自定义属性
li[i].setAttribute("score",i+10);
li[i].onclick=function () {
alert(this.getAttribute("score"));
}
}
</script>
</body>
</html>
3.移除自定义属性
使用removeAttribute函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<input type="button" value="移除" id="btn">
<div id="di" score="10"></div>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("di").removeAttribute("score");
}
</script>
</body>
</html>
移除类样式：
这种方式，看效果后，知道是清除不干净的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cs {
width: 400px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<input type="button" value="移除" id="btn">
<div id="di" score="10" class="cs"></div>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("di").className="";
}
</script>
</body>
</html>
效果：
4.删除自带的属性
可以继续使用removeAttribute函数。
这样清除属性更加干净。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cs {
width: 400px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<input type="button" value="移除" id="btn">
<div id="di" score="10" class="cs"></div>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("di").removeAttribute("class");
}
</script>
</body>
</html>
三：tab切换案例
1.程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
} ul {
list-style-type: none;
} .box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
} .hd {
height: 45px;
} /*上面*/
.hd span {
display: inline-block;
width: 96px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: #ccc;
} /*影藏与展示*/
.bd li {
height: 255px;
background-color: #ccc;
display: none;
}
.bd li.current {
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是体育模块</li>
<li>我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script>
var box = document.getElementById("box");
var hd = box.getElementsByTagName("div")[0];
var bd = box.getElementsByTagName("div")[1];
var li = bd.getElementsByTagName("li"); //所有的span
var span = hd.getElementsByTagName("span");
for (var i=0;i<span.length;i++){
// 保存索引
span[i].setAttribute("index",i);
//上面的功能实现
span[i].onclick=function () {
for (var j=0;j<span.length;j++){
span[j].removeAttribute("class");
}
this.className="current"; //下面的功能
var index = this.getAttribute("index");
for (var j=0;j<span.length;j++){
li[j].removeAttribute("class");
}
li[index].className="current";
}
} </script>
</body>
</html>
效果：
005 DOM02的更多相关文章
- 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数005·graphics-obj，基本绘图单元，包括线段、矩形、椭圆、圆形
<zw版·Halcon-delphi系列原创教程> Halcon分类函数005·graphics-obj,基本绘图单元,包括线段.矩形.椭圆.圆形 graphics-obj,基本绘图单元, ...
- android 入门 005（登录记住）
android 入门 005(登录记住) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android ...
- php大力力 [005节] php大力力简单计算器001
2015-08-22 php大力力005. php大力力简单计算器001: 上网看视频,看了半天,敲击代码,如下: <html> <head> <title>简单计 ...
- [反汇编练习] 160个CrackMe之005
[反汇编练习] 160个CrackMe之005. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
- 005 Python的数值类型
005 Python的数值类型 BIF 指的是内置函数,一般不作为变量命名.如 input,while,if,else,float,等等.整型:整数.(python3.0版本把整型和长整型结合在 ...
- STM8S003/005/007芯片解密单片机解密程序提取复制经验分享！
STM8S003/005/007芯片解密单片机解密程序提取复制 芯片解密型号: STM8S003K3T6,STM8S005K6T6,STM8S007C8T6,STM8S003F3P6 STM8S005 ...
- 2017-2018-1 1623 bug终结者 冲刺005
bug终结者 冲刺005 by 20162323 周楠 今日任务:理清游戏运行逻辑,GameView类为游戏核心代码 简要介绍 游戏中整个地图都是由数组组成 1.整个地图为16×16格,主要元素有墙. ...
- 『练手』005 Laura.SqlForever历史遗留 的 架构思想缺陷
005 Laura.SqlForever历史遗留 的 架构思想缺陷 我们 比较一下 Laura.WinFramework 和 Laura.XtraFramework 的差异: Laura.WinFra ...
- Python：每日一题005
题目: 输入三个整数x,y,z,请把这三个数由小到大输出. 程序分析: 我们想办法把最小的数放到x上,先将x与y进行比较,如果x>y则将x与y的值进行交换,然后再用x与z进行比较,如果x> ...
随机推荐
- 1.1“Linux操作系统”部署
---恢复内容开始--- 1.2.1 版本说明 操作系统版本:CentOS6.5 64位 1.2.2 部署条件说明 无 1.2.3 部署步骤说明 centos6.5 操作系统安装 1.创建虚拟机 2. ...
- P1052 过河[DP]
题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数 ...
- 使用Python的turtle库实现六角形以及正方形螺旋线的绘制
1.六角形的绘制 思路:一个六角形可以看作是两个等边三角形具有共同的中心且垂线互成60°角.所以只需实现一个等边三角形的绘制以及第二个三角形绘制起点的移动即可. 代码如下: import turtle ...
- java中的String要点解析
String类使我们经常使用的一个类,经常用来表示字符串常量. 字符串一旦被创建赋值,就不能被改变,因为String 底层是数组实现的,且被定义成final类型.我们可以看String源码. /** ...
- Eclipse的tab键为4个空格完整方法 附：阿里代码开发规范书
开发规范书:http://pan.baidu.com/s/1dESdyox 1.点击 window->preference-,依次选择 General->Editors->Text ...
- 集合（Collection）类
集合(Collection)类是专门用于数据存储和检索的类.这些类提供了对栈(stack).队列(queue).列表(list)和哈希表(hash table)的支持.大多数集合类实现了相同的接口. ...
- php自定义函数之回调函数
回调函数,可以配合匿名函数和变量函数实现更加优美.复杂的一种函数结构.大理石平台价格 回调函数,就是在处理一个功能的时候,我让让这个功能自定义能力再强一些,我准许调用这个函数的时候,还可以传入一个函数 ...
- AtomicIntegerFieldUpdater字段原子更新类
本文链接:https://blog.csdn.net/anLA_/article/details/78662383前面讲的两个AtomicInteger和AtomicIntegerArray,这两个都 ...
- Linux 格式化磁盘
格式化磁盘: mkfs -t ext4 /dev/sdb 初始化磁盘 mkfs.ext4 /dev/sdb
- am335x system upgrade kernel f-ram fm25l16b(十六)
1 Scope of Document This document describes SPI F-RAM hardware design 2 Requiremen 2.1 ...