JavaScript 基本知识2-阿里云开发者社区

定时器：每间隔一段时间修改一下文本内容

间隔定时器
延时定时器，执行一次
定时器有返回值，表示是哪个定时器
// 间隔

var timer1 = setInterval(function(){

// to do

}, 1000); // 1秒执行一次

// 延时

var timer2 = setTimeout(function(){

// to do

}, 1000); // 1秒后执行

// 关闭定时器，都可以互相关闭

clearInterval(timer1);

cleatTimeout(timer2);

DOM Document Object Model 一套操作文档流相关内容的属性和方法

常用五种方式
// 根据id名称获取返回这个元素或者null

var element = document.getElementById(’’);

// 根据class名称获取返回这些元素的伪数组

var element = document.getElementsByClassName(’’);

// 根据tag名称获取返回这些元素的伪数组

var element = document.getElementsByTagName(’’);

// 根据选择器称获取返回符合规则的第一个元素或 null

var element = document.querySelector(’’);

// 根据选择器称获取返回符合规则的所有元素或伪数组

var element = document.querySelectorAll(’’);

操作元素内容

// 文本内容：获取、设置

var text = element.innerText;

element.innerText = “new text”;

// 超文本内容：设置是给元素添加新的标签，并可以渲染出来

var text = element.innerHTML;

element.innerHTML = “new text”;

文本内容

修改内容

DOM 节点操作：创建、插入、删除、替换、克隆节点

// 创建标签
var tag = document.createElement('tag name');
// 插入标签
var fatherTag = document.querySelector('div');
fatherTag.appendChild(tag);  // 插入标签，放在末尾
fatherTag.insertBefore(tag, signTag);  // 插在fatherTag内部，signTag之前
// 删除节点
fatherTag.removeChild(tag);
tag.remove();
// 替换节点
fatherTag.replaceChild(tag, signTag);  // tag替换signTag
// 克隆节点，参数为 是否克隆后代子节点
var tag_clone = tag.cloneNode(false);

获取元素尺寸：元素的宽高

// 获取：内容+padding+border
var height = element.offsetHeight();
var width = element.offsetWidth();
// 获取：内容+padding
var height = element.clientHeight();
var width = element.clientWidth();

回到顶部功能

滚动条滚动超过临界点，顶部通栏显示，否则隐藏滚动条滚动超过临界点，回
到顶部按钮显示，否则隐藏
点击回到顶部按钮，滚动条滚动回到顶部

布局结构:

需要一个顶部通栏标签和一个回到顶部按钮标签
让页面超过浏览器可视窗口高度
设置顶部通栏样式，默认是在超出页面的
设置回到顶部按钮样式，默认是在隐藏的

代码逻辑:

给浏览器绑定滚动事件，实时获取浏览器卷去的高度
判断卷去的高度决定隐藏还是显示
给回到顶部按钮绑定点击事件

多项CheckBox选择卡全选功能

确认需求:

全选按钮点击的时候,根据自身状态决定所有选项按钮状态
点击每一一个选项按钮的时候,根据所有选项按钮状态决定全选按钮状态

选项卡：控制不同叠层的显示与隐藏

点击哪-一个按钮，其他按钮全部回归原始，当前高亮
点击哪一个按钮，其他盒子全部隐藏，当前索弓对应盒子显示

布局结构:

三个表示按钮的盒子，横向排列，初始一个高亮

三个显示内容的的盒子，在同一位置不同层级排列，初始一个显示

动态渲染

<!DOCTYPE html>
<html lang="en">
<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>
        /* 清除样式 */
        * {
            margin: 0;
            padding: 0;
        }
        table {
            width: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 准备一个地方 -->
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <!-- JS 渲染 -->
        </tbody>
    </table>
    <!-- 控制逻辑 -->
    <script>
        // data
        var users = [
            {id: 1, name: 'first', age: 18},
            {id: 2, name: 'second', age: 19},
            {id: 3, name: 'third', age: 20}
        ];
        var tbody = document.querySelector('tbody');
        users.forEach(function (item) {
            var tr = document.createElement('tr');
            for (var key in item) {
                var td = document.createElement('td');
                td.innerHTML = item[key];
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        })
    </script>
</body>
</html>

事件绑定的三要素

事件源:和谁做好约定
事件类型:约定一个什么行为
事件处理函数: 当用户触发该行为的时候，执行什么代码

语法: 事件源. on事件类型 = 事件处理函数

事件类型：

事件对象：管理事件信息的数据结构

在绑定事件的时候，在事件函数中用一个变量来接收就可以，浏览器会自动传给这个变量
div.onclick = function(e){}，这是e就是事件对象

事件常用信息：

鼠标事件

offsetX与offsetY，是控件的坐标
clientX与clientY，是可视窗口的坐标
pageX与pageY，是文档页面的坐标

键盘事件

通过e.keyCode获取按下的按键

事件传播：浏览器响应事件机制

当我们点击了inner时（这个inner，可以叫目标），最先知道的是window，依次向内传播给inner（这个过程叫捕获阶段），之后再依次向外传播给window（这个过程叫冒泡阶段）

默认触发事件都是在冒泡阶段！

阻止事件传播：e.stopPropagation()

事件委托：利用事件冒泡机制，将自己的事件委托给结构父级中的某一层；同时利用事件的target属性来判别是那个对象：e.target.tagName == "DIV"，比较是使用大写标签名

鼠标跟随：一个标记一直跟着鼠标走

<!DOCTYPE html>
<html lang="en">
<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>
        /* 清除样式 */
        * {
            margin: 0;
            padding: 0;
        }
        .sign {
            width: 50px;
            height: 50px;
            background-color: red;
            position: fixed;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <!-- 准备一个地方 -->
    <div class="sign"></div>
    <!-- 控制逻辑 -->
    <script>
        var divSign = document.querySelector('.sign');
        // 给 document 绑定一个鼠标移动事件
        document.onmousemove = function (e) {
            var x = e.clientX;
            var y = e.clientY;
            divSign.style.left = x + 'px';
            divSign.style.top = y + 'px';
        }
    </script>
</body>
</html>

轮播图

<!DOCTYPE html>
<html lang="en">
<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>
        /* 清除样式 */
        * {
            margin: 0;
            padding: 0;
        }
        ul, ol, li {
            list-style: none;
        }
        image {
            width: 100%;
            height: 100%;
            display: block;
        }
        .banner {
            width: 100%;
            height: 500px;
            position: relative;
            margin: 50px 0;
        }
        /* 图片 */
        .banner > ul {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .banner > ul > li {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            /* 默认都是不显示 */
            opacity: 0;
            /* 变化效果 */
            transition: opacity .5s linear;
        }
        .banner > ul > li.active {
            /* 默认显示一个 */
            opacity: 1;
        }
        /* 设置焦点区域 */
        .banner > ol {
            width: 200px;
            height: 30px;
            position: absolute;
            left: 30px;
            bottom: 30px;
            background-color: rgba(0, 0, 0, .5);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-radius: 15px;
        }
        .banner > ol > li {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
        }
        .banner > ol > li.active {
            background-color: orange;
        }
        /* 左右按钮 */
        .banner > div{
            width: 40px;
            height: 60px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, .5);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            color: #fff;
        }
        .banner > div.left {
            left: 0;
        }
        .banner > div.right {
            right: 0;
        }
    </style>
</head>
<body>
    <div class="banner">
        <!-- 图片区域 -->
        <ul class="imgBox">
            <li class="active"><img src="./imgs/01.jpg" alt=""></li>
            <li><img src="./imgs/02.jpg" alt=""></li>
            <li><img src="./imgs/03.jpg" alt=""></li>
            <li><img src="./imgs/04.jpg" alt=""></li>
        </ul>
        <!-- 焦点区域 -->
        <ol>
            <li data-i="0" data-name="point" class="active"></li>
            <li data-i="1" data-name="point"></li>
            <li data-i="2" data-name="point"></li>
            <li data-i="3" data-name="point"></li>
        </ol>
        <!-- 左右切换按钮 -->
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>
    <!-- 控制逻辑 -->
    <script>
        // 获取图片和焦点
        var imgs = document.querySelectorAll('ul > li');
        console.log(imgs)
        var points = document.querySelectorAll('ol > li');
        console.log(points)
        // 当前第几张
        var index = 0;
        // 切换函数: ture/false 切换上下；数字时切换到指定章
        function changeOne(type) {
            imgs[index].className = '';
            points[index].className = '';
            // 根据参数确定index值
            if (type === true) {
                index++;
            } else if (type === false) {
                index--;
            } else {
                index = type;
            }
            // 确定index边界
            if (index >= imgs.length) {
                index = 0;
            }
            if (index < 0) {
                index = imgs.length - 1;
            }
            // 切换
            imgs[index].className = 'active';
            points[index].className = 'active';
        }
        // 委托事件
        var banner = document.querySelector('.banner');
        banner.onclick = function (e) {
            if (e.target.className === 'left') {
                changeOne(false);
                console.log('left')
            }
            if (e.target.className === 'right') {
                changeOne(true);
                console.log('right')
            }
            if (e.target.dataset.name === 'point') {
                var i = e.target.dataset.i - 0;
                changeOne(i);
                console.log('here')
            }
        }
        // 自动切换
        setInterval(function () {
            changeOne(true);
        }, 3000);
    </script>
</body>
</html>

vs内常用快捷键

按css选择器，输入字符，然后回车，对生成对应div标签
输入ul>li*3{$}接回车，可以生成，表格和表格项
ul.imgBox>li*4>img[src=./imgs/0$.jpg]

JavaScript 基本知识2

定时器：每间隔一段时间修改一下文本内容

DOM 节点操作：创建、插入、删除、替换、克隆节点

回到顶部功能

多项CheckBox选择卡全选功能

选项卡：控制不同叠层的显示与隐藏

动态渲染

事件绑定的三要素

鼠标跟随：一个标记一直跟着鼠标走

轮播图

vs内常用快捷键

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript 基本知识2

定时器：每间隔一段时间修改一下文本内容

DOM 节点操作：创建、插入、删除、替换、克隆节点

回到顶部功能

多项CheckBox选择卡全选功能

选项卡：控制不同叠层的显示与隐藏

动态渲染

事件绑定的三要素

鼠标跟随：一个标记一直跟着鼠标走

轮播图

vs内常用快捷键

热门文章

最新文章

相关课程

相关电子书

相关实验场景