JS---DOM---点击操作---part2---14个案例
案例1：点击按钮禁用文本框
<input type="button" value="禁用文本框" id="btn" />
<input type="text" value="文本框" id="txt" /> <script>
document.getElementById("btn").onclick = function () {
document.getElementById("txt").disabled = true;
};
</script>
案例2：点击按钮修改列表的背景颜色
<input type="button" value="变色" id="btn" />
<ul id="uu">
<li>王陆</li>
<li>海云帆</li>
<li>闻宝</li>
<li>琉璃仙</li>
<li>王舞</li>
</ul>
<script>
document.getElementById("btn").onclick = function () {
document.getElementById("uu").style.backgroundColor = "pink";
};
</script>
案例3：点击超链接弹出对话框，但阻止超链接的默认的跳转
先执行弹框，用return false停止事件
<!--第一种写法:-->
<a href="http://www.baidu.com" onclick="alert('哎呀我被点了'); return false">百度1</a> <!--第二种写法-->
<script>
function f1() {
alert("好漂亮呀");
return false;
}
</script>
<a href="http://www.baidu.com" onclick="return f1()">百度2</a> <!--第三种写法:-->
<a href="http://www.baidu.com" id="ak">百度3</a>
<script>
document.getElementById("ak").onclick = function () {
alert("嘎嘎");
return false;
};
</script>
案例4：点击小图，下面显示大图
<a href="images/1.jpg" id="ak">
<img src="data:images/1-small.jpg" alt="">
</a>
<img src="" alt="" id="big">
<script src="common.js"></script>
<script>
//点击超链接
my$("ak").onclick = function () {
//big图片的src变成当前对象的地址href
my$("big").src = this.href;
return false; //阻止默认超链接挑转
};
</script>
案例5：美女相册
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
} h1 {
color: #333;
background-color: transparent;
} a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
} ul {
padding: 0;
} li {
float: left;
padding: 1em;
list-style: none;
} #imagegallery { list-style: none;
} #imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
} #imagegallery li a img {
border: 0;
}
</style>
</head> <body> <h2>
美女画廊
</h2> <ul id="imagegallery">
<li><a href="images/1.jpg" title="美女A">
<img src="data:images/1-small.jpg" width="100" alt="美女1" />
</a></li>
<li><a href="images/2.jpg" title="美女B">
<img src="data:images/2-small.jpg" width="100" alt="美女2" />
</a></li>
<li><a href="images/3.jpg" title="美女C">
<img src="data:images/3-small.jpg" width="100" alt="美女3" />
</a></li>
<li><a href="images/4.jpg" title="美女D">
<img src="data:images/4-small.jpg" width="100" alt="美女4" />
</a></li>
</ul>
<div style="clear:both"></div> <!--显示大图的-->
<img id="image" src="data:images/placeholder.png" alt="" width="450" />
<p id="des">选择一个图片</p> <script src="common.js"></script>
<script>
//从ul中标签获取获取所有的a标签
var aObjs = my$("imagegallery").getElementsByTagName("a");
//循环遍历所有的a标签
for (var i = 0; i < aObjs.length; i++) {
//为每个a标签注册点击事件
aObjs[i].onclick = function () {
//为id为image的标签的src赋值
my$("image").src = this.href;
//为p标签赋值
my$("des").innerText = this.title;
//阻止超链接默认的跳转
return false;
};
}
</script>
</body>
</html>
实现效果：
案例6：列表隔行变色
练习的时候，因为background拼写错误，找bug找了很久....在加入console.log("哈哈")测试后，大致定位到改背景颜色部分出错。
<!-- 奇黄偶绿 -->
<input type="button" value="隔行变色" id="btn" />
<ul id="brandlist">
<li>雅诗兰黛</li>
<li>兰蔻</li>
<li>契尔氏</li>
<li>海蓝之谜</li>
<li>欧舒丹</li>
<li>雅顿</li>
</ul> <script src="common.js"></script>
<script>
// my$("btn").onclick = function () {
// //获取所有li标签
// var list = my$("brandlist").getElementsByTagName("li");
// for (var i = 0; i < list.length; i++) {
// if (i % 2 == 0) {
// list[i].style.backgroundColor = "yellow";
// } else {
// list[i].style.backgroundColor = "green";
// }
// }
// }; //优化后
my$("btn").onclick = function () {
var list = my$("brandlist").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundColor = i % 2 == 0 ? "yellow" : "green";
}
};
</script>
案例7：鼠标划过，显示和隐藏二维码
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(images/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:images/456.png" alt="" />
</div>
</div> <script src="common.js"></script>
<script>
////获取鼠标要进入的a标签
var aObj = my$("node_small").getElementsByTagName("a")[0];
//为a注册鼠标进入
aObj.onmouseover = function () {
my$("er").className = "erweima show";
};
//为a注册鼠标离开
aObj.onmouseout = function () {
my$("er").className = "erweima hide";
};
</script>
</body>
</html>
案例8：根据Name属性值获取元素
<input type="button" value="显示效果" id="btn" /> <br />
<input type="text" value="你好" name="name1" /> <br />
<input type="text" value="你好" name="name3" /> <br />
<input type="text" value="你好" name="name2" /> <br />
<input type="text" value="你好" name="name1" /> <br />
<input type="text" value="你好" name="name1" /> <br /> <script src="common.js"></script>
<script>
my$("btn").onclick = function () {
var inputs = document.getElementsByName("name1");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "我很好";
}
};
</script>
实现效果：
案例9：点击按钮设置应用cls类样式的标签的背景颜色为hotpink
getElementsByClassName();------>h5的, IE8及以下不支持
<p>第一个p标签</p>
<p class="cls">第二个p标签</p>
<span>第一个行内元素span</span> <br />
<span class="cls">第二个行内元素span</span> <br />
<div>第一个盒子</div> <br />
<div class="cls">第二个盒子</div> <br />
<input type="button" value="显示效果" id="btn" /> <br />
<script src="common.js"></script>
<script> my$("btn").onclick = function () {
//根据类样式的名字来获取元素
var objs = document.getElementsByClassName("cls");
for (var i = 0; i < objs.length; i++) {
//设置每个元素的背景颜色
objs[i].style.backgroundColor = "hotpink";
}
};
案例10：点击按钮弹出对话框--->根据选择器的方式获取元素
<input type="button" value="显示效果" id="btn"/>
<p>这是一个p</p>
<p class="cls">这是一个p</p>
<span>这是一个span</span>
<span class="cls">这是一个span</span>
<script src="common.js"></script>
<script> //点击按钮弹出对话框
//根据选择器的方式获取元素
// var btnObj= document.querySelector("#btn");
// btnObj.onclick=function () {
// alert("哈哈,我又变帅了");
// }; var objs=document.querySelectorAll(".cls");
for(var i=0;i<objs.length;i++){
objs[i].style.backgroundColor="green";
}
</script>
案例11：div边框高亮显示
<head>
<meta charset="UTF-8">
<title>jane自学转行</title>
<style>
* {
margin: 0;
padding: 0;
} div {
width: 200px;
height: 150px;
background-color: pink;
float: left;
margin-top: 5px;
margin-left: 10px;
/* 加同色边框解决抖动问题 */
border: 2px solid pink;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="common.js"></script>
<script>
//获取所有div
var dvObjs = document.getElementsByTagName("div");
//遍历div
for (var i = 0; i < dvObjs.length; i++) {
//为每个div添加鼠标进入的事件
dvObjs[i].onmouseover = function () {
this.style.border = "2px solid hotpink";
};
//为每个div添加鼠标进入的事件
dvObjs[i].onmouseout = function () {
this.style.border = "";
};
}
</script>
</body>
案例12：模拟搜索框，获得焦点和失去焦点
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
<style>
input {
color: gray;
}
</style>
</head> <body>
<input type="text" value="请输入搜索内容" id="txt">
<script src="common.js"></script>
<script> //获取文本框
//注册获取焦点的事件
my$("txt").onfocus = function () {
//判断文本框的内容是不是默认的内容
if (this.value == "请输入搜索内容") {
//是默认内容就清空默认，字体颜色变为黑色
this.value = "";
this.style.color = "black";
}
};
//注册获取焦点的事件
my$("txt").onblur = function () {
//判断文本框是否空，空的话就重新设置默认文字和颜色
if (this.value == "") {
this.value = "请输入搜索内容";
this.style.color = "gray";
}
};
</script>
</body>
</html>
案例13：验证文本密码框长度
<input type="password" id="txt">
<script src="common.js"></script>
<script>
my$("txt").onblur = function () {
if (this.value.length >= 6 && this.value.length <= 10) {
this.style.backgroundColor = "green";
} else {
this.style.backgroundColor = "red";
}
}; </script>
案例14：设置和获取文本框的值
<input type="text" value="文本框" id="txt" /> <script src="common.js"></script>
<script>
//设置和获取文本框的值
my$("txt").onblur = function () {
this.value = "锄禾日当午";
console.log(this.value);
};
</script>
JS---DOM---点击操作---part2---14个案例的更多相关文章
- JS---DOM---点击操作---节点的方式---案例
点击操作---节点的方式---案例 案例1:点击按钮,设置p变色---节点的方式做 <!DOCTYPE html> <html lang="en"> < ...
- JS DOM元素的操作（创建，添加，删除，和修改属性）
1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...
- JS DOM之表格操作
一个能给添加行的表格 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- JS DOM操作（一） 对页面的操作
DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...
- JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍
昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
- JS---DOM---点击操作---part1---20个案例
点击操作:------>事件: 就是一件事, 有触发和响应, 事件源 按钮被点击,弹出对话框 按钮---->事件源 点击---->事件名字 被点了--->触发了 弹框了---& ...
- 10-JavaScript之DOM的事件操作
JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...
- 前端 ----关于DOM的事件操作
关于DOM的事件操作 一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...
随机推荐
- 深入比特币原理（四）——锁定脚本(locking script)与解锁脚本(unlocking script)
通常比特币都是以虚拟货币的概念出现在大众眼前,实际上比特币是第一个真正的区块链"平台",利用它去中心化.不可篡改.可追溯等特点不光可以实现多种交易模式(如点对点交易.多重签名交易等 ...
- 【Leetcode 做题学算法周刊】第六期
首发于微信公众号<前端成长记>,写于 2019.12.15 背景 本文记录刷题过程中的整个思考过程,以供参考.主要内容涵盖: 题目分析设想 编写代码验证 查阅他人解法 思考总结 目录 11 ...
- Dubbo 2.7新特性之异步化改造
这是why技术的第1篇原创文章 我与Dubbo的二三事 我是2016年毕业的,在我毕业之前,我在学校里面学到的框架都是SSH,即struts+spring+hibernate,是的你没有看错,在大学里 ...
- Linux之find命令操作技巧
一.前言 工作中,我们常用find命令查找某些文件或者删除一些旧的日志文件,所以学会find命令的操作技巧就极为重要. 二.find常用参数选项 -depth 从指定目录下最深层的子目录开始查找 -m ...
- windows10查看电脑已经保存的wifi密码
1,打开windows的命令窗口,输入 netsh wlan show profiles,如下图,这个命令仅仅只是查看一下电脑保存的所有的wifi名字 2,需要查看密码的话,则需要输入这个命令, ...
- 《Java基础知识》一维，二维数组的申明和使用
为什么要使用数组: 因为不使用数组计算多个变量的时候太繁琐,不利于数据的处理. -------- 数组也是一个变量,是存储一组相同类型的变量 声明一个变量就是在内存中划出一块合适的空间 声明一个数 ...
- [ASP.NET Core 3框架揭秘] 依赖注入[3]：依赖注入模式
IoC主要体现了这样一种设计思想:通过将一组通用流程的控制权从应用转移到框架之中以实现对流程的复用,并按照"好莱坞法则"实现应用程序的代码与框架之间的交互.我们可以采用若干设计模式 ...
- 63-容器在 Weave 中如何通信和隔离？
上一节我们分析了 Weave 的网络结构,今天讨论 Weave 的连通和隔离特性. 首先在host2 执行如下命令: weave launch 192.168.0.44 这里必须指定 host1 的 ...
- linux 定时备份数据库
说明 检查Crontab是否安装 若没有 需要先安装Crontab定时工具 安装定时工具参考(https://www.cnblogs.com/shaohuixia/p/5577738.html) 需要 ...
- python 虚拟环境安装与卸载
Ubuntu16.04 安装 卸载 pip原创Solarzhou 发布于2019-06-12 21:50:28 阅读数 2001 收藏展开 实验环境Ubuntu16.04:VMware15: 问题描述 ...