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

随机推荐

Linux程序设计：目录维护
一.相关系统调用 1.1 chmod 改变访问权限. #include <sys/stat.h> int chmod(const char *path, mode_t mode) 1.2 ...
Problem H: 小姐姐的QQ号（DFS）
Contest - 河南省多校连萌(四) Problem H: 小姐姐的QQ号 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 297 Solved: ...
jQuery表单2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Get 和 Post 方法的选择和URL的设计
原文链接:http://yifei.me/note/540 HTTP 中常用的方法有 GET/POST/PUT/DELETE 等,在设计API或者表单的时候我们需要选择合适的方法.一般有两种方案: 只 ...
Generating an arbitrary digit password dictionary
原理说明:以增量方式从开始到结束! 实现方法:CMD命令特点:纯数字语法: FOR /L %variable IN (start,step,end) DO command [command-par ...
基于datax的数据同步平台
一.需求由于公司各个部门对业务数据的需求,比如进行数据分析.报表展示等等,且公司没有相应的系统.数据仓库满足这些需求,最原始的办法就是把数据提取出来生成excel表发给各个部门,这个功能已经由脚本转 ...
Python的垃圾回收机制以及引用计数
Python中的计数引用在Python中,由于Python一门动态的语言,内部采用的指针形式对数据进行标记的,并不像c/c++那样,通过指定的数据类型并分配相应的数据空间,Python中定义的变量名 ...
request.getSession(true/false)的区别
javax.servlet.http.HttpServletRequest接口有两个方法:getSession(boolean)和getSession(). 具体什么区别,跟踪源码分析下,先摆出结论: ...
kubernetes pod termination pending
在将k8s从1.7.9 升级到1.10.2 之后,发现删除pod一直处于terminating状态, 调查发现删不掉的pod都有一个特点就是pod yaml中command部分写错了,如下所示: ap ...
mono for android之文件系统与应用程序首选项(转)
Aside from persistent files, your application might need to store cache data in a file. To do that, ...

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

案例

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

点击按钮显示、隐藏图片

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

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

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

点击按钮修改文本框的值

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

点击按钮修改按钮的属性

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

16按钮中点击自身值改变

鼠标移入变色 移出正常

隔行变色

鼠标移入移出案例2

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

随机推荐

热门专题

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

鼠标移入变色移出正常

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