Web API---点击操作---十几个案例
程序员文章站
2023-08-30 18:34:32
点击操作: >事件: 就是一件事, 有触发和响应, 事件源 按钮被点击,弹出对话框 按钮 >事件源 点击 >事件名字 被点了 >触发了 弹框了 >响应 案例1:点击按钮弹出对话框 以下全部是理解,html和js代码分离: ......
点击操作:------>事件: 就是一件事, 有触发和响应, 事件源
按钮被点击,弹出对话框
- 按钮---->事件源
- 点击---->事件名字
- 被点了--->触发了
- 弹框了--->响应
案例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:
上一篇: 学生信息管理系统
推荐阅读
-
Web API---点击操作---十几个案例
-
Web API---体验DOM操作
-
Web API---DOM---点击操作---part2---多个案例
-
案例讲解WEB 漏洞-文件操作之文件下载读取
-
Web API---DOM---点击操作---节点的方式---案例
-
Web API---DOM---点击操作---part2---多个案例
-
Web API---点击操作---十几个案例
-
Web API---体验DOM操作
-
安卓入门第三讲01-Activity的简单逻辑操作(对文本,图片进行设置(两种获取控件的方法),按钮点击-点击按钮打印日志,获取文本框的值+计算器简易案例)
-
案例讲解WEB 漏洞-文件操作之文件下载读取