WebAPI基础（一）

Jonhos

938人浏览 · 2019-01-24 00:15:14

Jonhos · 2019-01-24 00:15:14 发布

WebAPI基础（一）知识点

WebAPI

Web 网页

API 应用程序编程<接口>

WebAPI 就是浏览器提供给我们操作网页的一系列接口，我们主要学习这些接口怎么使用。

WebAPI 常见三个术语：

文档 document 网页文档，代表的是整个网页

节点 node 节点就是组成网页的每个部分，包括标签节点，属性节点，文本节点，注释节点...

元素 element 元素就是<标签节点>

查找元素(标签)

document.getElementById()

在网页文档中，通过 id获取元素

document.getElementsByTagName

在网页文档中，通过标签名获取元素s

事件

事件主要用来捕获用户操作.

事件三要素

事件源

事件类型

事件处理函数

操作元素样式

修改行内式

修改类名

网页文档

核心单词：document

控制台输出

控制台输出 document ，document 就是整个网页文档 .

console.log(document);

数据类型

document 的数据类型是 object ，在 JavaScript 中以对象的形式存储

文档以对象形式输出

document 是对象，console.dir 在控制台以对象形式输出文档，可看到文档对象的 <属性>和<方法>

console.dir(document);

查找(获取)元素

通过id名称获取元素

document.getElementById('id名称');

查找成功：
    返回元素
查找失败：
    返回 null

所有<元素>在 JavaScript 中都是<对象>的形式：

/* 通过 box01 的 id 名称在网页中查找到一个元素，保存到 box01 的变量名中 */
var box01 = document.getElementById('box01');

/* 利用 typeof 关键词检测<元素>的<数据类型> */
console.log(typeof box01);            // <object> 所有标签在JS环境中都是对象

/* 控制台输出形式1 */
console.log('console.log 控制台以《标签》形式输出，点击不可展开↓↓↓↓');
console.log(box01);

/* 控制台输出形式2 */
console.log('console.dir 控制台以《对象》形式输出，点击可展开↓↓↓↓');
console.dir(box01);

通过标签名称获取元素

document.getElementsByTagName('标签名');

查找成功：

返回伪数组集合，里面包含元素节点，可循环遍历

查找失败：

返回空的伪数组

修改样式

修改样式分为两种形式：修改行内式和修改类名

修改行内样式

style

修改类名

className

修改样式综合例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改类名</title>
    <style>
        /* 把样式全部写到类名 .myStyle 里 */
        .myStyle {
            width: 200px;
            height: 200px;
            background-color: pink;
            font-size: 100px;
        }
    </style>
</head>
<body>
<!-- 0.0 给标签 起 id 名称 -->
<input id="btn01" type="button" value="1.点击按钮设置宽高背景色">
<input id="btn02" type="button" value="2.还原回去本来的样子">
<input id="btn03" type="button" value="3.通过一个按钮一个事件实现切换样式">
<div id="box">盒子</div>
</body>
</html>
<script>

    /* 当 < 按钮 > 被 < 点击 > 时，效果是 < 改变 盒子 宽高背景色 > */

    /* 1. 查找元素 - 事件源 */
    var btn01 = document.getElementById('btn01');
    /* 如果忘记查找，在不同浏览器会有兼容问题 */
    var btn02 = document.getElementById('btn02');
    var box = document.getElementById('box');

    /* 2. 绑定事件基本结构 */
    btn01.onclick = function () {
        /* 3.0 效果写事件处理函数内部 */
        /* 3.1 通过行内式的方式修改样式，需要一行行书写 */
        // box.style.width = '200px';
        // box.style.height = '200px';
        // box.style.backgroundColor = 'pink';
        // box.style.fontSize = '40px';
        /* 3.2.1 在头部 <style> 标签内定义了 myStyle 的类名和样式 */
        /* 3.2.2 通过修改类名方式，改一个类名修改多个样式 */
        box.className = 'myStyle';

    };

    /* 点击按钮2，还原原本的样子 */
    btn02.onclick = function () {
        /* 清空类名，盒子还原回没类名前的样子 */
        box.className = '';
    };


</script>

排他思想

排他思想线上效果

轮播图小圆点排他效果

tab 栏排他效果

侧边栏排他效果

排他效果实现

排他思想分两部分

1. 排除所有     -   循环遍历
2. 确立当前        -    this 确立当前

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>排他效果</title>
</head>
<body>
<input type="button" value="美女1">
<input type="button" value="美女2">
<input type="button" value="美女3">
<input type="button" value="美女4">
<input type="button" value="美女5">
</body>
</html>
<script>
    /* 查找所有按钮元素 */
    var ipts = document.getElementsByTagName('input');

    /* 利用 for 循环给所有按钮绑定事件 */
    for (var i = 0; i < ipts.length; i++) {
        /* 给所有按钮绑定事件 */
        ipts[i].onclick = function () {
            /* 1. 排除所有 - 循环遍历 */
            for (var i = 0; i < ipts.length; i++) {
                /* 1.1 把所有按钮设置为没有颜色 */
                ipts[i].style.backgroundColor = '';
            }
            /* 2. 确立当前 - this 这个 */
            /* 2.1 用 this 关键词，把当前点击的按钮设置为 粉色 */
            this.style.backgroundColor = 'pink';
        }
    }

</script>

操作元素属性

元素属性分为标准属性和自定义属性。

元素标准属性操作

获取：
    元素.属性名
设置：重新赋值就是设置(修改)
    元素.属性名 = xxx;

特例：类名属性要写成 className

自定义属性操作

获取：
    getAttribute('属性名')
设置：
    setAttribute('属性名','修改值')
移除：
    removeAttribute('属性名')

getAttribute / setAttribute / removeAttribute 功能更强大：

可操作<自定义属性>，也可操作<标准属性>，还可<移除属性>。

练习

实现效果1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>仿苏宁注册显示密码效果</title>
</head>
<body>
<input id="pwd" type="password">
<input id="btn" type="button" value="显示密码">
</body>
</html>
<script>

    /* 当 < 按钮 > 被 < 点击 > 时，效果是 < 显示密码 > */

    /* 查找元素 */
    var pwd = document.getElementById('pwd');
    var btn = document.getElementById('btn');

    /* 绑定事件 */
    btn.onclick = function () {
        /* 获取密码框元素的 type 类型是否为 password */
        if (pwd.getAttribute('type') === 'password') {
            /* 如果是，进入分支1，type 设置为 text，显示密码 */
            pwd.setAttribute('type', 'text');
            /* 把按钮的提示文字设置成 隐藏密码 */
            btn.setAttribute('value', '隐藏密码');
        } else {
            /* 其他情况，进入分支2，type 设置为 password，隐藏密码 */
            pwd.setAttribute('type', 'password');
            /* 把按钮的提示文字设置成 显示密码 */
            btn.setAttribute('value', '显示密码');
        }
    }


</script>

实现效果2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>仿苏宁注册显示密码效果</title>
</head>
<body>
<input id="pwd" type="password">
<input id="btn" type="button" value="显示密码">
</body>
</html>
<script>

    /* 当 < 按钮 > 被 < 点击 > 时，效果是 < 显示密码 > */

    /* 查找元素 */
    var pwd = document.getElementById('pwd');
    var btn = document.getElementById('btn');

    /* 绑定事件 */
    btn.onclick = function () {
        /* 由于 type 是 输入框的标准属性，所以可以用更简便的方式实现 */
        if (pwd.type === 'password') {
            pwd.type = 'text';
            btn.value = '隐藏密码'
        } else {
            pwd.type = 'password';
            btn.value = '显示密码'
        }
    }


</script>

其他整理

WebStorm 定义代码模板

WebAPI阶段常见错误

程序出现了 bug ，先问控制台，控制台如果有报错，先看报错是什么意思。

调 bug 是一种能力，调 bug 能力强大，导致很多人害怕 bug 。

工作的时候也容易出现各种 bug，应该喜欢调 bug ，自己能力进步，写的程序才能更强大。

bug 是个宝，自己有 bug 自己调，自己没 bug 找同桌调。

Cannot set property '***' of null
// 一般是查找元素的时候查找失败

*** is not a function
// 函数名称书写错误，请检查函数名的单词

CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

Kaldi之父，IEEE Fellow，小米首席语音科学家Daniel Povey将出席2024全球机器学习技术大会并发表演讲！

CSDN学习社区

cover

探索神经网络在商品销售和图像识别中的应用

CSDN学习社区

cover

基于stm32F103的座面声控台灯

CSDN学习社区

所有评论(0)

查看更多评论

Jonhos

@weixin_39277183

已为社区贡献1条内容