点击操作:------>事件: 就是一件事, 有触发和响应, 事件源
按钮被点击,弹出对话框
- 按钮---->事件源
- 点击---->事件名字
- 被点了--->触发了
- 弹框了--->响应
案例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 = "怀孕了"; //这里不能用btnObjs[i]，注意 }; } </script>
案例12：点击图片标签,设置图片标签的src路径为超链接中大图的路径
<a href="images/1.jpg" id="ak"> <img src="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="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 { 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>