第七十一篇 js进阶之事件、页面操做

时间 2019-11-14

原文原文链接

目录css

1、js选择器

1.直接打印

页面id名会存放到页面的名称空间中，在js内能够直接访问该名称空间html

<body>
    <div id='d' class='box'></div>
    <input type='text' id='d' class='box' />
</body>

<script>
    console.log(d)  //会取到两个
</script>

2.getElement系列

1.getElementById(ID): 返回对指定ID的第一个对象的引用，若是在文档中查找一个特定的元素，最有效的方法是getElementById()数组

2.getElementsByName(name): 返回文档中name属性为name值的元素，由于name属性值不是惟一的，因此查询到的结果有可能返回的是一个数组，而不是一个元素app

3.getElementsByTagName(tagname): 返回文档中指定标签的元素函数

4.getElementsByClassName():返回文档中全部指定类名的元素this

3. querySelector()和querySelectorAll()

1.selector，是经过css选择器来获取，因为css没有逻辑，因此通常经过类名；经过id只能获取多个或第一个，没法获取惟一；可是咱们在书写HTML标签时，id最好不要有相同的编码

2.querySelector():返回文档中匹配指定css选择器的第一个元素code

3.querySelectorAll():返回文档中匹配指定css选择器全部符合要求的元素；不管是零个、一个仍是多个都以数组的形式返回orm

4.在querySelector()或querySelectorAll()前面加document属于全文检索，它会在整个页面中查找可以匹配的元素htm

5.在querySelector()或querySelectorAll()前面加具体的标签，它就会在这个标签内部查找符合规则的元素，咱们能够称之为父级调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js选择器</title>
</head>
<body>
    <h1 id="d" class="box">你好</h1>
    <input id="d" class="box"/>
</body>
<script>
    console.log(d)   // 能够拿到两个id相同的标签
    
    let a = document.querySelector('#d');  //只能拿到第一个id为d的标签内容
    console.log(a)
    
    let a = document.querySelectorAll('#d');  //两个均可以拿到，且以数组形式(NodeList)显示
    
    let body = document.querSelector('body');  //在文档流（整个页面）中查找
    
    let b_h1 = body.querySelector('h1');  //在父级标签内检索后代标签
</script>
</html>

2、js页面操做

1.操做页面的三步骤

1. 经过js选择器获取页面标签，并经过定义变量来接收标签内容

2.设置操做的激活条件，通常称之为事件，好比onclick | ondblclick等

3.具体的操做方式，好比对标签内容|样式|事件|文档结构的具体操做，获得最终效果的逻辑，都在这一步骤

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操做页面的三步骤</title>
</head>
<body>
    <h1>操做页面的三步骤</h1>
    <div class="box">
        <h1>box-h1</h1>
    </div>
</body>
<script>
    // 一、获取页面标签
    // 二、设置操做的激活条件 - 事件
    // 三、具体的操做方式 - 内容 | 样式 | 事件 | 文档结构

    // 1：
    let body = document.querySelector('body');
    let box = document.querySelector('.box');
    // 父级调用选择器方法，只完成本身内部的检索
    let body_h1 = body.querySelector('h1');  //找到body下的h1标签
    console.log(body_h1);
    let box_h1 = box.querySelector('h1');
    console.log(box_h1);  //找到box下的h1标签

    // 2：
    body_h1.onclick = function () {
        // console.log('单击则在控制台打印')
        
        // 3：
        if (box_h1.style.color != 'red') {
            box_h1.style.color = 'red';
            box_h1.style.backgroundColor = 'orange';
        } else {
            box_h1.style.color = 'black';
            box_h1.style.backgroundColor = 'white';
        }
    }
</script>
</html>

2.JS事件

1.js使咱们有能力建立动态页面，网页中的每个元素均可以产生某些触发JavaScript函数的事件。咱们能够认为事件是能够被JavaScript侦测到的一种行为。能够归纳为：当何时执行什么事。事件的基本结构：事件源、事件类型、执行的指令（函数）

2.使用返回值改变HTML元素的默认行为：HTML元素大都包含了本身的默认行为，例如：超连接、提交按钮等。咱们能够经过在绑定事件中加上"return false"来阻止它的默认行为

3.通用的事件监听方法：

1）绑定HTML元素属性：<标签 on+事件="js代码">。这种方法，JavaScript 代码与 HTML 代码耦合在了一块儿，不便于维护和开发，不推荐
2）绑定DOM对象属性：经过监听元素节点的某个事件，来实现事件程序驱动
3）标准DOM中的事件监听方法： [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件"); [object].removeEvent("事件类型","处理函数","冒泡事件或捕获事件");
4)DOM其实是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。能够把DOM认为是页面上数据和结构的一个树形表示，不过页面固然可能并非以这种树的方式具体实现

3.js事件的分类

1.鼠标事件

1.onclick ：单击（单击能够拆分红两个事件：按下和抬起）
2.ondblclick：双击
3.oncontextmenu：右击
4.onmouseover：悬浮
5.onmouseout：移开
6.onmouseenter：悬浮（与onmouseleave组合父级先触发）
7.onmousemove：移动
8.onmousedown：按下
9.onmouseup：抬起

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标事件</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    let box = document.querySelector('.box');
    // 单击
    box.onclick = function () {
        console.log('单击了', this)
    };
    // 双击
    box.ondblclick = function () {
        console.log('双击了')
    };
    // 右键
    box.oncontextmenu = function () {
        console.log('右键了');
        // 有些事件有系统默认动做，取消默认动做能够返回 false
        return false;
    };
    // 悬浮
    box.onmouseover = function () {
        console.log('悬浮了');
    };
    // 移开
    box.onmouseout = function () {
        console.log('移开了');
    };
    // 移动
    box.onmousemove = function () {
        console.log('移动了');
    };
    // 按下
    box.onmousedown = function () {
        console.log('按下了');
    };
    // 抬起
    box.onmouseup = function () {
        console.log('抬起了');
    };
</script>
</html>

2.文档事件

1.onload：页面加载事件（通常是对window对象）
2.onscroll：页面滚动（通常对文档流对象）
3.页面滚动中会有window.scrollY属性，它能够表示窗口滚动了多长距离

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档事件</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
    <script>
        //页面加载成功就会触发事件
        window.onload = function () {
            console.log(h1)
        }
    </script>
</head>
<body>
    <h1 id="h1">hhhhh</h1>
</body>
<script>
    let body = document.querySelector('body');
    // 页面滚动事件
    document.onscroll = function (event) {
        console.log('页面滚动中');
        // console.log(event);
        // console.log(window.scrollY);  //它的滚动距离是有频率的，就像每秒才打印一次距离，因此若是滑块了，它可能显示不了你想要的具体值，因此作判断时，用<= 或 >=来扩大范围来触发事件
        if (window.scrollY >= 500) {
            body.style.backgroundColor = 'red';
        } else {
            body.style.backgroundColor = 'white';
        }
    }
</script>
</html>

3.键盘事件

1.onkeydown：按键的按下
2.onkeyup：按键抬起

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>键盘事件</title>
</head>
<body>
    <h1>键盘事件</h1>
    <input type="text">
</body>
<script>
    let inp = document.querySelector('input');

    inp.onkeydown = function () {
        console.log('按下')
    };
    inp.onkeyup = function () {
        console.log('抬起')
    }

</script>
</html>

4.表单事件

1.onsubmit：提交

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单事件</title>
    <style>
        /*表单的内外边框*/
        input {
            border: 2px solid pink;
        }
        input:focus {
            outline: 2px solid yellow;
        }
    </style>
</head>
<body>
<form action="">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="登陆">
</form>
</body>
<script>
    let form = document.querySelector('form');
    let submit = document.querySelector('[type="submit"]');
    let usr = document.querySelector('[type="text"]');

    // 表单提交事件：表单默认也有提交数据的动做，也能够取消
    form.onsubmit = function () {
        console.log('提交了');
        return false;
    };
</script>
</html>

//点击提交，表单会有默认提交事件能够经过return false取消
<form action="">
    <input type="text" name="user">

form.onsubmit = function () {
    return false;
}

5.HTML事件

1.onfocus：任何元素或窗口获取焦点时触发
2.onblur：任何元素或窗口失去焦点时触发

选择输入框，键盘就被监控

6.事件对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件对象</title>
</head>
<body>
<input type="text" class="inp">
</body>
<script>
    inp = document.querySelector('.inp');
    inp.onkeydown= function (event) {
        console.log(event);
        // console.log(event.keyCode);

        if (event.keyCode === 13) {
            console.log('回车了')
        }
        if (event.ctrlKey && event.keyCode === 13) {
            console.log('消息发送了')
        }
    };

    document.onclick = function (event) {
        console.log(event);
        // 鼠标点击点
        console.log(event.clientX, event.clientY);
    }   
</script>
</html>

1.当一个事件被触发的时候，会建立一个事件对象（Event Object），这个对象里面包含了一些有用的属性或者方法。事件对象会做为第一个参数，传递给咱们的毁掉函数。事件对象包括不少有用的信息，好比事件触发时，鼠标在屏幕上的坐标。

2.鼠标事件：Mosesevent
3.键盘事件：keyevent
4.咱们能够在事件对象中找到各类属性，好比在键盘事件中能够找到keycode这个属性，每一个键都有本身的keycode
5.keycode:37 是左方向键的键盘编码
6.经过这些属性，咱们再结合一些逻辑，就能够实现组合键的事件，好比当事件中的ctrlkey为true，且keycode等于13时，说明ctrl键和enter键同时按下了，就能够发送消息了，这个事件在qq聊天时被使用过
7.组合键：当按下ctrl键，enter键的ctrlkey会等于true
8.event.clientX event.clientY：鼠标点击点的利用，能够防爬虫、机器人：

1）能够获取鼠标点击点位置，判断是经过点击连接来访问的网页，从而防止经过代码请求来访问网页
2）拖动时间能够判断是不是人在操做

4.js操做内容

1.更改标签内容

//先经过变量和js选择器获取标签
//inp.value能够拿到输入框的内容
//inp_value=''//改的只是定义的变量值，而不会去改变inp的属性值
//标题标签没有value属性，可是有innerText属性（只拿文本），还有innerHTML（能够拿到后代标签和文本内容）
//innerText不会解析标签，innerHTML会解析标签，并只输出文本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内容操做</title>
</head>
<body>
    <h1 class="title">标题</h1>
    <input type="text" class="title">
    <button class="btn">改标题</button>
</body>
<script>
    let h1 = document.querySelector('h1.title');
    let inp = document.querySelector('input.title');
    let btn = document.querySelector('.btn');

    // 内容操做：value | innerText | innerHTML
    btn.onclick = function () {
        // 拿到输入框的内容
        inp_value = inp.value;
        if (inp_value) {
            // inp_value = '';  // 改的只是一个内存变量
            inp.value = '';  // 清空输入框

            // 将内容赋值给h1 innerText | innerHTML
            // console.log(h1.innerText);
            // console.log(h1.innerHTML);
            // 纯文本
            // h1.innerText = inp_value;
            // 文本中的标签会被解析
            h1.innerHTML = inp_value;
        }
    }
</script>
</html>

2.样式操做

//1.单击获取标签的以前背景颜色
//注意：this.style 本质操做的是行间式，只能获取和设置行间式
//注意：在内联式和外联式中书写的样式称之为“计算后样式”
//注意：getComputedStyle只读，不能用来设置样式，设置样式须要用this.style。好比：this.style.backgroundColor="red";

//注意：this.className能够进行类名的字符串拼接，实现样式切换的操做

//getComputedStyle(this, null) //null能够填标签的伪类after/before

//2.点击修改标签的宽高背景颜色
getComputedStyle(标签, 伪类); //获得是字典（对象），key取出的值是字符串

//3.操做计算后样式，提取写好计算后

//页面刷新
//页面点击
document.onclick = function () {
//全局刷新
window.location.href = '';
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>样式操做</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .sup-box {
            /*width: 400px;*/
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            line-height: 100px;
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <!--<div class="box" style="background-color: deeppink;"></div>-->
    <div class="box">文本</div>
</body>
<script>
    let box = document.querySelector('.box');
    // 需求1：单击获取标签的以前背景颜色
    /*
    box.onclick = function () {
        // 注：this.style 本质操做的是行间式（只能获取和设置行间式）
        // bgColor = this.style.backgroundColor;
        // console.log(bgColor);

        // 注：在内联和外联中书写的样式称之为 计算后样式

        // 注：getComputedStyle 能获取计算后样式，也能获取行间式，可是只读
        // getComputedStyle(标签, 伪类).样式;
        bgColor = getComputedStyle(this, null).backgroundColor;
        console.log(bgColor);
        width = getComputedStyle(this, null).width;
        console.log(width, parseInt(width));

        // 只读，会报错
        // getComputedStyle(this, null).backgroundColor = 'rgb(255, 20, 147)';
    }
    */

    // 需求2：点击修改标签的宽高背景颜色
    /*
    box.onclick = function () {
        this.style.backgroundColor = 'orange';
        this_style = getComputedStyle(this, null);
        // console.log(parseInt(this_style.width) * 2);
        // 宽放大两倍，高缩小两倍
        this.style.width = parseInt(this_style.width) * 2 + 'px';
        this.style.height = parseInt(this_style.height) / 2 + 'px';
    }
    */
    
    // 需求：操做计算后样 - 提取写好计算后样式，经过类名将 js 与 css 创建关联
    box.onclick = function () {
        console.log(this.className);
        // this.className = 'sup-box';

        /*
        if (this.className === 'box') {
            this.className = 'sup-box';
        } else {
            this.className = 'box';
        }
        */
        // 注：有个空格：空格sup-box
        // this.className += ' sup-box';

        if (this.className === 'box') {
            this.className += ' sup-box';
        } else {
            this.className = 'box';
        }
    };
</script>
</html>

3.页面转跳

window是顶层对象，在页面任何位置均可以被访问
自我转跳
//''表明当前页面
window.location.href=''
//自我刷新
location.reload();

//跳转（在自身窗口）
window.location.href='相对路径'

//新开
window.open('相对路径'， '_blank'); //默认是新开，_self是在自身
//ctrl新开
event.ctrlkey来获取是否按着ctrl键

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面转跳</title>
</head>
<body>
    <button class="b1">自我刷新</button>
    <button class="b2">转跳到9</button>
    <button class="b3">ctrl新开转跳到9</button>
</body>
<script>
    window.owen = 'Owen';
    let b1 = window.document.querySelector('.b1');
    // 自我刷新
    b1.onclick = function () {
        // console.log(owen);

        // '' 表明当前页面连接
        // window.location.href = '';
        location.reload();
    };

    let b2 = window.document.querySelector('.b2');
    // 转跳到9*.html
    b2.onclick = function () {
        // 在自身所在标签替换
        window.location.href = '九、样式操做.html';
    };

    // ctrl新开转跳到9
    let b3 = window.document.querySelector('.b3');
    b3.onclick = function (ev) {
        // open('转跳路径', '默认就是_blank')
        if (ev.ctrlKey) {
            window.open('九、样式操做.html');
        } else {
            window.open('九、样式操做.html', '_self');
        }
    }
</script>
</html>

4.动态尺寸

//获取包含滚动条的宽度
先设置一个隐藏box，他的宽为100vw
1.屏幕有滚动条下的两种宽度
2.去除滚动条剩余的所有宽度:

let html = document.querySelector('html');
console.log(html.clientWidth);

** 3.不去除滚动条剩余的所有宽度:**

function getHtmlWidth() {
    let hidden = document.createElement('div');
    hidden.style.width = '100vw';
    html.appendChild(hidden);
    width = parseInt(getComputedStyle(hidden, null).width);
    html.removeChild(hidden);
    return width
}
width = getHtmlWidth();
console.log(width);

4.案例：动态尺寸

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态尺寸</title>
    <style>
        body {
            margin: 0;
            height: 3000px;
        }
        .box {
            /*width: 200px;*/
            /*height: 200px;*/
            /*width: 100%;*/

            background-color: orange;
            position: fixed;
            top: 0;
            left: 0;

            min-width: 900px;
            max-width: 1100px;

            width: 90%;
            margin-left: 5%;

            /*vw viewwidth  vh viewheight*/
            /*width: 90vw;*/
            /*margin-left: 5vw;*/
        }
    </style>
</head>
<body>
    <div class="hidden" style="width: 100vw"></div>
    <div class="box"></div>
</body>
<script>
    let html = document.querySelector('html');

    // 去除滚动条的宽度
    console.log(html.clientWidth);

    // 包含滚动条的宽度
    // let hidden = document.querySelector('.hidden');
    // width = parseInt(getComputedStyle(hidden, null).width);
    // console.log(width);

    function getHtmlWidth() {
        let hidden = document.createElement('div');
        hidden.style.width = '100vw';
        html.appendChild(hidden);
        width = parseInt(getComputedStyle(hidden, null).width);
        html.removeChild(hidden);
        return width
    }
    width = getHtmlWidth();
    console.log(width);



    function resizeBox() {
        box_width = parseInt(getComputedStyle(box, null).width);
        box.style.height = box_width / 6 + 'px';
        if (box_width >= 1100) {
            box.style.marginLeft = (html.clientWidth - 1100) / 2 + 'px'
        }
    }

    let box = document.querySelector('.box');
    resizeBox();

    window.onresize = function () {
        resizeBox();
    };
</script>
</html>