前端学习日志-day21

最新推荐文章于 2025-09-13 15:21:55 发布

薯条汉堡狗

最新推荐文章于 2025-09-13 15:21:55 发布

阅读量912

点赞数 20

CC 4.0 BY-SA版权

分类专栏： javascript 前端 HTML5 文章标签：学习 html5 javascript 前端

本文链接：https://blog.csdn.net/ideal_755/article/details/151588284

前端同时被 3 个专栏收录

20 篇文章

订阅专栏

HTML5

20 篇文章

订阅专栏

javascript

6 篇文章

订阅专栏

今日学习日志

一、API 与 Web API 基础

API（应用程序编程接口）：本质是提供特定功能的接口，为程序间交互提供能力。
Web API
- 由浏览器提供，用于调用浏览器功能或操作页面元素的接口，类似 “方法”。
- 具有输入（函数传参）和输出（返回值），形态多为方法或函数。
Web APIs：因浏览器提供的此类接口数量众多，故加 “s” 表示复数集合。

二、DOM（文档对象模型）核心内容

（一）DOM 简介

定义：一种用于修改网页的接口，可对网页的结构、样式和内容进行操作。
DOM 树结构：将网页各部分抽象为对象，核心包含三类：
- Document：代表整个网页文档。
- Element：代表网页中的 HTML 标签（元素）。
- Node：代表网页中的内容节点（如文本、属性等）。

（二）元素获取方法

获取方式	语法	特点
通过 ID 获取	父元素对象.getElementById ('id')	无
通过标签名获取	父元素对象.getElementsByTagName ('tagname')	返回元素对象集合，以伪数组形式呈现
通过类名获取	父元素对象.getElementsByClassName ('classname')	返回元素对象集合，以伪数组形式呈现
通过单选择器获取	父元素对象.querySelector (' 选择器 ')	仅获取匹配选择器的第一个元素；类选择器用 “.”，ID 选择器用 “#”
通过多选择器获取	父元素对象.querySelectorAll (' 选择器 ')	返回所有匹配选择器的元素对象集合，以伪数组形式呈现
获取 Body 元素	document.body	直接获取 body 标签元素，返回单个对象
获取 HTML 元素	document.documentElement	直接获取 html 标签元素，返回单个对象

补充：使用console.dir(元素对象)可在控制台打印元素对象，显示其所有属性和方法。

（三）事件基础

事件概述：用户操作或浏览器行为触发的响应机制（如点击按钮弹出警示框）。

事件三元素

事件源：触发事件的元素（如被点击的按钮）。

事件类型：具体的触发行为，常见鼠标事件如下：

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

事件处理程序：事件触发后执行的操作，以函数赋值形式实现，函数内this指向事件源。

事件实现步骤：获取事件源→为事件源绑定事件类型→添加事件处理程序。

（四）元素操作方法

1. 改变元素内容

操作方式	语法	特点
innerText	Element.innerText	不识别 HTML 标签，会去除内容中的空格和换行
innerHTML	Element.innerHTML	识别 HTML 标签，保留内容中的空格和换行，实际开发中使用更频繁

2. 常用元素属性操作

可直接读写元素的核心属性，包括：

内容相关：innerText、innerHTML（同 “改变元素内容”）。
链接 / 资源相关：src（图片等资源路径）、href（链接地址）。
描述相关：title（提示文本）、alt（图片加载失败提示）、id（元素唯一标识）。

3. 表单元素属性操作

针对表单元素（如输入框、复选框等），可操作的核心属性及值：

type：表单元素类型（如 text、checkbox）。
value：输入框的输入内容。
checked：复选框 / 单选框的选中状态，值为true（选中）或false（未选中）。
selected：下拉选项的选中状态。
disabled：元素是否禁用，值为true（禁用）或false（可用）。

4. 样式属性操作

操作方式	语法	特点
行内样式操作	元素.style. 样式名 =' 属性值'	仅添加行内样式，适合少量样式修改；样式名需用驼峰命名法（如 fontSize 而非 font-size）
类名样式操作	元素.className=' 类名'	通过添加 CSS 类名修改样式，适合大量样式修改；若需保留原有类，新类名与原有类名用空格隔开（如`element.className='old-class new-class'`）

今日练习代码

作业题目

作业源码

1.用户名显示隐藏内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户名 显示隐藏内容</title>
    <style>
        input {
            color: #999;
            border: 1px solid black;
            outline: none;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" value="邮箱/ID/手机号" class="user">
    </div>
    <script>
        // 获取元素
        var user = document.querySelector('.user');
        // 注册事件 事件处理
        // 注册事件：onfocus 或 onblur 获得焦点 或 失去焦点
        // 获得焦点 表单里的内容则隐藏
        user.onfocus = function () {
            this.value = '';
            this.style.borderColor = 'pink';
        }
        // 失去焦点 表单里的值则显示
        user.onblur = function () {
            this.value = '邮箱/ID/手机号';
            this.style.borderColor = 'black';
        }
    </script>
</body>

</html>

2.关闭广告

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关闭广告</title>
    <style>
        div {
            position: relative;
            height: 400px;
            width: 400px;
            margin: 100px auto;
        }

        div img {
            width: 400px;
        }

        div i {
            position: absolute;
            top: 0;
            left: -40px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border: 1px solid black;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/tao.png" alt="">
        <i class="btn_close">x</i>
    </div>
    <script>
        // 点击x按钮，即可实现整个盒子消失
        var btn = document.querySelector('.btn_close');
        var box = document.querySelector('.box');
        btn.onclick = function () {
            box.style.display = 'none';
        }
    </script>
</body>

</html>

3.新浪下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            display: block;
            width: 150px;
            height: 30px;
            margin: 100px auto 0;
            line-height: 30px;
            text-align: center;
            color: #999;
            border: 1px solid orange;
            cursor: pointer;
        }

        .lis {
            margin-top: 10px;
            display: none;
        }

        .lis ul li {
            list-style: none;
            margin: 0 auto;
            width: 150px;
            height: 30px;
            line-height: 28px;
            text-align: center;
            color: #999;
            border: 1px solid orange
        }
    </style>
</head>

<body>
    <i class="top">微博</i>
    <div class="lis">
        <ul>
            <li>私信</li>
            <li>评论</li>
            <li>@我</li>
        </ul>
    </div>
    <script>
        // 点击top就显示下面的菜单lis，再点击则隐藏菜单
        var top = document.querySelector('.top');
        var lis = document.querySelector('.lis');
        var flag = true;
        top.onclick = function () {
            if (flag == true) {
                lis.style.display = 'block';
                flag = false;
            }
            else {
                lis.style.display = 'none';
                flag = true;
            }
        }
    </script>

</body>

</html>

4.开关灯案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开关灯案例</title>
    <style>
        body {
            background-color: white;
        }
    </style>
</head>

<body>
    <button>开关灯</button>
    <script>
        //点击按钮，body背景颜色变成黑色，再点变成白色
        var btn = document.querySelector('button');
        var body = document.body;
        var flag = 'b';
        btn.onclick = function () {
            if (flag == 'b') {
                body.style.backgroundColor = 'black';
                flag = 'w';
            }
            else {
                body.style.backgroundColor = 'white';
                flag = 'b';
            }
        }
    </script>
</body>

</html>