zoukankan      html  css  js  c++  java

  • js DOM（一）注册事件、修改标签属性和样式

    目录：

        1.DOM的概念
        2.为元素注册事件
        3.案例：点击按钮显示图片及设置宽高
        4.案例：点击按钮设置p标签的文本内容
        5.案例：点击按钮修改超链接的地址及热点文字
        6.案例: 点击按钮设置多个p标签内容
        7.案例：点击按钮修改图片的alt和title属性
        8.案例: 点击按钮修改多个文本框的值
        9.案例：点击图片修改自身的宽高
        10.案例：按钮的排他功能
        11.案例：点小图边大图
        12.案例：点击按钮选择性别和兴趣
        13.案例：下拉选择框
        14.案例：文本域
        15.案例：点击按钮设置div的样式
        16.案例：点击按钮，显示或隐藏div
        17.案例：通过类样式class设置div样式
        18.案例：通过类样式class设置div显示或隐藏
        19.点击div改变其背景色（随机）

    1.DOM的概念    <--返回目录
        * JavaScript分三部分
            - ECMAScript标准:JS的基本语法
            - DOM：Document object Model  文档对象模型--操作页面的元素
            - BOM：Browser Object Model 浏览器对象模型--操作的是浏览器
            
        * DOM文档对象模型--操作页面元素
            - 文档document：把一个html文件看成一个文档，由于万物皆对象，所以把这个文档看成是一个对象
            - 元素element：html页面的每个标签，都是一个元素，每个元素都可以看成一个对象
            - 节点node：页面中所有的内容都是节点，标签，属性，文本
            - 属性

    2、为元素注册事件    <--返回目录
        * 事件：就是一件事，有触发、响应、事件源
            按钮被点击，弹出对话框
            按钮-->事件源
            点击-->事件名字
            被点了-->触发了
            弹框了-->响应
            
        * 点击按钮，弹出对话框，代码1：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
    <input type="button" value="弹框" onclick="alert('哈哈哈~')"/>
</body>
</html>   

        * 点击按钮，弹出对话框，代码2：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="弹框" id="btn" onclick="fun()"/>
<script type="text/javascript">
    function fun(){
        alert("嘎嘎嘎~");
    }
</script>
</body>
</html>

        * 点击按钮，弹出对话框，代码3：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="弹框" id="btn"/>
<script type="text/javascript">
    document.getElementById("btn").onclick = function(){
        alert("呵呵呵~");
    };
</script>
</body>
</html>

    3、案例：点击按钮显示图片及设置宽高    <--返回目录
    　　点击按钮显示图片, 点击按钮的时候设置img标签的src属性

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<img src="" id="imgId"/>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var ele = document.getElementById("imgId");
        ele.src="a.jpg";
        ele.width="300";//注意，img标签的width的值300没有单位px
        ele.height="280";
    };
</script>
</body>
</html>

     4、案例：点击按钮设置p标签的文本内容    <--返回目录
    　　凡是成对的标签，中间的文本内容，设置的时候，都使用innerText属性

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<p id="pId"></p>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var ele = document.getElementById("pId");
        ele.innerText="文本";
    };
</script>
</body>
</html>

    5、案例：点击按钮修改超链接的地址及热点文字    <--返回目录
    　　热点文字：即<a>热点文字</>

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<a href="" id="aId"></a>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var ele = document.getElementById("aId");
        ele.href="http://www.baidu.com";  //注意http不可以省略
        ele.innerText="百度";
    };
</script>
</body>
</html>

    6、案例:点击按钮设置多个p标签内容    <--返回目录
    　　如何获取某个div里面的所以p标签
            var eles = document.getElementById("div1Id").getElementsByTagName("p");

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="div1Id">
    <p>aaaa</p>
    <p>bbbb</p>
    <p>cccc</p>
</div>
<div id="div2Id">
    <p>aaaa</p>
    <p>bbbb</p>
    <p>cccc</p>
</div>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var eles = document.getElementById("div1Id").getElementsByTagName("p");
        for(var i=0;i<eles.length;i++){
            eles[i].innerText="p标签文本";
        }
    };
</script>
</body>
</html>

    7、案例：点击按钮修改图片的alt和title属性    <--返回目录
    　　title:鼠标悬停在图片上时显示的信息
    　　alt：图片挂了时显示的信息

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<img src="a.jpg" width="300" height="280" />
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var ele = document.getElementsByTagName("img")[0];
        ele.alt="图片挂了时的信息";
        ele.title="标题";
    };
</script>
</body>
</html>

    8、案例:点击按钮修改多个文本框的值    <--返回目录

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        var eles = document.getElementsByTagName("input");
        for(var i=0;i<eles.length;i++){
            if(eles[i].type=="text"){
                eles[i].value="文本框输入的值";
            }else if(eles[i].type=="button"){
                eles[i].value="我是个按钮";            }
        }
    };
</script>
</body>
</html>

    9、案例：点击图片修改自身的宽高    <--返回目录
    　　对绑定事件的元素自身进行修改，可以使用this

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<img src="a.jpg" width="500px"/>
<script type="text/javascript">
    var ele = document.getElementsByTagName("img")[0];
    ele.onclick=function(){
        this.width="300";//对绑定事件的元素自身进行修改，可以使用this
    };
</script>
</body>
</html>

    10、案例：按钮的排他功能    <--返回目录
    　　需求：3个按钮，按钮的默认value值是没被点，点击按钮，该按钮value值为被点了；
    　　点击另外一个按钮，该按钮value值为被点了，其他的value值变成默认值。
    　　做两件事：第一、将所有按钮value值设置为"没被点"；第二、将当前点击的按钮的value值设置为"被点了"

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" value="没被点" style="background-color: #ddd"/>
<input type="button" value="没被点" style="background-color: #ddd"/>
<input type="button" value="没被点" style="background-color: #ddd"/>
<script type="text/javascript">
    var eles = document.getElementsByTagName("input");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function(){
            //将所有按钮value值设置为"没被点"
            for(var j=0;j<eles.length;j++){
                eles[j].value="没被点";
                eles[j].style="background-color:#ddd";
            }
            this.value="被点了";//注意：这里this不能用eles[i]，因为为所有按钮注册完事件后i=3了
            this.style="background-color:red";
        };
    }
</script>
</body>
</html>

    11、案例：点小图变大图    <--返回目录
    　　 <a href="a.jpg"><img src="a-small.jpg"></a>

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<a href="a.jpg" id="aId"><img src="a-small.jpg" id="imgId"></a>
<script type="text/javascript">
    //点击图片标签，设置图片标签的src路径为超链接中大图的路径
    document.getElementById("imgId").onclick=function(){
        this.src=document.getElementById("aId").href;
        //return false;//页面url不变
    };
</script>
</body>
</html>

    12、案例：点击按钮选择性别和兴趣    <--返回目录
    　　document.getElementById().checked=true;  //被选中
    　　true可以用"checked"替换，但是浏览器也会把"checked"解析成true

    13、案例：下拉选择框    <--返回目录
    　　document.getElementById().selected=true;  //被选中

    14、案例：文本域    <--返回目录
        * disabled="disabled"
        * readonly="readonly"
        * document.getElementById().value="哈哈";//推荐使用这种方法，改变文本域内容
        * document.getElementById().innerText="呵呵";//也可以改变文本域内容

    15、案例：点击按钮设置div的样式    <--返回目录

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
<div id="divId"></div>
<script type="text/javascript">
    document.getElementById("btn").onclick=function(){
        document.getElementById("divId").style.width="200px";
        document.getElementById("divId").style.height="200px";
        //经验：css中background-color在js中写成backgroundColor
        document.getElementById("divId").style.backgroundColor="hotpink";
        //document.getElementById("divId").style="200px;height:200px;background-color:green";
    };
</script>
</body>
</html>

    16、案例：点击按钮，显示或隐藏div    <--返回目录

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
</head>
<body>
<input type="button" id="btn" value="显示" />
<div id="divId"></div>
<script type="text/javascript">
    var ele = document.getElementById("btn");
    ele.onclick=function(){
        var divEle = document.getElementById("divId");
        if(this.value=="显示"){
            divEle.style="200px;height:200px;background-color:green";
            //divEle.style.display=true;
            divEle.style.display="block";
            this.value="隐藏";
        }else if(this.value=="隐藏"){
            divEle.style.display="none";
            this.value="显示";
        }
    };
</script>
</body>
</html>

    17、案例：通过类样式class设置div样式    <--返回目录

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css">
        .cls1{
            200px;
            height: 200px;
            background-color: yellow;
        }
        .cls2{
            300px;
            height: 300px;
            background-color: hotpink;
            border:2px solid blue;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" class="cls1"></div>
<script type="text/javascript">
    var ele = document.getElementById("btn");
    ele.onclick=function(){
        document.getElementById("divId").className="cls2";
    };
</script>
</body>
</html>

    18、案例：通过类样式class设置div显示或隐藏    <--返回目录

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css">
        div{
            200px;
            height: 200px;
            background-color: yellow;
        }
        .cls{
            display: none;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="隐藏" />
<div id="divId" ></div>
<script type="text/javascript">
    var ele = document.getElementById("btn");
    var divEle = document.getElementById("divId");
    ele.onclick=function(){
        if(divEle.className != "cls"){//div为显示状态
            this.value="显示";
            divEle.className="cls";
        }else{//div为隐藏状态
            this.value="隐藏";
            divEle.className="";
        }
    };
</script>
</body>
</html>

    19.点击div改变其背景色（随机）    <--返回目录

    <!DOCTYPE html>
<html>
<head>
<title>标题</title>
<style type="text/css">
#box {
    background-color: #342;
    width: 200px;
    height: 200px;
}
</style>
</head>
<body>

    <div id="box"></div>

</body>
<script type="text/javascript">
    function getRandomStr(length) {
        if (!length) length = 1
        const strArray = ['0', '1', '2', '3', '4', '5', '6' ,'7' ,'8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        let str = ''
        for (let i = 0; i < length; i++) {
            str += strArray[parseInt(Math.random() * 16)]
        }
        return str
    }

    function randomColor(ele) {
        const color = '#' + getRandomStr(6)
        console.log(`color=${color}`)
        ele.style.backgroundColor = color
    }

    const ele = document.getElementById('box')
    ele.onclick = function() {
        randomColor(this)
    }
</script>
</html>

    ---
  • 相关阅读:
    博客园Js设置
    springboot练习笔记
    相关的其他文件
    设计模式之----代理模式
    JSP的四种范围
    io流读写及相关内容
    缓存
    gson解析json
    Android简单获得通讯录
    android服务之一 Service
  • 原文地址：https://www.cnblogs.com/xy-ouyang/p/12184763.html
Copyright © 2011-2022 走看看