web大前端之旅Ⅸ-CSDN博客

本文链接：https://blog.csdn.net/Sodapease/article/details/128146766

slice

slice()

可以用来从数组提取指定元素
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
参数:

截取开始的位置的索引,包含开始索引
截取结束的位置的索引，不包含结束索引

第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
索引可以传递一个负值

var arr = ["one","two","three","four","five"];
var result = arr.slice(1,3);
console.log(result);

在这里插入图片描述

splice()

该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

第一个参数：表示开始位置的索引
第二个参数：表示要删除的元素数量
第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

var arr = ["one","two","three","four","five"];
var result = arr.splice(0,2,"six","seven");
console.log(arr);
console.log(result);

在这里插入图片描述

var arr = [1,2,3,2,1,2,3,4,2,5];
for(var i = 0;i < arr.length;i ++){
    for(var j = i + 1;j < arr.length;j++){
        if(arr[i]==arr[j]){
            arr.splice(j,1);
            j--;
        }
    }
}
console.log(arr);

在这里插入图片描述

concat()

该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响

var arr = ["one","two","three"];
var arr2 = ["four","five","six"];
var result = arr.concat(arr2);
console.log(result);

在这里插入图片描述

join()

该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用，作为连接符

var arr = ["one","two","three"];
// var arr2 = ["four","five","six"];
var result = arr.join("-");
console.log(result);

在这里插入图片描述

reverse()

该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组

var arr = ["one","two","three"];
arr.reverse();
console.log(arr);

在这里插入图片描述

sort()

该方法可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序

var arr = ["c","a","b"];
arr.sort();
console.log(arr);

在这里插入图片描述

我们可以在sort()中添加一个回调函数，来指定排序规则，

回调函数中需要定义两个形参
浏览器将会分别使用数组中的元素作为实参去调用回调函数

使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边。浏览器会根据回调函数的返回值来决定元素的顺序
如果返回一个大于0的值，则元素会交换位首

arr = [5,4,2,1,3,6,8,7];
arr.sort(function(a,b){
    // if(a > b){
    //     return -1;
    // }else if(a < b){
    //     return 1;
    // }else{
    //     return 0;
    // }
    // return b-a;
    return a - b;

})
console.log(arr);

在这里插入图片描述

函数的方法

函数对象的方法

call()和apply()

call()和apply()这两个方法都是函数对象的方法，需要通过函数对象来调用，当对函数调用call()和apply()都会调用函数执行，在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this

call()方法可以将实参在对象之后依次传递
apply()方法需要将实参封装到一个数组中统一传递

function fun(){
    alert("666");
}
/* fun.call();
fun.apply();
fun(); */

在这里插入图片描述

function fun(a,b){
    console.log("a = "+a);
    console.log("b = "+b);
}

var obj ={
    name:"obj",
    sayName:function(){
        alert(this.name);
    }
};
fun.call(obj,2,3);

在这里插入图片描述

function fun(a,b){
    console.log("a = "+a);
    console.log("b = "+b);
}

var obj ={
    name:"obj",
    sayName:function(){
        alert(this.name);
    }
};
fun.apply(obj,[2,3]);

在这里插入图片描述

this的情况:

以函数形式调用时，this永远都是window
以方法的形式调用时，this是调用方法的对象
以构造函数的形式调用时，this是新创建的那个对象
使用call和apply调用时，this是指定的那个对象

arguments

在调用函数时，浏览器每次都会传递进两个隐含的参数：

函数的上下文对象： this
封装实参的对象： arguments

arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度
在调用函数时，我们所传递的实参都会在arguments中保存，比如
arguments.length 可以用来获取实参的长度
我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦，例如：

arguments[0]：表示第一个实参
arguments[1]：表示第二个实参
以此类推

function fun(a,b){
   console.log(arguments.length);
}
fun(1,2);

arguments里边有一个属性叫做callee,
这个属性对应一个函数对象，就是当前正在指向的函数的对象

function fun(a,b){
   console.log(arguments.length);
   console.log(arguments.callee);
}
fun(1,2);

在这里插入图片描述

Date对象

在JS中使用Date对象来表示一个时间
如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间。

//创建一个Date对象
//如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
var d = new Date();
//创建一个指定的时间对象
//需要在构造函数中传递一个表示时间的字符串作为参数
//日期的格式 月份/日/年时:分:秒
var d2 = new Date("12/03/2022 12:03:00");

getDate()

获取当前日期对象是几日

getDay()
获取当前日期对象是周几

getMonth()
获取当前日期对象是几月

var d2 = new Date("12/03/2022 12:03:00");
var d = new Date();
var date = d2.getDate();
var day = d.getDate();
var month = d.getMonth();
var year = d.getFullYear();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var millisesecond = d.getMilliseconds();
console.log("date = "+date);
console.log("day = "+day);
console.log("Month = "+month);
console.log("Year = "+year);
console.log("hour = "+hour);
console.log("minute = "+minute);
console.log("second = "+second);
console.log("millisesecond = "+millisesecond);

在这里插入图片描述

getime()

获取当前日期对象的时间戳

时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒到当前日期所花费的毫秒数(1秒=1000毫秒)

计算机底层在保存时间时使用都是时间戳

var d2 = new Date("12/03/2022 12:03:00");
var d = new Date();
var time = d2.getTime();
console.log(time/1000/60/60/2);

在这里插入图片描述

var start = Date.now();
for(var i = 0;i < 100;i++){
    console.log(i);
}
var end = Date.now();
console.log("共执行了"+(end - start)+"毫秒");

在这里插入图片描述

Math

封装了数学运算相关的属性和方法

圆周率

console.log("PI = " + Math.PI);

自然对数

console.log("E  = " + Math.E);

绝对值

console.log(Math.abs(-1));

向上取整

console.log(Math.ceil(1.3));

向下取整

console.log(Math.round(1.5));

随机数

Math.random()

生成一个0-x之间的随机数

Math.round(Math.random()*x)

生成一个x-y之间的随机数

Math.round(Math.random()*(y-x)+x)

返回x的y次幂

console.log(Math.pow(5, 3));

返回x的平方根

console.log(Math.sqrt(16));

包装类

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

1.String()：可以将基本数据类型字符串转换为String对象

2.Number()：可以将基本数据类型的数字转换为Number对象

3.Boolean()：可以将基本数据类型的布尔值转换为Boolean对象

方法和属性只能添加给对象，不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时
浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法

字符串的方法

在底层字符串是以字符数组形式保存的

length可以用来获取字符串的长度

var str = "Hello,JavaScript.";
console.log(str.length);

在这里插入图片描述

charAt()方法可以根据索引获取指定位置的字符

var str = "Hello,JavaScript.";
console.log(str.charAt(2));

在这里插入图片描述

charCodeAt()方法获取指定位置字符的字符编码（Unicode编码）

var str = "Hello,JavaScript.";
console.log(str.charCodeAt(2));

在这里插入图片描述

fromCharCode()方法可以根据字符编码去获取字符

console.log(String.fromCharCode(73));

在这里插入图片描述

concat()方法可以用来连接两个或多个字符串

var str = "Hello,JavaScript.";
console.log(str.concat("code.","coding"));

在这里插入图片描述

indexof()方法可以检索一个字符串中是否含有指定内容，如果字符串中含有该内容，则会返回其第一次出现的索引，如果没有找到指定的内容，则返回-1，可以指定一个第二个参数，指定开始查找的位置

var str = "Hello,JavaScript.";
console.log(str.indexOf("a"));

在这里插入图片描述

lastIndexOf()方法的用法和indexOf()一样，不同的是indexOf是从前往后找，而lastIndexOf是从后往前找，也可以指定开始查找的位置

var str = "Hello,JavaScript.";
console.log(str.lastIndexOf("a"));

在这里插入图片描述

slice()可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到内容返回

参数：

第一个参数：开始位置的索引（包括开始位置）
第二个参数：结束位置的索引（不包括结束位置），如果省略第二个参数，则会截取到后边所有的

var str = "Hello,JavaScript.";
console.log(str.slice(6,10));

在这里插入图片描述

substring()可以用来截取一个字符串，它和slice()类似

参数：

第一个参数：开始截取位置的索引（包括开始位置）
第二个参数：结束位置的索引（不包括结束位置），如果省略第二个参数，则会截取到后边所有的
负值默认是0，且自动调整参数位置

var str = "Hello,JavaScript.";
console.log(str.substring(6,10));

在这里插入图片描述

substr()方法用来截取字符串

var str = "Hello,JavaScript.";
console.log(str.substr(6,10));

在这里插入图片描述

split()该方法可以将一个字符串拆分为一个数组，需要一个字符串作为参数，将会根据该字符串去拆分数组

var str = "Hello,JavaScript.";
console.log(str.split(","));

在这里插入图片描述

toUpperCase()将一个字符串转换为大写并返回

var str = "Hello,JavaScript.";
console.log(str.toUpperCase());

在这里插入图片描述

toLowerCase()将一个字符串转换为小写并返回

var str = "Hello,JavaScript.";
console.log(str.toLowerCase());

在这里插入图片描述

正则表达式

创建正则表达式的对象

语法：

var 变量名 = new RegExp("正则表达式","匹配模式");

正则表达式的方法:
test()

使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，
如果符合则返回true，否则返回false

var reg = new RegExp("a");
var str = "a";
var result = reg.test(str);
console.log(reg.test("Abcdb"));

在这里插入图片描述

匹配模式：

i：忽略大小写
g：全局匹配模式
ig：忽略大小写且全局匹配模式

字面量创建

语法：

var 变量名 = /正则表达式/匹配模式;

使用字面量创建更加简单
使用构造函数创建更加灵活

创建一个正则表达式判断是否含有该字母

var reg = new RegExp();
// reg = /d|g/;//含b或g
reg = /[d|g]/;
reg = /[^cd]/;//除了cd
console.log(reg.test("Abcdb"));

在这里插入图片描述

正则方法

split()方法可以将一个字符串拆分为一个数组，方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串，这个方法即使不指定全局匹配，也会全都插分

var str = "1a2b3c4d5e6f7";
var result = str.split(/[A-z]/);
console.log(result);

在这里插入图片描述

search()方法可以搜索字符串中是否含有指定内容，如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1

var str = "hello abc hello aec afc";
var result = str.search(/a[bef]c/);
//搜索字符串中是否含有abc aec afc
console.log(result);

在这里插入图片描述

match()方法可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认情况下我们的match()只会找到第一个符合要求的内容，找到以后就停止检索

我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，可以为一个正则表达式设置多个匹配模式，且顺序无所谓

var str = "1a2b3c4d5e6f7A8B9C";
var result = str.match(/[a-z]/ig);
console.log(result);

在这里插入图片描述

replace()方法可以将字符串中指定内容替换为新的内容，默认只会替换第一个，但是可以设置全局匹配替换全部
参数：

被替换的内容，可以接收一个正则表达式作为参数
新的内容

var str = "1a2b3c4d5e6f7A8B9C";
var result = str.replace(/[a-z]/ig,"-");
console.log(result);

在这里插入图片描述

正则表达式语法

正则量词

通过量词可以设置一个内容出现的次数，量词只对它前边的一个内容起作用，如果有多个内容可以使用 () 括起来

{n} 正好出现n次

{m,} 出现m次及以上

{m,n} 出现m-n次

+至少一个，相当于{1,}

*0个或多个，相当于{0,}

? 0个或1个，相当于{0,1}

检查或者说判断是否以某个字符或者字符序列开头或者结尾

^表示开头
$表示结尾

var reg = new RegExp();
reg = /^a$/;
console.log(reg.test("a"));

表示a既是开头也是结尾，仅单独的“a”满足
在这里插入图片描述

练习

手机号规则：

以1开头
第二位3-9任意数字
三位以后任意数字9个

var reg = new RegExp();
var phoneStr = "13567890123";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));

在这里插入图片描述

检查. | \

检查一个字符串中是否含有.和\
在正则表达式中用\表示转义字符

注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\来代替

// var reg = /\./;
// var reg = /\\/;
// var reg = new RegExp("\\.");
var reg = new RegExp("\\\\");
console.log(reg.test("\\"));

在这里插入图片描述

\w 任意字母、数字，相当于[A-z0-9]

\W 除了字母、数字，相当于[^A-z0-9]

\d 任意的数字，相当于[0-9]

\D 除了任意的数字，相当于[^0-9]

\s 空格

\S 除了空格

\b 单词边界

\B 除了单词边界

//创建一个正则表达式检查是否有单词child
var reg = new RegExp();
reg = /\bchild\b/;
console.log(reg.test("childhood"));

在这里插入图片描述
去除首尾空格

var str = "       he      llo    ";
str =str.replace(/^\s*|\s*$/g,"");
console.log(str);

在这里插入图片描述
检查邮箱
构成：
任意字母数字下划线 . 任意字母数字下划线 @ 任意字母数字 . 任意字母（2-5位）.任意字母（2-5位）

var emailReg = new RegExp();
var email = "abc.hello@163.com"
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
console.log(emailReg.test(email));

在这里插入图片描述

DOM简介

什么是DOM

DOM，全称Document Obiect Model文档对象模型
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

文档

文档表示的就是整个的HTML网页文档

对象

对象表示将网页中的每一个部分都转换为了一个对象。

模型

使用模型来表示对象之间的关系，这样方便我们获取对象。

节点
节点Node，是构成我们网页的最基本的单元

常用节点分为四类：

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

事件

事件，就是用户和浏览器之间的交互行为，比如:点击按钮，鼠标移动、关闭窗口…

可以为按钮的对应事件绑定处理函数的形式来响应事件

onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

var btn = document.getElementById("btn");
        window.onload = function(){
            btn.onclick = function(){
            alert("wiwuwiwu");
            };
        };

获取元素节点

通过document对象调用

方法	描述
document.getElementById()	通过id属性获取一个元素节点对象
document.getElementsByTagName()	通过标签名获取一组元素节点对象
document.getElementByName()	通过name属性获取一组元素节点对象

获取元素子节点

通过具体的元素节点调用

方法/属性	描述
getElementsByTagName()	返回当前节点的指定标签名后代节点
childNodes	表示当前节点的所有子节点
firstChild	表示当前节点的第一个子节点
lastChild	表示当前节点的最后一个子节点

childNodes属性会获取包括文本节点在内的所有节点
根据DOM标签标签间空白也会当成文本节点

注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE8中会返回4个子元素而其他浏览器是9个

属性	描述
parentNode	表示当前节点的父节点
previousSibling	表示当前节点的前一个兄弟节点
nextSibling	表示当前节点的后一个兄弟节点

通过 CSS 选择器查找 HTML 元素

查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的 HTML 元素，使用 querySelector() 方法。

虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

window.onload = function(){
    var div = document.querySelector(".box1 div");

    var box1 = document.querySelector(".box1");
}
console.log(box1);

querySelectorAll()类似，会获取CSS选择器中所有HTML元素

DOM的增删改

创建节点

document.createElement()
它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回

document.createTextNode()
创建一个新的文本节点。这个方法可以用来转义 HTML 字符

appendChild()
向一个父节点中添加一个新的子节点

// 创建一个新的段落元素 <p>，然后添加到 <body> 的最尾部
var p = document.createElement("p");
document.body.appendChild(p);

insertBefore()
在指定子节点之前插入一个拥有指定父节点的子节点

repleaceChild()
指定的节点替换当前节点的一个子节点

removeChild()
从 DOM 中删除一个子节点

innerHTML()
设置或获取 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>test</title>
</head>
<body>
<form action="" method="post">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox">全选/全不选<br><br>
    <input type="checkbox" name="items" value="足球">足球
    <input type="checkbox" name="items" value="篮球">篮球
    <input type="checkbox" name="items" value="羽毛球">羽毛球
    <input type="checkbox" name="items" value="乒乓球">乒乓球<br><br>

    <input type="button" id="checkedAllBtn" value="全选">
    <input type="button" id="checkedNoBtn" value="全不选">
    <input type="button" id="checkedRevBtn" value="反选">
    <input type="button" id="sendBtn" value="提交">
</form>
</body>
<script>
       
        var checkedAllBtn = document.getElementById("checkedAllBtn");
        checkedAllBtn.onclick = function(){
        var items = document.getElementsByName("items");

        for(var i = 0;i < items.length;i++){
            items[i].checked = true;
        }
        checkedAllBox.checked = true;
    };

        var checkedNoBtn = document.getElementById("checkedNoBtn");
        checkedNoBtn.onclick = function(){
        var items = document.getElementsByName("items");

        for(var i = 0;i < items.length;i++){
            items[i].checked = false;
        }
        checkedAllBox.checked = false;
    };

        var checkedRevBtn = document.getElementById("checkedRevBtn");
        checkedRevBtn.onclick = function(){
        var items = document.getElementsByName("items");
        checkedAllBox.checked = true;
        for(var i = 0;i < items.length;i++){
            items[i].checked =! items[i].checked;
            if(!items[i].checked){
                    checkedAllBox.checked = false;
            }
        }
    };

        var sendBtn = document.getElementById("sendBtn");
        sendBtn.onclick = function(){
            var items = document.getElementsByName("items");
        for(var i = 0;i < items.length;i++){
            if(items[i].checked){
                alert(items[i].value);
            }
        }
    };

        var checkedAllBox = document.getElementById("checkedAllBox")
        var items = document.getElementsByName("items");
        checkedAllBox.onclick = function(){
            for(var i = 0; i < items.length ;i++){
                items[i].checked = this.checked;
        }
        for(var i = 0; i < items.length;i++){
            items[i].onclick = function(){
                checkedAllBox.checked = true;
                for(var j = 0;j < items.length;j++){
                if(!items[j].checked){
                    checkedAllBox.checked = false;
                    break;
                    }
                }
            }
        }
    };
</script>
</html>

在这里插入图片描述

利用JS修改CSS属性

使用obj.className来修改样式表的类名

function changeStyle() {
  var obj = document.getElementById("btnB");
  obj.style.backgroundColor= "black";
}

使用obj.style.cssText来修改嵌入式的css

function changeStyle() {
   var obj = document.getElementById("btnB");
   obj.style.cssText = "background-color:black;
   display:block;
   color:White;
}

使用obj.className来修改样式表的类名

function changeStyle() {
  var obj = document.getElementById("btnB");
  //obj.className = "style2";
  obj.setAttribute("class", "style2");
}

使用更改外联的css文件，从而改变元素的css

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
 
function changeStyle() {
   var obj = document.getElementById("css");
   obj.setAttribute("href","css2.css");
}

实例：

<!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>
        #box{
            width: 100px;
            height: 100px;
            background-color: #a0c8ff;
        }
    </style>
</head>
<body>
    <button id="btn">click me !</button><br><br>
    <div id="box"></div>
    <script>
        	var box = document.getElementById("box");
            var btn = document.getElementById("btn");
        btn.onclick = function(){
            box.style.width = "300px";
            box.style.height = "300px";
            box.style.backgroundColor = "#000";
        };
    </script>
</body>
</html>

在这里插入图片描述

获取元素当前样式

在其它的浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用。

var obj = getComputedStyle(box,null);
        alert(obj.width);

在这里插入图片描述

需要两个参数

要获取样式的元素
可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对可以通过对象。样式名来读取样式
如果获取的样式没有设置，则会获取到真实的值，比如:没有设置width，它不会获取到auto

getStyle()

定义一个函数，用来获取指定元素的当前的样式参数:

obj要获取样式的元素

name 要获取的样式名

function getStyle ( obj , name )
{
	if(window.getComputedStyle){
		return window.getComputedStyle(obj,null)[name];
	}else{
		return obj.currentStyle[name];
	}
}
//return window.getComputedStyle?getComputedStyle(obj,null)[name];

其它样式的相关属性

clientWdith和clientHeight这两个属性可以获取元素的可见宽度和可见高度
这些属性不带px，返回为数字，可直接进行计算

语法：元素.clientWidth

元素.clientHeight

在这里插入图片描述

offsetWidth和offsetHeight这两个属性可以获取元素的整个大小，包括内容区和内边距

语法：元素.offsetWidth

元素.offsetHeight

在这里插入图片描述

offsetParent可以获取当前元素的定位父元素，他会获取到离当前元素最近的、开启了定位（只要position的值不是static就开启了定位）的祖先元素，如果所有的祖先元素都没有开启定位，则返回body

语法：元素.offsetParent

offsetLeft属性，当前元素相对于定位父元素的水平偏移量，这里的定位父元素就是通过offsetParent所能获取到的元素，如果所有的祖先元素都没有开启定位，则它的定位父元素为body

语法：元素.offsetLeft

在这里插入图片描述

offsetTop属性，当前元素相对于定位元素的垂直偏移量，定位元素同上

语法：元素.offsetTop

scrollHeight和scrollWidth可以获取到元素整个滚动区域的高度和宽度

语法：元素.scrollHeight

元素.scrollWidth

在这里插入图片描述

scrollLeft和scrollTop可以获取水平滚动条或者垂直滚动条滚动的距离

语法：元素.scrollLeft

元素.scrollTop

事件对象

<!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>Test</title>
    <style>
        #areaDiv{
            width: 600px;
            height: 300px;
            border: 1px solid #000;
        }
        #showMsg{
            width: 600px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="areaDiv"></div><br>
    <div id="showMsg"></div>
    <script>
        var areaDiv = document.getElementById("areaDiv");
        var showMsg = document.getElementById("showMsg");
        areaDiv.onmousemove = function(event){
            var x = event.pageX;
            var y = event.pageY;
            showMsg.innerHTML = "&emsp;&emsp;x="+x+"&emsp;&emsp;y="+y;
        }
    </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>Test</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: aliceblue;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background: #a0c8ff;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div id="box1">
            我是box1
        <div id="box2">
            我是box2
        </div>
    </div>
    <script>
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        box1.onclick = function () {
            alert("我是box1的响应函数");
        };
        box2.onclick = function () {
            alert("我是box2的响应函数");
        };
    </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>Test</title>
</head>
<body>
    <button id="btn">添加超链接</button>
    <ul id="u1">
        <li><a href="javascript:;" class="link">超链接一</a></li>
        <li><a href="javascript:;" class="link">超链接二</a></li>
        <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
    <script>
        var u1 = document.getElementById("u1");
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var li = document.createElement("li");
            li.innerHTML = "<a href='javascript:;>新建的超链接</a>";
            u1.appendChild(li);
        }
        // 为ul绑定一个单击响应函数
        u1.onclick = function (event) {
            event = event || window.event;
            // 如果触发事件的对象是我们期望的元素，则执行，否则不执行
            if (event.target.className == "link") {
                alert("我是ul的单击响应函数");
            }
        };
    </script>
</body>
</html>

在这里插入图片描述

事件绑定

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

<!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>
</head>
<body>
    <button id="btn">click me !</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
           btn.addEventListener("click",function(){
                alert(1);
            },false);
            btn.addEventListener("click",function(){
                alert(2);
            },false); 
        }
    </script>
</body>
</html>