JS初学

arguments是所有实参的集合

补充： 数组也有一个reverse方法 作用： 将原数组的成员顺序反转 会改变原数组 返回值也是原数组
补充： 任何字符串的方法都不会改变原字符串

数组

push 在末尾添加一项成员 改变原数组
pop 将最后一项移除 改变原数组
unshift 在头部添加一个成员 改变原数组
shift 将数组头部移除第一项 改变原数组

#concat 方法的作用是将两个数组拼合成一个数组 参数是拼合的另外一个数组
var arr = [1, 2, 3];
var result = arr.concat([4, 5, 6]);
console.log(arr);
console.log(result);

#random 排序 接受一个函数作为参数 该函数有两个形参 分别代表数组内的两个数字 如果该函数的返回值为a - b 则数组从小到大排序
如果该函数返回的是b - a 则数组从大到小排序
var arr = [1, 9, 45, 55, 3, 67, 8, 101];
// 重新排序
var arr1 = arr.sort(function(a, b) {
return a - b;
});

#slice 数组的截取方法, 截取数组中的一段内容
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
// 该方法叫做slice
// 它可以传递两个参数 一个参数 不传参数
var arr1 = arr.slice(1, 2); // 从下标1的成员截取到下标2的成员 将它们装在一个新数组中 返回这个新数组
var arr2 = arr.slice(3); // 从下标3的位置 截取到最后 并放在新数组中返回
var arr3 = arr.slice(); // 截取所有原数组的成员并放在新数组中返回
console.log(arr1); // [2]
console.log(arr2); // [4, 5, 6, 7, 8]
console.log(arr3); // [1, 2, 3, 4, 5, 6, 7, 8]
var arr4 = arr.slice(-5, -1); // 负数的意思是从后往前数 从-1开始
var arr5 = arr.slice(-5); // 负数的意思是从后往前数 从-1开始 因为没有第二个参数 会截取到最后
特点： 必须要求第一个参数 比第二个参数 要小
特点： slice方法不会改变原数组

#splice 该方法可以用于修改数组 向数组中添加内容 删除数组成员
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
删除数组成员 如果要删除9 也就是数组的最后一项
arr.length–;
arr.length = arr.length - 1;

        第一个参数表示 从哪个下标位置开始删除 第二个参数表示删除几个 
        从第三个参数开始 表示要新增的项 从第一个参数所指定的位置开始
        返回值：新数组 内部的成员是从原数组中被移除的项 如果没有被移除的项就是空数组
    arr.splice(8, 1); //从下标8的位置开始删除 删除1个 不增

#join 方法 它可以以指定的内容作为连接符将数组转为字符串 参数就是连接符 可以不传递 默认为“,”
var arr = [1, 2, 3, 4, 5];
var str = arr.join("+");
console.log(str);
额外补充
请以最快的方式计算一个数组中所有成员的和
var result = eval(str);

#indexOf 方法 查询数组中的成员索引方法
var arr = [1, 2, 3, 4, 5, “5”, 6, “5”, 7, 8, 9];
第一步 找到字符串5 的位置
var index = arr.indexOf(“5”); // 如果有 就返回该成员所在的下标数字 如果找不到 就返回-1
console.log(index);
它可以接受第二个参数 表示开始查询的位置
var index1 = arr.indexOf(“5”, 6); // 从下标为6的位置开始往后查询 直到遇见了第一个字符串5 就停止
console.log(index1);
移除第一个字符串5
arr.splice(index, 1);

事件的分类

#鼠标事件
click 点击事件
dblclick 双击事件
mousedown 鼠标按下事件
mouseup 鼠标抬起事件(一次click包含一次mousedown和一次mouseup)
mouseover 鼠标进入事件
mouseenter 鼠标进入事件
mouseout 鼠标离开事件
mouseleave 鼠标离开事件
mousemove 鼠标移动事件
#键盘事件
keydown 键盘键被按下
keyup 键盘键被松开
keypress 输入
#浏览器的事件
load 页面中所有资源都被加载完毕的时候
scroll 页面的卷动
#焦点事件
focus 当一个元素获取到焦点时
blur 当一个元素失去焦点时
#移动端事件
touchstart 触摸开始事件 会在手指按下的时候触发
touchmove 触摸并移动 会在手指按下并移动的时候触发
touchend 触摸结束事件 会在手指离开的时候触发
#其它事件
animationstart 动画开始时触发
animationend 动画结束时触发
transitionend 过渡结束时触发

字符串

#charAt 参数是数字 返回值是该数字所指向的下标字符
JavaScript var str = "abcdefg"; // 获取指定位置的字符 var code = str.charAt(5); console.log(code); // f

#charCodeAt 参数是数字 返回值是该数字所指向的下标字符的编码
JavaScript var str = "abcdefg"; var code = str.charCodeAt(5); console.log(code); // 102

#split 参数是分隔符 返回值是以该参数作为切割之后的数组
```JavaScript
var str = “a1b1c1d1e1f”; // 想要以1作为分隔符 将字符串切割成数组 => [“a”, “b”, “c”, “d”, “e”, “f”];
var arr = str.split(“1”);
console.log(arr); // [“a”, “b”, “c”, “d”, “e”, “f”];

        // 数组转为字符串
        // ["a", "b", "c", "d", "e", "f"].join("1"); => a1b1c1d1e1f
    ```

#substring 该方法用于截取字符串中的一段
JavaScript var str = "abcdefg"; var str1 = str.substring(1, 2); var str2 = str.substring(1); var str3 = str.substring(); var str4 = str.substring(-5, -2); var str5 = str.substring(5, 1); console.log(str1); // b console.log(str2); // bcdefg console.log(str3); // abcdefg console.log(str4); // 空字符串 截取不到 console.log(str5); // bcde // 特点：两个参数时，总是从小的截取到大的 // 特点：当数值为负数时 不会从后往前数

#substr 该方法也用于截取字符串中的一段 第一个参数依旧表示截取的开始位置 第二个参数表示要截取的字符串的长度
JavaScript var str = "abcdefghijkl"; var str1 = str.substr(3, 5); console.log(str1);

#slice 该方法用于截取字符串的一段 第一个参数表示截取的开始位置(包含) 第二个参数表示截取的结束位置(不包含)
JavaScript var str = "abcdefghijkl"; var str1 = str.slice(1, 5); var str2 = str.slice(5, 1); var str3 = str.slice(-5); console.log(str1); // bcde console.log(str2); // 空字符串 因为截取不到 console.log(str3); // hijkl 从后往前截取

#indexOf 该方法用于获取数组中第一个从某个位置开始出现的字符串的第一个字符的下标 如果找不到 就返回-1 第一个参数是被查询的字符串 第二个参数是查询的开始位置
JavaScript var str = "abcdefgdfdfdf"; var index = str.indexOf("df"); console.log(index); //
#toLowerCase 该方法用于将所有的字符串中的英文小写
JavaScript var str = "ABCDEFG,你好,abcde"; var str1 = str.toLowerCase(); console.log(str1); // abcdefg,你好,abcde

#toUpperCase 该方法用于将所有的字符串中的英文大写
JavaScript var str = "abc"; var str1 = str.toUpperCase(); console.log(str1); // ABC

郑重声明: 所有的字符串方法都不会改变原字符串

Math对象

JS中有许多的内置对象。其中，Math对象封装了许多常用的数学函数。

#Math.random 该方法用于生成一个随机数0~1 包含0 不包含1
JavaScript // 获取一个从0到9的随机整数数字 var r = Math.random(); var num = parseInt(Math.random() * 10); console.log(num);

#Math.abs 该方法用于获取一个数的绝对值
JavaScript // 定义一个负数 var num = -10; // 获取它的绝对值 var abs = Math.abs(num); // 输出 console.log(abs); // 10

Math.ceil 向上取整

```JavaScript
    var num = 1.1;
    var result = Math.ceil(num);
    console.log(result); // 2
```

#Math.floor 向下取整
JavaScript var num = 1.1; var result = Math.floor(num); console.log(result); // 1

Math.round 四舍五入

```JavaScript
    var num = 1.4;
    var num1 = 1.5;
    console.log(Math.round(num)); // 1
    console.log(Math.round(num1)); // 2
```

Math.pow 用于求一个数的几次方 第一个参数是底数 第二个参数是指数

```JavaScript
    var num = Math.pow(2, 8);
    console.log(num); // 256
```

#Math.max 求所有参数中的最大值
JavaScript var max = Math.max(1, 2, 56, 78, 99, 0, 46, 23); console.log(max); // 99

#Math.min 求min参数中的最小值
JavaScript var min = Math.min(1, 2, 56, 78, 99, 0, 46, 23); console.log(min); // 1

额外说明： …语法是ES6中的语法 可以将数组的每一个成员拆解成参数传递给函数

额外说明： apply方法是所有函数都有的方法 作用是改变函数中的this指向并以数组的形式传递参数

Date构造函数 用于处理日期方面的相关

#初始化
new Date()
传递两个参数 分别是 年 月
传递三个参数 分别是 年 月 日
传递四个参数 分别是 年 月 日 时
传递五个参数 分别是 年 月 日 时 分
传递六个参数 分别是 年 月 日 时 分 秒
传递一个参数 是一个符合日期格式的字符串 可以是 yyyy.MM.dd hh:mm:ss 可以是yyyy-MM-dd hh:mm:ss
#方法
getFullYear() 获取一个日期的年份数字
getMonth() 获取日期的月份 0表示1月 1表示2月
getDay() 获取星期几 0 表示周日 1 ~ 6 表示周一~周六
getDate() 获取该日期是当月的几号 1 ~ 31
getHours() 获取小时数
getMinutes() 获取分钟数
getSeconds() 获取秒数
getMillionseconds() 获取毫秒值
getTime() 获取从1970年1月1日0时0分0秒至该日期的毫秒值

    setFullYear() 设置一个日期的年份
    setMonth() 设置一个日期的月份
    setDate() 设置一个日期的几号
    setHours() 设置小时数
    setMinutes() 设置分钟数
    setSeconds() 设置秒数
    setMillionseconds() 设置毫秒数

获取浏览器的尺寸

    ```JavaScript
        console.log(window.innerWidth); // 输出浏览器视口宽度
        console.log(window.innerHeight); // 输出浏览器视口高度
    ```

window.location

    是浏览器中负责浏览器的地址栏的相关对象 

href属性 用于设置和读取当前浏览器窗口的地址栏内容

    ```JavaScript
        // 将当前页面的地址栏修改为百度 也就是跳转到百度
        location.href = "https://www.baidu.com";
    ```

reload方法 用于刷新当前页面

    ```JavaScript
        location.reload(); // 刷新页面
    ```

window.history

是浏览器中负责历史记录的相关对象

forward方法 让历史记录前进一次

    ```JavaScript
        history.forward(); // 前进一次
    ```

#back方法 让历史记录后退一次
JavaScript history.back(); // 后退一次
#go方法 接受一个数字作为参数
如果为0 表示刷新当前页面
如果为正数 表示前进几次
如果为负数 表示后退几次

    ```JavaScript
        history.go(0); // 刷新页面
        history.go(1); // 前进一步 等价于history.forward();
        history.go(2); // 前进两步 
        history.go(-1); // 后退一步 等价于history.back();
        history.go(-2); // 后退两步 
    ```

打开关闭页面

    ```JavaScript
        // 打开页面
        window.open(打开的页面的网址);

        // 关闭页面
        window.close();
    ```

事件

#load事件 在资源都加载完毕之后触发
JavaScript window.onload = function() { // code... 这里的代码会在所有资源加载完毕之后执行 }

#scroll事件 当页面有卷动值(页面比视口高)时，页面卷动值发生了改变时会触发
JavaScript window.onscroll = function() { // code... 这里的代码会在页面卷动值发生改变时触发 }

浏览器信息

window.navigator 获取浏览器对象

navigator.userAgent 获取浏览器代理信息字符串

navigator.platform 获取平台信息

setInterval(重点)

• 第一个参数是函数 ，表示要执行的代码。第二个参数是数字，表示执行的时间间隔 单位是毫秒
• 返回值是数字 这个数字是一个编号 代表这是第几个定时器
  JavaScript // 每一秒都会执行一次输出 setInterval(function() { console.log(1); }, 1000);

setTimeout(重点)

• 第一个参数是函数 ，表示要执行的代码。第二个参数是数字，表示延迟的时间 单位是毫秒
• 返回值是数字 这个数字是一个编号 代表这是第几个定时器
  JavaScript // 1秒后输出一次 不再输出 setTimeout(function() { console.log(1); }, 1000)

clearInterval(重点)

接受一个参数 就是要清除的定时器或者延时器的编号

clearTimeout(重点)

接受一个参数 就是要清除的定时器或者延时器的编号

   注：以上两个方法可以混合使用，但不推荐。 

获取元素

在JS中操作元素，必须要先获取到元素

document.getElementById(id) 根据ID获取元素

    该方法用于根据ID获取元素 ID是HTML标签的属性 应当具备唯一性
    返回值：如果有这个元素 就可以得到该元素对象。如果没有，就是null。

document.getElementsByTagName(tagName) 根据标签名获取元素

- 返回值： 集合对象(类数组对象)

document.getElementsByName(name) 根据name属性获取元素

- 返回值： 集合对象(类数组对象)

#document.querySelector(selector) 根据选择器获取元素
- 返回值： 元素对象

#document.querySelectorAll(selector); 根据选择器获取多个元素
- 返回值： 集合对象(类数组对象)

额外知识点

获取页面卷动值

- document.documentElement.scrollTop
- document.body.scrollTop

统一写法: var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

#获取页面高度
- document.body.clientHeight

• 操作元素的行内样式

    ```JavaScript
        // 设置行内样式
        dom.style.xxx = yyy;
        // xxx 表示对应的css样式属性名 如果用点语法，就需要使用驼峰 如果用方括号语法 则可以不用驼峰 但是一定要加双引号 
        // yyy 表示对应的属性值
    
        // 驼峰写法
        box.style.backgroundColor = "black";
        // 方括号写法
        box.style["background-color"] = "black";
    ```