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

时间  2019-12-09
标签 8天 javascriptdom 案例 onmouseover onmouseout 栏目 JavaScript 繁體版
原文   原文链接

案例

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

<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标签的文字的内容html

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程