Web API 事件基础 + Time

最新推荐文章于 2022-04-02 10:45:27 发布

鲸渔要加油

最新推荐文章于 2022-04-02 10:45:27 发布

阅读量93

点赞数

分类专栏：基础学习文章标签： javascript js

本文链接：https://blog.csdn.net/qq_53283188/article/details/115362747

版权

基础学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

一、Web API

API就是接口，别人帮你写好了，你拿着用就行
Web API就是浏览器API，实现浏览器交互效果

二、DOM

DOM ：文档对象模型
在这里插入图片描述

文档： 一个页面就是一个文档，DOM中使用document表示
元素： 网页中的所有标签都是元素节点，简称元素，使用element表示
节点： 网页中的所有内容都是节点（标签、属性、文本、注释等），使用node表示
DOM把以上内容都可以看做是对象

三、获取元素

3.1 根据ID获取（一个标签）

document.getElementById('')

3.2 根据标签名获取元素（多个标签）

document.getElementsByTagName('');
返回获取元素对象的集合，以伪数组形式储存，是动态的
不管几个元素或者没有，都返回的伪数组，没有就是空伪数组

3.3 H5新增获取元素方式

document.getElementsByClassName('类名');
根据类名返回多个对象，伪数组
document.querySelector('选择器');
返回第一个元素
document.querySelectorAll('选择器');
返回所有元素对象，伪数组

注意：document.querySelector和document.querySelectorAll里面的选择器需要加符号('.box')('#nav')('li')

3.4 获取特殊元素（body，html）

document.body; 返回body元素对象
document.documentElement; 返回html元素对象

四、事件基础

可以理解为触发条件
比如按下按钮弹出一个窗

4.1 事件三要素

事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

<button id="btn">鲸渔</button>
<script>
    // 1.事件源
    var btn = document.getElementById('btn');
    // 2.事件类型 就是触发条件
    // 比如鼠标点击，鼠标经过，键盘按下
    // 3.事件处理程序 就是做什么
    btn.onclick = function() {
        alert('远近渔');
    }
</script>

4.2 执行事件的步骤

<div>鲸渔</div>
<script>
    // 1.获取事件源
    var div = document.querySelector('div');
    // 2.绑定事件
    // div.onclick
    // 3.添加事件处理程序
    div.onclick = function() {
        console.log('远近渔');
    }
</script>

4.3 常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发

五、操作元素

5.1 改变元素内容（获取或设置）

.innerText
会去除html标签，去掉空格和换行
.innerHTML
包括html标签，保留空格和换行
里面可以使用html标签

<button>鲸渔</button>
<div>远近渔</div>
<p>123</p>
<script>
    // 1.获取元素
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    // 2.注册事件
    // 3.添加事件处理程序
    btn.onclick = function () {
        div.innerText = getDate();
    }
    
    function getDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = arr[date.getDay()];
        var h = date.getHours();
        h = h < 10 ? '0' + h : h;
        var m = date.getMinutes();
        m = m < 10 ? '0' + m : m;
        var s = date.getSeconds();
        s = s < 10 ? '0' + s : s;
        return year + '年' + month + '月' + dates + '日' + day + h + '时' + m + '分' + s + '秒';
    }
    var p = document.querySelector('p');
    p.innerText = getDate(); // 可以不添加事件，直接显示
</script>

5.2 常用元素的属性操作

<body>
    <button id="nq">男枪</button>
    <button id="abm">奥巴马</button>
    <img src="../imggg/lxa.jpg" alt="" title="奥巴马">
    <script>
        // 1.获取元素
        var nq = document.getElementById('nq');
        var abm = document.getElementById('abm');
        var img = document.querySelector('img');
        // 2.注册事件
        // 3.处理程序
        nq.onclick = function() {
            img.src = '../imggg/nanqiang.jpg';
            img.title = '男枪';
        }
        abm.onclick = function() {
            img.src = '../imggg/lxa.jpg';
            img.title = '奥巴马';
        }
    </script>
</body>

🐋鲸渔Time🐱‍👤

密码文本切换

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 600px;
            height: 30px;
            margin: 100px auto;
            border: 3px solid skyblue;
        }

        img {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 20px;
            height: 20px;
        }

        input {
            width: 550px;
            height: 28px;
            outline: none;
            border: 0;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <div>
        <input type="password" name="" id="" placeholder="远近渔太好看啦">
        <img src="../imggg/元气森林.jpg" alt="">
    </div>
    <script>
        var ipt = document.querySelector('input');
        var img = document.querySelector('img');
        var flag = 1;
        img.onclick = function() {
            if (flag) {
                ipt.type = 'text';
                this.src = '../imggg/傻笑.jpg';
                flag = 0;
            } else {
                ipt.type = 'password';
                this.src = '../imggg/元气森林.jpg';
                flag = 1;
            }
        }
    </script>
</body>

淘宝隐藏

<script>
    var b1 = document.querySelector('.box1');
    var b2 = document.querySelector('.box2');
    var flag = 1;
    b1.onclick = function () {
        if (flag) {
            b2.style.display = 'none';
            flag = 0;
        } else {
            b2.style.display = 'block';
            flag = 1;
        }
    }
</script>

精灵图

<script>
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        var a = i * 44;
        lis[i].style.backgroundPosition = '0 -' + a +'px';
    }
</script>

表单焦点获得失去显示文字

<input type="text" name="" id="" value="远近渔">
<script>
    var ipt = document.querySelector('input');
    ipt.onfocus = function () {
        if (this.value === '远近渔') {
            this.value = '';
        }
    }
    ipt.onblur = function () {
        if (this.value === '') {
            this.value = '远近渔';
        }
    }
</script>

修改多样式时候用element.className = '类名'

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
        .change {
            width: 300px;
            height: 300px;
            background-color: turquoise;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var div = document.querySelector('.box');
        div.onclick = function() {
            this.className = 'box change';
        }
    </script>
</body>