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> ...
随机推荐
- 基于STM8的IIC协议--实例篇--时钟模块(DS3231)读取
1. 综述 由上篇博客可知道IIC协议如何用代码实现,本篇博客就不涉及协议内容,只讲解如何使用. 本次的实验传感为:DS3231(时钟模块),对于时钟模块的具体信息我也就不多介绍,大家可以自行度娘,具 ...
- SpringCloud_Eureka与Zookeeper对比
关系型数据库与非关系型数据库及其特性: RDBMS(Relational Database Management System 关系型数据库) :mysql/oracle/sqlServer等 = ...
- [LeetCode] 0752. Open the Lock 打开转盘锁
题目 You have a lock in front of you with 4 circular wheels. Each wheel has 10 slots: '0', '1', '2', ' ...
- ted演讲小总结（持续更新_12月15日）
目录 2019年12月1日 星期日 2019年12月2日 星期一 2019年12月3日 星期二 2019年12月8日 星期日 2019年12月15日 星期日(这个演讲相对来说不好理解,因为这类逻辑暂时 ...
- flask处理数据，页面实时刷新展示
背景: 后端 flask(python)处理数据,页面实时刷新,类似于打包页面的动态展示,展示效果如图: 代码如下: 前端主要使用以下循环处理, 2--- 2秒刷新一次 {% if 0 == stop ...
- Maven安装及其IDEA的配置
相关内容网上很多,本文转载自csdn博主 击中我,https://blog.csdn.net/qq_36267611/article/details/85274885,内文略有修改. 一.下载安装前往 ...
- LINUX部署TOMCAT服务器
转载声明: http://www.cnblogs.com/xdp-gacl/p/4097608.html 解压tomcat服务器压缩包 配置环境变量 tomcat服务器运行时是需要JDK支持的,所以必 ...
- php自定义函数之内部函数
内部函数,是指在函数内部又声明了一个函数. 注意事项: 1.内部函数名,不能是已存在的函数名 2.假设在函数a里面定义了一个内部函数,不能定用两次函数a. 我们下面来看代码,你将很快的学习会: < ...
- 洛谷 P5640 【CSGRound2】逐梦者的初心 题解
每日一题 day33 打卡 Analysis 这道题太难♂了,居然才是蓝的. 每个位子和每种字符都是独立的,对每种字符都记录一下位子. 用f[i]=0 or 1 表示长度为ii的后缀可不可以,0表示可 ...
- Kubernetes 学习23 kubernetes资源指标API及自定义指标API
一.概述 1.上集中我们说到,官方文档提示说从k8s 1.11版本开始,将监控体系指标数据获取机制移向新一代的监控模型.也就意味着对于我们的k8s来讲现在应该有这样两种资源指标被使用.一种是资源指标, ...