Javascript——现在不懂也许以后就懂了的案例1

最新推荐文章于 2025-04-01 19:08:01 发布

原创最新推荐文章于 2025-04-01 19:08:01 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

javascript

56 篇文章

订阅专栏

本文详细介绍了JavaScript中事件处理的注册与响应方法，以及如何通过DOM操作实现页面元素的动态修改，包括按钮点击事件、文本框值的更新、元素样式的调整等常见场景。

封装common.js

function my$(id){
    return document.getElementById(id);
}

<head>    
    <script>
    //先有按钮才能获取，获取之后才能注册事件
        //根据id属性的值从整个文档中获取这个元素（标签）
        var btnObj1=document.getElementById("btn1");
        //为当前这个按钮元素（对象），注册点击事件，添加事件处理函数
        btnObj1.οnclick=function(){
            alert("哦这真是太好了");
        };
    </script>
</head>
<body>
<input type="button" value="最终版" id="btn1"/>
</body>

例：点击按钮，修改p标签的显示内容
//根据id获取按钮，为按钮注册点击事件，添加事件处理函数

<input type="button" value="设置P的内容" id="btn"/>
<p id="p1">我是一个p标签</p>
<script>
    //凡是成对的标签，中间的文本内容，设置的时候，都使用innerText这个属性的方式
    //根据id获取按钮，为按钮注册点击事件，添加事件处理函数
    document.getElementById("btn").onclick=function(){
        //根据id获取p标签，设置内容
    document.getElementById("p1").innerText="这是一个p";
    };
</script>

例：点击按钮，修改多个文本框的值

<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/>
<script>
    //根据id获取按钮，注册点击事件，添加事件处理函数
    document.getElementById("btn").onclick=function(){
        //获取所有文本框
        var inputs=document.getElementByTagName("input");
        for(var i=0; i<inputs.length;i++){
            //判断这个元素是不是按钮
            if(inputs[i].type!="button"){
                inputs[i].value="改不了";
            }
        }
    };
</script>
</body>

例：点击按钮修改value属性

<script>
  var btnObj = document.getElementById("btn");
  btnObj.onclick = function(){
      //修改按钮的value属性
      this.value="我是按钮，谁咬我，我就咬谁";
      this.type="text";
      this.id="btn2";
  };
</script>

例：按钮的排他功能

<input type="button" value="五月天" id="btn"/>
<script>
    //获取所有的按钮，分别注册点击事件
    var btnObjs = document.getElementById("input");
    //循环遍历所有按钮
    for (var i = 0; i<btnObjs.length; i++){
        //为每个按钮都要注册点击事件
        for (var j = 0; j<btnObjs.length; j++){
            btnObjs[j].value="五月天";
        }
        //当前被点击的按钮设置为Mayday
        this.value="Mayday";
    };
</script>

例：点击图片修改路径

<body>
<input type="button" value="修改性别" id="btn1"/>
<input type="radio" value="1" name="sex" />男
<input type="radio" value="2" name="sex" id="rad1"/>女
<input type="radio" value="3" name="sex"/>保密
<script>
    function my$(id){
        return document.getElementById(id);
    }
    //规律：在表单标签中，如果属性和值只有一个，并且值是这个属性本身
    //那么，在写js代码，DOM操作的时候，这个属性值，是布尔类型就可以
    my$("btn1").onclick=function(){
        my$("rad1").checked=true;
    };
</script>

例：点击按钮设置div的宽，高和背景颜色

<input type="button" value="设置样式" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
    //凡是css中这个属性是多个单词的写法，在js代码中DOM操作时，把-去掉，后面单词的首字母大写即可
    //点击按钮，修改div的宽，高，背景颜色
    
    my$("btn").onclick=function(){
        my$("dv").style.width="300px";
        my$("dv").style.height="200px";
        my$("dv").style.backgroundColor="yellow";
    };
</script>

例：点击按钮显示和隐藏div

<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
    //根据id获取按钮，注册点击事件，添加事件处理函数
    my$("btn").onclick=function(){
        //判断当前点击的按钮的value属性值
        if(this.value=="隐藏"){
            my$("dv").style.display="none";//隐藏
            this.value="显示";
        }else if(this.value=="显示"){
            my$("dv").style.display="block";//显示
            this.value="隐藏";
        }
    }
</script>

例：网页开关灯

    <style>
        .cls{
            background-color: black;
        }
    </style>
</head>
<body id="bd">
<input type="button" value="开/关灯" id="btn"/>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function(){
        //获取body标签
        document.body.className = document.body.className !="cls"? "cls": "";
    };
</script>