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内常用快捷键

热门文章

最新文章

相关课程

相关电子书

相关实验场景