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> ...
随机推荐
- 专心学LINUX：CentOS关闭屏幕自动锁定和睡眠
在VMware中学习CentOS总免不了一直测试.调试,加上看书.刨坛,再转回到CentOS界面时已经被锁定了.看看怎么将这定时锁定取消以免麻烦.虽然可以使用字符终端,但字符终端不便于翻看前面已经发出 ...
- vue-cli3.0 脚手架搭建项目的过程详解
1.安装vue-cli 3.0 ? 1 2 3 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) ...
- 用js刷剑指offer(数组中的逆序对)
题目描述 题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P ...
- windows server自动化发布——技术积累与整理
文章:应用在Windows系统中的自动化部署实践 博主大概讲解了一遍如何摸索实现自动化部署.不过内容不详细,很多具体细节需要自己摸索. 标题:windows server 部署服务(WDS) 地址:h ...
- Kotlin使用处协变的意义与用法
在上一次https://www.cnblogs.com/webor2006/p/11294849.html中对于Java的协变和Kotlin的协变提到了它们的区别,回忆一下: 其实在Kotlin中也有 ...
- WXS介绍
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. 1.WXS与JS的区别 1.1 WXS 的基础类库: WXS 只提供给开发者5个基础类库,分别是 c ...
- HDFS中的数据块(Block)
我们在分布式存储原理总结中了解了分布式存储的三大特点: 数据分块,分布式的存储在多台机器上 数据块冗余存储在多台机器以提高数据块的高可用性 遵从主/从(master/slave)结构的分布式存储集群 ...
- Python数据分析（基础）
目录: Python基础: Python基本用法:控制语句.函数.文件读写等 Python基本数据结构:字典.集合等 Numpy:简述 Pandas:简述 一. Python基础: 1.1 文件读取 ...
- Mybatis 使用PageHelper封装通用Dao分页方法
参考: PageHelper官网:https://pagehelper.github.io/docs/howtouse/#3-%E5%A6%82%E4%BD%95%E5%9C%A8%E4%BB%A3% ...
- Spring框架 IOC注解
Spring框架的IOC之注解方式的快速入门 1. 步骤一:导入注解开发所有需要的jar包 * 引入IOC容器必须的6个jar包 * 多引入一个:Spring ...