我要评论点击操作:------>事件: 就是一件事, 有触发和响应, 事件源
按钮被点击,弹出对话框
- 按钮---->事件源
- 点击---->事件名字
- 被点了--->触发了
- 弹框了--->响应
案例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="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="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="按钮" 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="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 = "怀孕了";
};
}
</script>
案例11：
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论