第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 ...

随机推荐

部署网络存储ISCSI
1.什么是ISCSIInternet Small Computer System Interface 互联网小型计算机接口技术,是一种将SCS存储与以太网技术相结合,可以用来在互联网中传输SCSI接口 ...
Java : java.util.ConcurrentModificationException
在删除 List 元素的时候,要用 Iterator,不要直接遍历 List,否则会出现 Fatal Exception: java.util.ConcurrentModificationExcept ...
iOS 错误：… is being deallocated while key value observing are still registered with it
这个错误从字面上来看就是有一个实例由于被observing而无法被释放. 具体原因可能是该对象添加了一个oberver.所以释放的时候要先取消observer. 具体方法是在 dealloc 方法中: ...
java学习笔记—c3p0连接池与元数据分析（42）
第一步:导入c3p0包第二步:在classpath目录下,创建一个c3p0-config.xml <?xml version="1.0" encoding="UT ...
【经典漏洞案例】NSA黑客工具包——Windows 0day验证实验
还记得今年4月中旬,Shadow Brokers(影子经纪人)黑客组织发布出一份震惊世界的机密文档,其中包含了多个Windows 远程漏洞利用工具,此工具集覆盖大量的Windows服务器,可以被任何 ...
[Objective-C语言教程]类别（28）
有时,可能会发现希望通过添加仅在某些情况下有用的行为来扩展现有类. 要向现有类添加此类扩展,Objective-C提供了类别和扩展. 如果需要向现有类添加方法,或许为了添加功能以便在应用程序中更容易地 ...
docker微服务部署之：一，搭建Eureka微服务项目
先说明一下docker需要搭建的微服务的基本情况: 项目情况:一个demo_parent项目,下面三个子模块:demo_eureka(eureka服务).demo_article(文章服务).demo ...
分布式系统的Raft算法学习笔记
摘取自: http://mp.weixin.qq.com/s?__biz=MzIyMTQ1NDE0MQ==&mid=2247483979&idx=1&sn=12864382e ...
数据结构基础 ---- 数组的理解和实现(Java)
什么是数组数组是由类型相同的数据元素构成的有序集合,每个元素称为数组元素,每个元素受n(n>= 1)个线性关系的约束,每个元素在n个线性关系中的序号i1, i2, ....., in称该元素的 ...
Carte作为Windows服务
有一些用例将Carte作为Windows服务运行: 当使用命令窗口运行Carte实例时,任何人都会错误地关闭实例并且Carte将关闭. Carte.bat命令窗口与调用批处理文件的用户会话相关联,需要 ...

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

案例

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

点击按钮显示、隐藏图片

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

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

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

点击按钮修改文本框的值

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

点击按钮修改按钮的属性

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

16按钮中点击自身值改变

鼠标移入变色 移出正常

隔行变色

鼠标移入移出案例2

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

随机推荐

热门专题

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

鼠标移入变色移出正常

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