第8天：javascriptDOM小案例、onmouseover 、onmouseout

案例

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

 <input type="button" id="btn" value="开发分离">

    <input type="button" id="btn2" value="最终版">

    <script>

    //定义函数

    function f1(){

        alert("开发分离的html和js代码");

    }

    //根据id获取这个标签(元素)

    var btnObj = document.getElementById("btn");

    //为按钮注册点击事件

    //注意f1不加括号 不然f1()，页面加载时就执行了

    //该注册方式不是最好的

    btnObj.onclick =f1;

    //根据id属性的值，从整个文档中获取这个标签(元素)

    var btnObj2 = document.getElementById("btn2");

    //为当前的这个按钮元素(对象)，注册点击事件，添加事件处理函数（匿命函数）

    btnObj2.onclick = function(){

        alert("我要变帅");

    }

    </script>

点击按钮显示、隐藏图片

    <script>

    //页面加载后执行

    window.onload = function(){

        //根据id获取按钮

        var btnObj = document.getElementById("btn");

        //为按钮注册点击事件，添加事件处理函数

        btnObj.onclick = function(){

            imgObj.src = "迪丽热巴.jpg";

            //设置图片的大小 不用加px width=“”

             imgObj.width = "300";

        }

        //根据id获取图片标签，设置图片的src属性值

        var imgObj = document.getElementById("img");

        //隐藏图片

        var  hiddenObj = document.getElementById("hidden");

        hiddenObj.onclick = function(){

            //清空图片src属性

            imgObj.src = "";

        }

    }

    </script>

</head>

<body>

    <input type="button" value="显示图片"  id="btn">

    <input type="button" value="隐藏图片" id="hidden">

    <img src="" alt="" id="img">

</body>

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

 <script>

    window.onload = function(){

        //根据id获取元素，为元素测试点击事件

        var btnObj = document.getElementById("btn");

        btnObj.onclick = function(){

            var p = document.getElementById("p1");

            //p 标签文本内容设置时，使用innerText这个属性的方式

            //凡成对出现的标签，中间的文本内容，设置的使用都使用innerText这个属性

            p.innerText = "p改变后的内容:我还是一个p标记";

        }

    }

    </script>

</head>

<body>

    <input type="button" id="btn" value="设置p标签内容">

    <p id="p1">我是p标签</p>

</body>

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

 <script>

    //页面加载后执行

    window.onload = function(){

        //根据id获取文档中btn按钮元素

        var btnObj = document.getElementById("btn");

        //为btn元素注册点击事件

        btnObj.onclick = function(){

            //根据id获取文档中a标签元素

            var aObj = document.getElementById("google");

            //设置a标签改变后的地址和热点文字

            aObj.href = "www.baidu.com";

            aObj.innerText = "百度";

        }

    }

    </script>

</head>

<body>

    <input type="button" id="btn" value="点击改变a标签的地址和热点文字">

    <a href="www.google.com" id="google">谷歌</a>

</body>

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

<script>

    //页面加载后执行

    window.onload = function(){

      //根据id获取元素

      var btnObj = document.getElementById("btn");

      //为btnObj对象注册点击事件

      btnObj.onclick = function(){

        //根据标签名字获取标签

        var pList = document.getElementsByTagName("p");

        //遍历获取的到的标签伪数组

        for(var i = 0; i < pList.length; i++){

            pList[i].innerText = "好烦，帅不能当饭吃!"

        }

      }

    }

    </script>

</head>

<body>

    <input type="button" id="btn" value="点击改变">

    <p>哈哈，你最帅！！！</p>

    <p>哈哈，你最帅！！！</p>

    <p>哈哈，你最帅！！！</p>

    <p>哈哈，你最帅！！！</p>

    <p>哈哈，你最帅！！！</p>

</body>

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>11案例点击按钮修改图片的alt和title</title>

    <style>

    img{

        width: 100px;

        height: 100px;

    }

    </style>

</head>

<body>

    <input type="button" value="显示效果" id="btn">

    <img src="迪丽热巴.jpg" alt="哈哈" title="imgtitle">

    <script>

    document.getElementById("btn").onclick = function(){

        //返回一个伪数组

      var imgObj = document.getElementsByTagName("img");

      console.log(imgObj);

      imgObj[0].title = "图片标题";

      imgObj[0].alt = "图片的alt";

    }

    </script>

</body>

点击按钮修改文本框的值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>点击按钮修改文本框的值</title>

</head>

<body>

    <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/>

    <input type="text" value=""><br/>

    <input type="text" value=""><br/>

    <script>

    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>                

</body>

</html>

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    img{

        width: 100px;

        height: 100px;

    }

    </style>

</head>

<body>

    <img src="迪丽热巴.jpg" alt=""id="img1">

    <img src="迪丽热巴.jpg" alt=""id="img2">

    <img src="迪丽热巴.jpg" alt=""id="img3">

    <script>

        //根据标签名字获取图片标签 ，分别注册点击事件

    var imgObjs = document.getElementsByTagName("img");

    //循环遍历数组，获取每个图片标签，注册点击事件，添加事件处理函数

    for(var i = 0; i < imgObjs.length; i++){

        imgObjs[i].onclick = function (){

            alert("被点击了");

        }

    }

    </script>

</body>

</html>

点击按钮修改按钮的属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <input type="button" value="按钮" id="btn">

    <script>

    var btn = document.getElementById("btn");

    btn.onclick = function(){

        //修改按钮的value

        this.value = "我是按钮，哈哈哈";

        this.type = "text";

        this.id = "nnn";

    }

    </script>

</body>

</html>

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>点击改变图片自身的宽和高</title>

    <style>

    </style>

</head>

<body>

    <img src="迪丽热巴.jpg" alt=""id="img1">

    <script>

    //如果style中定义了宽高无法改变、、、能改变了在告诉你

     var imgObj = document.getElementById("img1");

     imgObj.onclick = function(){

         this.width ="200";

     }

    </script>

</body>

</html>

16按钮中点击自身值改变

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <input type="button"value="我们都没变">

    <input type="button"value="我们都没变">

    <input type="button"value="我们都没变">

    <input type="button"value="我们都没变">

    <input type="button"value="我们都没变">

    <script>

    var inputs = document.getElementsByTagName("input");

    for(var i = 0; i < inputs.length; i++){

        //为每个按钮添加点击事件

        inputs[i].onclick = function(){

            //先将所有的赋值为同样

           for(var j = 0; j<inputs.length; j++){

               inputs[j].value= "我们都没变"

           }

           //单独赋值当前变了

           this.value="变了"

        }

    }

    </script>

</body>

</html>

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

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

鼠标移入变色移出正常



    <ul id="ul">

        <li>娃哈哈</li>

        <li>农夫山泉</li>

        <li>雪碧</li>

        <li>可乐</li>

        <li>江小白</li>

    </ul>

    <script src="common.js"></script>

    <script>

    //鼠标移入移出事件

    //获取所有标签

    var list = my$("ul").getElementsByTagName("li");

    for(var i = 0 ; i < list.length; i++){

        //鼠标移入事件onmouseover

        list[i].onmouseover =function(){

            this.style.backgroundColor = "red";

        }

        //鼠标移出事件onmouseout

        list[i].onmouseout = function(){

            this.style.backgroundColor = "";

        }

    }

    </script>

隔行变色

<input type="button" value="隔行变色" id="btn">

    <ul id="ul">

        <li>奥迪</li>

        <li>五菱宏光</li>

        <li>奔驰</li>

        <li>马自达</li>

        <li>本田</li>

        <li>玛莎拉蒂</li>

        <li>悍马</li>

        <li>雪佛兰</li>

        <li>红旗</li>

        <li>现代</li>

    </ul>

    <script src="common.js"></script>

    <script>

     //点击按钮

     my$("btn").onclick = function(){

       var liObjs =  my$("ul").getElementsByTagName("li");

       for(var i = 0; i < liObjs.length; i++){

        //    if(i%2==0){

        //        //偶数

        //        liObjs[i].style.background="red";

        //    }else{

        //        //偶数

        //        liObjs[i].style.background="yellow";

        //    }

        //简结写法

           liObjs[i].style.backgroundColor = i%2==0 ? "red": "yellow";

       }

     }

    </script>

鼠标移入移出案例2

<div class="div1">

                <img id="img1" src="images/5_small.png" alt="">

        </div>

        <img id="img2" class="div2" src="images/5.png" alt="">

        <script src="common.js"></script>

        <script>

        //鼠标移出 onmouseover

         my$("img1").onmouseover = function(){

            my$("img2").style.display = "block";

         }

         my$("img1").onmouseout = function(){

             my$("img2").style.display = "none";

         }

        </script>

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

机械表小案例之transform的应用
这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...
shell讲解-小案例
shell讲解-小案例一.文件拷贝输出检查下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...
[jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
02SpringMvc_springmvc快速入门小案例（XML版本）
这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:
React.js入门小案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
SqlDependency缓存数据库表小案例
SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...
JavaScript apply函数小案例
//回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...
Session小案例------完成用户登录
Session小案例------完成用户登录在项目开发中,用户登陆功能再平常只是啦,当用户完毕username和password校验后.进入主界面,须要在主界面中显示用户的信息,此时用ses ...
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 ...

随机推荐

iOS 界面布局
1. auto layout http://www.devtalking.com/articles/adaptive-layout-for-iphone6-1/ http://blog.sina.co ...
Android Studio设置字体
一,点"Settings"按钮,调出配置界面: 然后如图找到 Editor-colors&font-font ,默认的不让修改所以先点击save as 随便起个名字 , ...
[Flex] 组件Tree系列 —— 打开和关闭节点
mxm: <?xml version="1.0" encoding="utf-8"?>  < ...
如何在CentOS 7上使用vsftpd(FTP)的配置文件介绍
vsftpd.conf - vsftpd的配置文件. 描述 vsftpd.conf可用于控制vsftpd行为的各个方面. 默认情况下,vsftpd在/etc/vsftpd.conf位置查找此文件. 但 ...
mysql常用日期、时间查询
好记性不如烂笔头 select curdate(); --获取当前日期 select last_day(curdate()); --获取本月最后一天. day); -- 获取本月第一天 ,interv ...
初学struts2框架
昨天初学strts2,折腾了一晚上才正好一个简单的应用程序,在这个过程中遇到了很多的问题. 1. struts2的更新太快,所以从图书馆借的书常常会跟不上变化,所以有时执行起来会很麻烦. 2. 如果你 ...
STM32-RS485通信软硬件实现
OS:Windows 64 Development kit:MDK5.14 IDE:UV4 MCU:STM32F103C8T6/VET6 AD:Altium Designer 18.0.12 1.RS ...
knova绘制矩形
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
JQ 文件上传
var formData = new FormData(); var name = $("input").val(); formData.append("file&quo ...
session_destroy()和session_unset()的理解
session_destroy 是注销所有的session变量,并且结束session会话目前是删除当前用户对应的session文件以及释放session id值 ,但是但是内存中的$_SESSIO ...

第8天：javascriptDOM小 案例、onmouseover 、onmouseout

案例

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

点击按钮显示、隐藏图片

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

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

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

点击按钮修改文本框的值

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

点击按钮修改按钮的属性

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

16按钮中点击自身值改变

鼠标移入变色 移出正常

隔行变色

鼠标移入移出案例2

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

随机推荐

热门专题

第8天：javascriptDOM小案例、onmouseover 、onmouseout

鼠标移入变色移出正常

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