JS---DOM---点击操作---part1---20个案例
点击操作:------>事件: 就是一件事, 有触发和响应, 事件源
按钮被点击,弹出对话框
- 按钮---->事件源
- 点击---->事件名字
- 被点了--->触发了
- 弹框了--->响应
案例1：点击按钮弹出对话框
以下全部是理解，html和js代码分离：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>jane的自学转行</title>
</head> <body>
<!--第一个版本-->
<!--html代码,点击按钮弹出对话框,对话框:alert()====>js的代码-->
<!--html代码中嵌入了js的代码,不方便后期的修改和维护-->
<input type="button" value="显示效果" onclick="alert('我被点了')" />
<!--最终的效果:应该把js代码和html分离--> <!--第二个版本: js代码很多,但是没有分离html和js该怎么做-->
<script>
function f1() {
//函数中可以写很多的代码
alert("这是一个对话框");
}
</script>
<input type="button" value="显示效果" onclick="f1()" />
<!--开始分离html和js-->
<input type="button" value="开始分离代码" id="btn" />
<script>
function f2() {
alert("开发分离html和js代码");
}
//html标签中的id属性中存储的值是唯一的,
//id属性就像人的身份证号码一样,不能重复,页面中的唯一的标识
//从文档中找到id值为btn的这个标签(元素)
//document.getElementById("id属性的值");======>返回的是一个元素对象
//根据id获取这个标签(元素)
var btnObj = document.getElementById("btn");
//为按钮注册点击事件
btnObj.onclick = f2;//不加括号
</script> <!--最终的版本代码:-->
<input type="button" value="最终版" id="btn1" />
<script>
// //根据id属性的值从整个文档中获取这个元素(标签)
var btnObj1 = document.getElementById("btn1");
//为该元素注册点击事件
btnObj1.onclick = function () {
alert("哦,这真是太好了");
}; //根据id属性的值从整个文档中获取这个元素(标签)
//为该元素注册点击事件
document.getElementById("btn1").onclick = function () {
alert("哦,这真是太好了");
};
</script>
</body> </html>
最终代码：
<input type="button" value="按钮" id="btn" />
<script>
var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
alert("哦，小苏好帅哦");
}; // document.getElementById("btn").onclick = function () {
// alert("哦，小苏好帅哦");
// };
</script>
案例2：点击按钮显示图片
点击按钮的时候，设置img标签的src属性有一个图片的路径
<input type="button" value="显示图片" id="btn" />
<img src="" alt="" id="im" /> <script>
var btnObj = document.getElementById("btn");
//为按钮注册点击事件,添加事件处理函数
btnObj.onclick = function () {
//根据id获取图片的标签,设置图片的src属性值
var imObj = document.getElementById("im");
imObj.src = "images/liuyan.jpg";
//设置图片的大小
imObj.width = "300";
imObj.height = "400";
};
案例3：点击按钮,修改p标签的显示内容
凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式
<input type="button" value="设置p的内容" id="btn" />
<p id="p1">我是一个p标签</p> <script>
// 根据id获取按钮, 为按钮注册点击事件, 添加事件处理函数
document.getElementById("btn").onclick = function () {
//根据id获取p标签,设置内容
document.getElementById("p1").innerText = "这是一个p";
};
案例4：点击按钮修改a标签的地址和热点文字
1. a标签在新页面打开
2. 优化后：
<input type="button" value="显示效果" id="btn" />
<a href="https://www.jiumodiary.com/" id="ak" target="_blank">鸠摩搜书</a> <script>
//根据id获取按钮,注册点击事件,添加事件处理函数
// document.getElementById("btn").onclick = function () {
// //根据id获取超链接,设置href属性
// document.getElementById("ak").href = "http://www.itcast.cn";
// //根据id获取超链接,设置文字内容
// document.getElementById("ak").innerText = "传智播客";
// }; //优化后的:
document.getElementById("btn").onclick = function () {
var aObj = document.getElementById("ak");
aObj.href = "http://www.itcast.cn";
aObj.innerText = "传播智客";
};
</script>
案例5：点击按钮设置多个p标签的文字内容
- document.getElementsByTagName("标签的名字");返回的是一个伪数组,
- 无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组
<input type="button" value="请点击以查看效果" id="btn" />
<div id="dv1">
<p>我是一朵小红花开在春风里</p>
<p>我是一朵小红花开在春风里</p>
<p>我是一朵小红花开在春风里</p>
<p>我是一朵小红花开在春风里</p>
<p>我是一朵小红花开在春风里</p>
</div>
<div>
<p>我是一颗小草，开在雪天里</p>
<p>我是一颗小草，开在雪天里</p>
<p>我是一颗小草，开在雪天里</p>
<p>我是一颗小草，开在雪天里</p>
</div>
<script>
document.getElementById("btn").onclick = function () {
//获取div里面的p
var pObjs = document.getElementById("dv1").getElementsByTagName("p");
//遍历数组设置文字
for (var i = 0; i < pObjs.length; i++) {
pObjs[i].innerText = "我们都是p";
}
};
</script>
实现效果：
案例6：点击按钮修改图片的alt和title属性
<input type="button" value="显示效果" id="btn" />
<img src="data:images/cangjingkong.jpg" alt="和新浪吉祥物合影" title="参加新浪活动" />
<script>
document.getElementById("btn").onclick = function () {
var imgObjs = document.getElementsByTagName("img");
//ElementByTagName返回的是伪数组
imgObjs[0].alt = "改了";
imgObjs[0].title = "新浪"
};
</script>
案例7：点击按钮修改所有文本框的值
<input type="button" value="请点击修改文本框的值" id="btn"> <br />
<input type="text" value="" /> <br />
<input type="text" value="" /> <br />
<input type="text" value="" /> <br />
<input type="text" value="" /> <br />
<input type="text" value="" /> <br /> <script>
//根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").onclick = function () {
//获取所有的文本框
var inputs = document.getElementsByTagName("input");
//判断这个元素是不是按钮
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type != "button") {
inputs[i].value = "两只黄鹂鸣翠柳"
}
}
};
</script>
案例8：点击每个图片弹出对话框
<img src="data:images/1.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
<img src="data:images/3.jpg" alt="" />
<script>
var imgObjs = document.getElementsByTagName("img");
for (var i = 0; i < imgObjs.length; i++) {
imgObjs[i].onclick = function () {
alert("被点击了");
};
}
案例9：点击按钮修改按钮的value属性
<input type="button" value="按钮" id="btn" />
<script>
//在某个元素的事件中,自己的事件中的this就是当前的这个元素对象
var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
//修改按钮的value属性
this.value = "我是按钮";
this.type = "text";
this.id = "btn2"; //id也可以修改
};
</script>
案例10：点击图片修改自身的宽和高
<img src="data:images/liuyan.jpg" alt="" id="im" />
<script>
var imgObj = document.getElementById("im");
imgObj.onclick = function () {
this.width = "200";
this.height = "300";
};
</script>
案例11：排他功能
1. 所有按钮value值设为默认值
2. 当前被点击的按钮另设置
<input type="button" value="没怀孕" />
<input type="button" value="没怀孕" />
<input type="button" value="没怀孕" />
<input type="button" value="没怀孕" />
<input type="button" value="没怀孕" />
<script>
//获取所有的按钮,分别注册点击事件
var btnObjs = document.getElementsByTagName("input");
//循环遍历所有的按钮
for (var i = 0; i < btnObjs.length; i++) {
btnObjs[i].onclick = function () {
//再用循环，把所有的按钮的value值设置为默认的值
for (var j = 0; j < btnObjs.length; j++) {
btnObjs[j].value = "没怀孕";
}
//当前被点击的按钮设置
this.value = "怀孕了"; //这里不能用btnObjs[i]，注意
};
}
</script>
案例12：点击图片标签,设置图片标签的src路径为超链接中大图的路径
<a href="images/1.jpg" id="ak">
<img src="data:images/1-small.jpg" alt="小图" id="im">
</a>
<script>
document.getElementById("im").onclick = function () {
this.src = document.getElementById("ak").href;
};
</script>
案例13：点击按钮修改图片
根据id获取对象--->封装成一个函数
<input type="button" value="点击显示大图" id="btn" />
<img src="data:images/1-small.jpg" alt="" id="im">
<script>
function my$(id) {
return document.getElementById(id);
} my$("btn").onclick = function () {
my$("im").src = "images/1.jpg";
};
</script>
案例14：点击按钮修改性别和兴趣
1. 规律:在表单标签中, 如果属性和值只有一个, 并且值是这个属性本身, 那么,
在写js代码,DOM操作的时候,这个属性值, 是布尔类型就可以了
2. CSS实现就是radio里面的checked="checked"
<input type="button" value="修改性别" id="btn1">
<input type="radio" value="1" name="sex" />男
<input type="radio" value="2" name="sex" id="rad1" />女
<input type="radio" value="3" name="sex" />保密
<script> function my$(id) {
return document.getElementById(id);
}
my$("btn1").onclick = function () {
my$("rad1").checked = true;
};
</script>
<br /> <input type="button" value="选择兴趣" id="btn2" />
<input type="checkbox" value="1" name="xingqu" id="ck1" />吃饭
<input type="checkbox" value="1" name="xingqu" />睡觉
<input type="checkbox" value="1" name="xingqu" />打豆豆
<input type="checkbox" value="1" name="xingqu" id="ck2" />玩手机
<script>
my$("btn2").onclick = function () {
my$("ck1").checked = true;
my$("ck2").checked = true;
};
</script>
案例15：点击按钮选择菜单
<input type="button" value="点菜" id="btn" />
<select name="" id="ss">
<option value="1">毛肚</option>
<option value="2">鸭血</option>
<option value="3" id="op1">鸭肠</option>
<option value="4">海带</option>
<option value="5">金针菇</option>
</select> <script src="common.js"></script>
<script>
my$("btn").onclick = function () {
my$("op1").selected = true;
};
</script>
附加：点击按钮修改文字框中的字
<script src="common.js"></script>
<textarea name="" id="tt" cols="30" rows="10" readonly>
某人问智者,
大师:您觉得怎么做才是最快乐的?
回答说:不要和愚者辩论
这个人说:我不这么认为!
大师说:您说的对,
我就是这么帅
</textarea>
<input type="button" value="注册" id="btn2" />
<script>
my$("btn2").onclick = function () {
my$("tt").value = "嘎嘎"; //推荐用value，看成表单标签
//my$("tt").innerText="哈哈";
};
案例16：点击按钮设置div的宽，高和背景颜色
css中这个属性是多个单词的写法, 在js代码中DOM操作的时候.把-干掉, 后面的单词的首字母大写即可
<!--一个按钮 -->
<input type="button" value="设置样式" id="btn" />
<!-- 画个盒子？ -->
<div id="dv"></div>
<!-- 引入common.js 里面存储常用的js函数 -->
<script src="common.js"></script>
<!-- 另起一个script在里面写 -->
<script>
my$("btn").onclick = function () {
my$("dv").style.width = "300px";
my$("dv").style.height = "200px";
my$("dv").style.backgroundColor = "hotpink"; //css中这个属性是多个单词的写法, 在js代码中DOM操作的时候.把-干掉, 后面的单词的首字母大写即可
};
</script>
案例17：点击按钮显示和隐藏div
<!-- 画个按钮 -->
<input type="button" value="隐藏" id="btn" />
<!-- 画个盒子 -->
<div id="dv"></div>
<!-- 引入common.js存储常用的js函数 -->
<script src="common.js"></script>
<!-- 开始写行为 -->
<script>
my$("btn").onclick = function () {
// 点隐藏后div隐藏 按钮文字变为显示
if (this.value == "隐藏") {
my$("dv").style.display = "none";
this.value = "显示";
} else if (this.value == "显示") {
// 否则，点显示后，div显示，按钮文字变为隐藏
my$("dv").style.display = "block";
this.value = "隐藏";
}
};
</script>
案例18：点击按钮设置div的样式
1. 在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className
<head>
<meta charset="UTF-8">
<title>jane自学转行</title>
<!-- <style>
.cls {
width: 300px;
height: 200px;
background-color: yellow;
border: 2px solid red;
}
</style> -->
<style>
.cls {
width: 300px;
height: 200px;
background-color: pink;
border: 5px solid hotpink;
;
}
</style>
</head> <body>
<input type="button" value="设置样式" id="btn" />
<div id="dv"></div> <script src="common.js"></script>
<script>
my$("btn").onclick = function () {
//在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className
my$("dv").className = "cls";
};
</script>
案例19：点击按钮,通过类样式的方式设置div的显示和隐藏
<head>
<meta charset="UTF-8">
<title>jane自学转行</title>
<style>
div {
width: 300px;
height: 200px;
background-color: pink;
border: 5px solid hotpink;
} .cls {
display: none;
}
</style>
</head> <body>
<input type="button" value="隐藏" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
// console.log(my$("dv").className);
if (my$("dv").className != "cls") {
//现在是显示的,应该隐藏
my$("dv").className = "cls";
this.value = "显示";
} else {
//隐藏的状态----立刻显示
my$("dv").className = "";
this.value = "隐藏";
}
};
</script>
案例20：网页开关灯
<head>
<meta charset="UTF-8">
<title>jane自学转行</title>
<!-- <style>
.cls {
background-color: black;
}
</style> -->
<style>
.cls {
background-color: black;
}
</style> </head> <body id="bd">
<input type="button" value="开/关灯" id="btn" />
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
document.body.className = document.body.className != "cls" ? "cls" : "";
};
</script>
JS---DOM---点击操作---part1---20个案例的更多相关文章
- 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 ...
- 基础DOM和CSS操作(二)
元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...
- 10-JavaScript之DOM的事件操作
JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...
随机推荐
- 华为云垃圾分类大赛，让AI 帮你“见圾行事”
[摘要] "你是什么垃圾"已经out了,我们来看0看谁是垃圾之王?! 当各位听说深圳实行垃圾分类政策时,是不是虎躯一震,每天焦虑得想搬家? -稳住,别慌! 救兵来啦 华为云人工智能 ...
- where 和having 的区别
where : 约束声明,在查询结果返回之前对数据库中的查询条件进行约束 其后不能写聚合函数 having 过滤声明,在查询结果返回之后进行过滤,
- windows下利用iis建立网站网站并实现局域共享
博客园 首页 新随笔 联系 管理 订阅 随笔- 54 文章- 9 评论- 0 Windows下利用IIS建立网站并实现局域网共享 https://blog.csdn.net/qq_4148541 ...
- luogu P2860 [USACO06JAN]冗余路径Redundant Paths |Tarjan
题目描述 In order to get from one of the F (1 <= F <= 5,000) grazing fields (which are numbered 1. ...
- 伸展树(Splay tree)的基本操作与应用
伸展树的基本操作与应用 [伸展树的基本操作] 伸展树是二叉查找树的一种改进,与二叉查找树一样,伸展树也具有有序性.即伸展树中的每一个节点 x 都满足:该节点左子树中的每一个元素都小于 x,而其右子树中 ...
- hdu-4638
There are n men ,every man has an ID(1..n).their ID is unique. Whose ID is i and i-1 are friends, Wh ...
- 3- 设置断点修改Response
以下是借鉴别人的知识分享.我在这里转载,如有冒犯,还请告知. 只要你会设置断点修改请求内容的话,这个设置断点修改响应内容的方法也是一样的,只需要修改一下命令即可. 修改响应内容也有两种方法: 第一种: ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- 《Java基础知识》Java内部类及其实例化
在 Java 中,允许在一个类(或方法.语句块)的内部定义另一个类,称为内部类(Inner Class),有时也称为嵌套类(Nested Class). 内部类和外层封装它的类之间存在逻辑上的所属关系 ...
- Ansible自动化部署入门到进阶笔记
目录 一.基本部署 安装Ansible Ansible配置文件 定义Inventory 使用秘钥方式连接 使用帮助 Ansible命令应用基础 二.常见模块 三.Ansible playbook 四. ...