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

随机推荐

python文件备份与简单操作
#!/usr/bin/python # -*- coding: utf-8 -*- # data:2018/8/30 # user:fei import sys import random num = ...
Lora通讯
Lora通讯今年放弃了电源,踏入了物联网行业,也不知道算不算放弃吧,但我内心始终在呐喊,早晚会把你拿下,现在暂且放过你! 首先普及一下物联网,物联网是21世纪兴起的行业,最开始是由比尔盖茨在1995 ...
java中集合
一. List集合: 一次只存储一个元素 1．常用的list集合是ArrayList (1)在创建这个集合的对象时, 需要指定这个集合存储的数据类型! 否则这个集合的数据是不安全的. (2)与数组的 ...
Java中关键字final用法
///首先声明,本文转载自博客园的海子,链接:http://www.cnblogs.com/dolphin0520/p/3736238.html 浅析Java中的final关键字谈到final关键字 ...
Spring aop+自定义注解统一记录用户行为日志
写在前面本文不涉及过多的Spring aop基本概念以及基本用法介绍,以实际场景使用为主. 场景我们通常有这样一个需求:打印后台接口请求的具体参数,打印接口请求的最终响应结果,以及记录哪个用户在什 ...
Python3 操作系统与路径模块(os / os.path / pathlib)
#!/usr/bin/env python # coding=utf-8 __author__ = 'Luzhuo' __date__ = '2017/5/7' import os def os_de ...
windows下vim中文乱码处理
现象:gvim安装后,打开中文utf-8编码的文件中文显示乱码处理:1.启动gvim8.0,菜单 ”编辑“->"启动设定"在文件最开始处添加如下两行set fileenco ...
C++类的构造函数及定义
定义一个普通的类时,一定要定义它自己的构造函数.原因有三:第一个原因是编译器只有在发现类不包含任何构造函数的情况下才会替我们生成一个默认的构造函数,一旦我们定义了一些其他的构造函数,那么除非我们再定义 ...
1.CentOS6.5下的基础DNS配置
常规DNS的安全和配置1.安装DNSyum -y install bind bind-utils安装后生成的文件,我们主要配置下面几个/etc/named.conf/var/named/xx这个xx是 ...
pytest文档博客链接
关于pytest的博客: https://www.cnblogs.com/yoyoketang/tag/pytest/default.html?page=2

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

案例

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

点击按钮显示、隐藏图片

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

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

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

点击按钮修改文本框的值

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

点击按钮修改按钮的属性

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

16按钮中点击自身值改变

鼠标移入变色 移出正常

隔行变色

鼠标移入移出案例2

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

随机推荐

热门专题

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

鼠标移入变色移出正常

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