点击操作:------>事件: 就是一件事, 有触发和响应, 事件源
按钮被点击,弹出对话框
按钮---->事件源 点击---->事件名字 被点了--->触发了 弹框了--->响应
案例1：点击按钮弹出对话框
以下全部是理解，html和js代码分离：
<!DOCTYPE html>
<html >
<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="开始分离代码" />
<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="最终版" />
<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="按钮" />
<script>
var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
alert("哦，小苏好帅哦");
};
// document.getElementById("btn").onclick = function () {
// alert("哦，小苏好帅哦");
// };
</script>
案例2：点击按钮显示图片
点击按钮的时候，设置img标签的src属性有一个图片的路径
<input type="button" value="显示图片" />
<img src="" alt="" />
<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的内容" />
<p >我是一个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="显示效果" />
<a href="https://www.jiumodiary.com/" 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="请点击以查看效果" />
<div >
<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="显示效果" />
<img src="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="请点击修改文本框的值" > <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="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="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="按钮" />
<script>
//在某个元素的事件中,自己的事件中的this就是当前的这个元素对象
var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
//修改按钮的value属性
this.value = "我是按钮";
this.type = "text";
this.id = "btn2"; //id也可以修改
};
</script>
案例10：点击图片修改自身的宽和高
<img src="images/liuyan.jpg" alt="" />
<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" >
<img src="images/1-small.jpg" alt="小图" >
</a>
<script>
document.getElementById("im").onclick = function () {
this.src = document.getElementById("ak").href;
};
</script>
案例13：点击按钮修改图片
根据id获取对象--->封装成一个函数
<input type="button" value="点击显示大图" />
<img src="images/1-small.jpg" alt="" >
<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="修改性别" >
<input type="radio" value="1" name="sex" />男
<input type="radio" value="2" name="sex" />女
<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="选择兴趣" />
<input type="checkbox" value="1" name="xingqu" />吃饭
<input type="checkbox" value="1" name="xingqu" />睡觉
<input type="checkbox" value="1" name="xingqu" />打豆豆
<input type="checkbox" value="1" name="xingqu" />玩手机
<script>
my$("btn2").onclick = function () {
my$("ck1").checked = true;
my$("ck2").checked = true;
};
</script>
案例15：点击按钮选择菜单
<input type="button" value="点菜" />
<select name="" >
<option value="1">毛肚</option>
<option value="2">鸭血</option>
<option value="3" >鸭肠</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="" cols="30" rows="10" readonly>
某人问智者,
大师:您觉得怎么做才是最快乐的?
回答说:不要和愚者辩论
这个人说:我不这么认为!
大师说:您说的对,
我就是这么帅
</textarea>
<input type="button" value="注册" />
<script>
my$("btn2").onclick = function () {
my$("tt").value = "嘎嘎"; //推荐用value，看成表单标签
//my$("tt").innerText="哈哈";
};
案例16：点击按钮设置div的宽，高和背景颜色
css中这个属性是多个单词的写法, 在js代码中DOM操作的时候.把-干掉, 后面的单词的首字母大写即可 <!--一个按钮 -->
<input type="button" value="设置样式" />
<!-- 画个盒子？ -->
<div ></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="隐藏" />
<!-- 画个盒子 -->
<div ></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="设置样式" />
<div ></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="隐藏" />
<div ></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 >
<input type="button" value="开/关灯" />
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
document.body.className = document.body.className != "cls" ? "cls" : "";
};
</script>
