DOM02

最新推荐文章于 2024-07-11 19:43:55 发布

rcj15651130122

最新推荐文章于 2024-07-11 19:43:55 发布

阅读量31

点赞数

文章标签：数学建模 javascript 前端

本文链接：https://blog.csdn.net/rcj15651130122/article/details/130979137

版权

一、事件三要素

<body>
    <button>按钮</button>
    <script>
        /* 
        js其实就是让页面动态展示
        事件流程：鼠标触发---响应(执行)
        事件三要素：
            1.事件源(触发了谁)：触发事件的元素
            2.事件类型：click事件 mousemove等鼠标事件
            3.事件处理程序：事件触发后要执行的代码，执行函数
        */
        //获取元素
        var btn = document.querySelector('button')
        console.log(btn)
        //事件类型 通过函数赋值的方式
        btn.onclick = function(){
        //事件执行函数
            alert('我被单吃了')
            console.log('btn被点击了');
        }
    </script>
</body>

二、事件案例

<body>
    <div class="div">111</div>
    <span>222</span>
    <script>
        //获取元素
        var div = document.querySelector('.div')
        var span = document.querySelector('span')
        //绑定事件 注册事件类型
        div.onclick = function(){
            alert('谁都可以注册点击事件')
        }
        span.onclick = function(){
            alert('span也可以注册点击事件')
        }
    </script>
</body>

三、常见事件

<body>
    <div class="div">111</div>
    <br>
    <input type="text">
    <script>
        //获取元素
        var div = document.querySelector('.div')
        var input = document.querySelector('input')
        // console.dir(div)

        //onblur input框事件 input框失去焦点触发
        //onclick 鼠标点击时触发的事件
        //onchange input框事件 input内容发生改变后失去焦点就会触发
        //oninput input框事件 input内容只要发生改变就会触发
        //onfocus input框事件 只要input框获取焦点就会触发
        //onmouseleave 鼠标离开事件源触发的事件
        //onmousemove 鼠标在事件源上移动就会触发
        input.onblur = function(){
            console.log('onblur事件');
        }
        input.onchange = function(){
            console.log('onchange事件');
        }
       input.oninput = function(){
            console.log('oninput事件');
        }
       input.onfocus = function(){
            console.log('onfocus事件');
        }
       div.onmouseleave = function(){
            console.log('onmouseleave事件');
        }
       div.onmousemove = function(){
            console.log('onmousemove事件');
        }
    </script>
</body>

四、改变元素内容

1.innerText

2.innerHTML：会识别html标签(常用)

<body>
    <div >111</div>
    <br>
    <input type="text">
    <div class="div">输入的内容是:
        <span>
        123
        </span>
    </div>
    <script>
        var div = document.querySelector('.div')
        var input = document.querySelector('input')
        var span = document.querySelector('span')
            console.log(div.innerText);
            console.log(div.innerHTML);

        //点击第一个div盒子时把111变成222

        //innerText 改变元素内容 获取元素内容(只获取div里面的内容) 会去掉空格和换行 不会去识别html标签
        //innerHTML 改变元素内容 获取元素内容(会获取div里面的所有内容包括子元素) 会保留空格和换行 会识别html标签
        var flag = true
        div.onclick = function(){
            // console.log(111111);
            // 改变元素内容innerText
            if(flag){
            div.innerText = '222'
            flag= !flag
            }else{
            div.innerText = '111'
            flag= !flag   
            }
            // div.innerHTML = '222'
            console.log(div.innerText);
            console.log(div.innerHTML);
            // div.innerText='<h1>我是标题</h1>'
            // div.innerHTML='<h1>我是标题</h1>'
        }
    </script>

五、倒计时案例

<body>
    <button>倒计时</button>
    <div class="box">123</div>
    <script>
        var div = document.querySelector('.box')
        var btn = document.querySelector('button')
        btn.onclick = function(){
           div.innerHTML = getTime()
        }
        function getTime(){
        var nowTime = Date.now()
        var oldTime = +new Date('2023-11-11 00:00:00')
        var time = (oldTime - nowTime) / 1000
        var d = parseInt(time/60/60/24)>9?parseInt(time/60/60/24):'0'+parseInt(time/60/60/24)
        var h = parseInt(time/60/60%24)>9?parseInt(time/60/60%24):'0'+parseInt(time/60/60%24)
        var m = parseInt(time/60%60)>9?parseInt(time/60%60):'0'+parseInt(time/60%60)
        var s = parseInt(time%60)>9?parseInt(time%60):'0'+parseInt(time%60)
        return '距离双十一还有'+d+'天'+h+'时'+m+'分'+s+'秒'
        }
    </script>
</body>

六、通过元素属性修改元素属性

<body>
    <img src="./1.jpg" alt="" title="锦江国际">
    <input type="text">
    <script>
        var img = document.querySelector('img')
        var flag=true
        img.onclick = function(){
            //通过修改img标签的src属性进行更改图片 语法：元素对象名.属性名
            if(flag){
                img.src = './2.jpg'
                img.title = '上海外滩'
                flag=!flag
            }else{
                img.src = './1.jpg'
                img.title = '锦江国际'
                flag=!flag
            }
        }
    </script>
</body>

七、this指向问题

<body>
    <div>你好呀</div>
    <span>kaiheibu</span>
    <script>
        var div = document.querySelector('div')
        var span = document.querySelector('span')
        div.onclick = function(){
            // div.innerHTML = 'Hello'
            // this指向事件源 谁创建的事件就是指向谁
            this.innerHTML= 'Hello'
            span.innerHTML = '不开黑'
            // this.innerHTML= '不开黑'
        }

        function Get(username){
            this.uname = username
        }
        var obj = new Get('李刚')
        console.log(obj.uname);
        // console.log(new Get('李刚'));//Get {uname: '李刚'}
    </script>
</body>

八、按钮置灰

<body>
    <button>按钮</button>
    <input type="text" value="123">
    <script>
        var btn = document.querySelector('button')
        var input = document.querySelector('input')
        //置灰 禁用
        btn.onclick = function(){
            this.innerHTML='nihao'
            input.value='跳跳糖'
            //按钮置灰
            this.disabled=true
        }
    </script>
</body>