案例

为元素注册点击事件，弹出对话框

  1.  <input type="button" id="btn" value="开发分离">
  2.     <input type="button" id="btn2" value="最终版">
  3.     <script>
  4.     //定义函数
  5.     function f1(){
  6.         alert("开发分离的html和js代码");
  7.     }
  8.     //根据id获取这个标签(元素)
  9.     var btnObj = document.getElementById("btn");
  10.     //为按钮注册点击事件
  11.     //注意f1不加括号 不然f1()，页面加载时就执行了
  12.     //该注册方式不是最好的
  13.     btnObj.onclick =f1;
  14.     //根据id属性的值，从整个文档中获取这个标签(元素)
  15.     var btnObj2 = document.getElementById("btn2");
  16.     //为当前的这个按钮元素(对象)，注册点击事件，添加事件处理函数（匿命函数）
  17.     btnObj2.onclick = function(){
  18.         alert("我要变帅");
  19.     }
  20.     </script>

点击按钮显示、隐藏图片

  1.     <script>
  2.     //页面加载后执行
  3.     window.onload = function(){
  4.         //根据id获取按钮
  5.         var btnObj = document.getElementById("btn");
  6.         //为按钮注册点击事件，添加事件处理函数
  7.         btnObj.onclick = function(){
  8.             imgObj.src = "迪丽热巴.jpg";
  9.             //设置图片的大小 不用加px width=“”
  10.              imgObj.width = "300";
  11.         }
  12.         //根据id获取图片标签，设置图片的src属性值
  13.         var imgObj = document.getElementById("img");
  14.         //隐藏图片
  15.         var  hiddenObj = document.getElementById("hidden");
  16.         hiddenObj.onclick = function(){
  17.             //清空图片src属性
  18.             imgObj.src = "";
  19.         }
  20.     }
  21.     </script>
  22. </head>
  23. <body>
  24.     <input type="button" value="显示图片"  id="btn">
  25.     <input type="button" value="隐藏图片" id="hidden">
  27.     <img src="" alt="" id="img">
  28. </body>

点击按钮改变p标签显示内容

  1.  <script>
  2.     window.onload = function(){
  3.         //根据id获取元素，为元素测试点击事件
  4.         var btnObj = document.getElementById("btn");
  5.         btnObj.onclick = function(){
  6.             var p = document.getElementById("p1");
  7.             //p 标签文本内容设置时，使用innerText这个属性的方式
  8.             //凡成对出现的标签，中间的文本内容，设置的使用都使用innerText这个属性
  9.             p.innerText = "p改变后的内容:我还是一个p标记";
  10.         }
  11.     }
  12.     </script>
  13. </head>
  14. <body>
  15.     <input type="button" id="btn" value="设置p标签内容">
  16.     <p id="p1">我是p标签</p>
  17. </body>

案例点击按钮改变a标签的热点文字和标签地址

  1.  <script>
  2.     //页面加载后执行
  3.     window.onload = function(){
  4.         //根据id获取文档中btn按钮元素
  5.         var btnObj = document.getElementById("btn");
  6.         //为btn元素注册点击事件
  7.         btnObj.onclick = function(){
  8.             //根据id获取文档中a标签元素
  9.             var aObj = document.getElementById("google");
  10.             //设置a标签改变后的地址和热点文字
  11.             aObj.href = "www.baidu.com";
  12.             aObj.innerText = "百度";
  13.         }
  14.     }
  15.     </script>
  16. </head>
  17. <body>
  18.     <input type="button" id="btn" value="点击改变a标签的地址和热点文字">
  19.     <a href="www.google.com" id="google">谷歌</a>
  20. </body>

点击按钮修改多个p标签的文字的内容

  1. <script>
  2.     //页面加载后执行
  3.     window.onload = function(){
  4.       //根据id获取元素
  5.       var btnObj = document.getElementById("btn");
  6.       //为btnObj对象注册点击事件
  7.       btnObj.onclick = function(){
  8.         //根据标签名字获取标签
  9.         var pList = document.getElementsByTagName("p");
  10.         //遍历获取的到的标签伪数组
  11.         for(var i = 0; i < pList.length; i++){
  12.             pList[i].innerText = "好烦，帅不能当饭吃!"
  13.         }
  14.       }
  15.     }
  16.     </script>
  17. </head>
  18. <body>
  19.     <input type="button" id="btn" value="点击改变">
  20.     <p>哈哈，你最帅！！！</p>
  21.     <p>哈哈，你最帅！！！</p>
  22.     <p>哈哈，你最帅！！！</p>
  23.     <p>哈哈，你最帅！！！</p>
  24.     <p>哈哈，你最帅！！！</p>
  25. </body>

点击按钮修改图片的alt和title

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>11案例点击按钮修改图片的alt和title</title>
  8.     <style>
  9.     img{
  10.         width: 100px;
  11.         height: 100px;
  12.     }
  13.     </style>
  14. </head>
  15. <body>
  16.     <input type="button" value="显示效果" id="btn">
  17.     <img src="迪丽热巴.jpg" alt="哈哈" title="imgtitle">
  18.     <script>
  19.     document.getElementById("btn").onclick = function(){
  20.         //返回一个伪数组
  21.       var imgObj = document.getElementsByTagName("img");
  22.       console.log(imgObj);
  23.       imgObj[0].title = "图片标题";
  24.       imgObj[0].alt = "图片的alt";
  25.     }
  26.     </script>
  27. </body>

点击按钮修改文本框的值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>点击按钮修改文本框的值</title>
  8. </head>
  9. <body>
  10.     <input type="button" value="修改文本框的值" id="btn"><br/>
  11.     <input type="text" value=""><br/>
  12.     <input type="text" value=""><br/>
  13.     <input type="text" value=""><br/>
  14.     <input type="text" value=""><br/>
  15.     <input type="text" value=""><br/>
  16.     <input type="text" value=""><br/>
  17.     <input type="text" value=""><br/>
  18.     <script>
  19.     document.getElementById("btn").onclick = function(){
  20.         //获取所有的文本框
  21.         var inputs = document.getElementsByTagName("input")
  23.         for(var i = 0; i < inputs.length; i++){
  24.             if(inputs[i].type !="button"){
  25.                 inputs[i].value = "哈哈真的改了！";
  26.             }
  27.         }
  28.     }
  29.     </script>                
  31. </body>
  32. </html>

点击每个图片弹出一个对话框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.     img{
  10.         width: 100px;
  11.         height: 100px;
  12.     }
  13.     </style>
  14. </head>
  15. <body>
  16.     <img src="迪丽热巴.jpg" alt=""id="img1">
  17.     <img src="迪丽热巴.jpg" alt=""id="img2">
  18.     <img src="迪丽热巴.jpg" alt=""id="img3">
  19.     <script>
  20.         //根据标签名字获取图片标签 ，分别注册点击事件
  21.     var imgObjs = document.getElementsByTagName("img");
  22.     //循环遍历数组，获取每个图片标签，注册点击事件，添加事件处理函数
  23.     for(var i = 0; i < imgObjs.length; i++){
  24.         imgObjs[i].onclick = function (){
  25.             alert("被点击了");
  26.         }
  27.     }
  28.     </script>
  29. </body>
  30. </html>

点击按钮修改按钮的属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <input type="button" value="按钮" id="btn">
  11.     <script>
  12.     var btn = document.getElementById("btn");
  13.     btn.onclick = function(){
  14.         //修改按钮的value
  15.         this.value = "我是按钮，哈哈哈";
  16.         this.type = "text";
  17.         this.id = "nnn";
  18.     }
  19.     </script>
  20. </body>
  21. </html>

点击改变图片自身的宽和高

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>点击改变图片自身的宽和高</title>
  8.     <style>
  10.     </style>
  11. </head>
  12. <body>
  13.     <img src="迪丽热巴.jpg" alt=""id="img1">
  15.     <script>
  16.     //如果style中定义了宽高无法改变、、、能改变了在告诉你
  17.      var imgObj = document.getElementById("img1");
  18.      imgObj.onclick = function(){
  19.          this.width ="200";
  20.      }
  21.     </script>
  22. </body>
  23. </html>

16按钮中点击自身值改变

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <input type="button"value="我们都没变">
  11.     <input type="button"value="我们都没变">
  12.     <input type="button"value="我们都没变">
  13.     <input type="button"value="我们都没变">
  14.     <input type="button"value="我们都没变">
  15.     <script>
  16.     var inputs = document.getElementsByTagName("input");
  17.     for(var i = 0; i < inputs.length; i++){
  18.         //为每个按钮添加点击事件
  19.         inputs[i].onclick = function(){
  20.             //先将所有的赋值为同样
  21.            for(var j = 0; j<inputs.length; j++){
  22.                inputs[j].value= "我们都没变"
  23.            }
  24.            //单独赋值当前变了
  25.            this.value="变了"
  26.         }
  27.     }
  28.     </script>
  29. </body>
  30. </html>

onmouseover 属性在鼠标指针移动到元素上时触发

onmouseout 属性在鼠标指针移出元素上时触发

鼠标移入变色 移出正常

  3.     <ul id="ul">
  4.         <li>娃哈哈</li>
  5.         <li>农夫山泉</li>
  6.         <li>雪碧</li>
  7.         <li>可乐</li>
  8.         <li>江小白</li>
  9.     </ul>
  10.     <script src="common.js"></script>
  11.     <script>
  12.     //鼠标移入移出事件
  13.     //获取所有标签
  14.     var list = my$("ul").getElementsByTagName("li");
  15.     for(var i = 0 ; i < list.length; i++){
  16.         //鼠标移入事件onmouseover
  17.         list[i].onmouseover =function(){
  18.             this.style.backgroundColor = "red";
  19.         }
  20.         //鼠标移出事件onmouseout
  21.         list[i].onmouseout = function(){
  22.             this.style.backgroundColor = "";
  23.         }
  25.     }
  27.     </script>

隔行变色

  1. <input type="button" value="隔行变色" id="btn">
  2.     <ul id="ul">
  3.         <li>奥迪</li>
  4.         <li>五菱宏光</li>
  5.         <li>奔驰</li>
  6.         <li>马自达</li>
  7.         <li>本田</li>
  8.         <li>玛莎拉蒂</li>
  9.         <li>悍马</li>
  10.         <li>雪佛兰</li>
  11.         <li>红旗</li>
  12.         <li>现代</li>
  13.     </ul>
  14.     <script src="common.js"></script>
  15.     <script>
  16.      //点击按钮
  17.      my$("btn").onclick = function(){
  18.        var liObjs =  my$("ul").getElementsByTagName("li");
  19.        for(var i = 0; i < liObjs.length; i++){
  20.         //    if(i%2==0){
  21.         //        //偶数
  22.         //        liObjs[i].style.background="red";
  23.         //    }else{
  24.         //        //偶数
  25.         //        liObjs[i].style.background="yellow";
  26.         //    }
  27.         //简结写法
  28.            liObjs[i].style.backgroundColor = i%2==0 ? "red": "yellow";
  29.        }
  30.      }
  31.     </script>

鼠标移入移出案例2

  1. <div class="div1">
  2.                 <img id="img1" src="images/5_small.png" alt="">
  3.         </div>
  5.         <img id="img2" class="div2" src="images/5.png" alt="">
  6.         <script src="common.js"></script>
  7.         <script>
  8.         //鼠标移出 onmouseover
  9.          my$("img1").onmouseover = function(){
  10.             my$("img2").style.display = "block";
  11.          }
  12.          my$("img1").onmouseout = function(){
  13.              my$("img2").style.display = "none";
  14.          }
  16.         </script>

第8天：javascriptDOM小 案例、onmouseover 、onmouseout的更多相关文章

  1. 机械表小案例之transform的应用

    这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...

  2. shell讲解-小案例

    shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...

  3. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  4. 02SpringMvc_springmvc快速入门小案例（XML版本）

    这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:

  5. React.js入门小案例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  6. SqlDependency缓存数据库表小案例

    SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...

  7. JavaScript apply函数小案例

    //回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...

  8. Session小案例------完成用户登录

    Session小案例------完成用户登录     在项目开发中,用户登陆功能再平常只是啦,当用户完毕username和password校验后.进入主界面,须要在主界面中显示用户的信息,此时用ses ...

  9. ch1-vuejs基础入门（hw v-bind v-if v-for v-on v-model 应用组件简介 小案例）

    1 hello world 引入vue.min.js 代码: ----2.0+版本 <div id="test"> {{str}} </div> <s ...

随机推荐

  1. python中的内置函数(一), lambda, filter, map

    https://www.processon.com/view/link/5c10da0ce4b099ae3e137bf6 1.内置函数 内置函数就是python中提供的,可以直接拿来用的函数,比如pr ...

  2. C指针 【温故】

    概念 1 指针也是一个变量,做为指针变量的值是另一个变量的地址.指针存放的内容是一个地址,该地址指向一块内存空间 其一般形式为: 类型说明符 *变量名: 其中,*表示这是一个指针变量,变量名即为定义的 ...

  3. centos7安装nginx(自定义安装文件夹)

    一.安装所需要的依赖软件 1.gcc:nginx编译依赖gcc环境 #yum install gcc-c++ 2.pcre:(Perl Compatible Regular Expressions)是 ...

  4. ecshop后台0day漏洞原理+利用方法 XSS+Getshll

    发布日期:2012-10.25 发布作者:dis9@ztz 漏洞类型:跨站攻击 代码执行 0x0 后台getshell 在 includes/cls_template.php fetch函数 /** ...

  5. Java 设计模式——单例模式

    Java有很多的设计模式,但是让我们一个个分析出来,可能就一脸蒙逼了,今天就和大家一块来分析一下Java中的一些常用的设计模式.今天先分析单例模式 单例模式的好处 举个例子:有一个类,里面有若干个公共 ...

  6. jquery input 实时监听输入

    $('input').bind('input propertychange', function() { alert('hello world') });

  7. SQL 中用户建立与权限授予

    SQL 中用户建立与权限授予 一.原有 如果大家对我的博客动态非常关注的话,应该又看到我弄了一个随机MAN信息的小工具.但是呢,那个工具还有待加强(显示效果不是那么的好). 所以我就希望可以显示一些简 ...

  8. 使用HBuilderX实现打包vue项目成app

    一.准备开发工具 开发工具:HBuilderX 官网地址:http://www.dcloud.io (标准版需要自己安装插件,app开发版已经把app开发常用的插件安装好了,开箱即用,建议使用开发版) ...

  9. BootStrap Modal 点击空白时自动关闭

    本文为大家讲解的是如何禁用 BootStrap Modal 点击空白时自动关闭的方法,感兴趣的同学参考下. 方法如下 $('#myModal').modal({backdrop: 'static', ...

  10. .crx 文件修改

    .crx 文件类型:Chrome Extension 扩展名为.crx的文件是一个插件文件. 解压:使用7zip 修改: notepad++ 打包: Chrome 扩展项