JavaScript学习笔记三

十、call()和apply()

/*
call()和apply()
    这两个方法都是函数对象的方法，需要通过函数对象来调用
    在调用这两个方法时可以将第一个参数指定为一个对象
        此时这个对象将会成为函数执行时的this
    call()方法可以将实参在对象之后依次传递
    apply()方法需要将实参封装到一个数组中统一传递
*/
function fun(){
    alter("我是fun函数");
}
var obj = {
    name:"张三",
    sayName:function(){
        alter(this.name);
    }
}
var obj2 = {
    name:"李四",
    sayName:function(){
        alter(this.name);
    }
}
fun.call() //我是fun函数
fun.apply() //我是fun函数
fun.call(obj)或者fun.apply(obj) //张三
fun.call(obj2)或者fun.apply(obj2) //李四
​

十一、arguments（封装实参对象）

在调用函数时，浏览器不止会传递this这个隐含参数，还会传递arguments这个隐含参数

arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度

而调用函数时，我们所传递的实参都会在arguments中保存

arguments[0]表示第一个实参,arguments[1]表示第二个实参

其中有一个属性叫callee

这个属性对应一个函数对象，就是当前正在指向的函数对象

十二、Date对象

/*
直接使用构造函数创建一个Date对象，则会封装为当前代码执行的事件
创建一个指定时间对象，需要在构造函数中传递一个表示时间字符串作为参数
    格式：约/日/年/ 时：分：秒
*/
var d = new Date();
var d2 = new Date("2/23/2022 00:00:00");
​
/*
getDate()
    获取当前日期对象是这个月中第几天
*/
var date = d2.getDate();
console.log(date); //23
​
/*
getDay()
    获取当前日期对象是星期几
    会返回一个0-6的值
*/
var day = d2.getDay();
console.log(day); //3
​
/*
getMonth()
    获取当前时间对象的月份
    会返回一个0-11值
*/
var month = d2.getMonth();
console.log(month); //1
​
/*
getFullYear()
    获取当前日期对象的年份
*/
var year = d2.getFullYear();
console.log(year); //2022
​
/*
getTime()
    获取当前日期对象的时间戳
    指的是从格林威治标准时间的1970年1月1日，0时0分0秒到当前日期所花费的毫秒数
*/
​
/*
Date.now()
    获取当前的时间戳
    可以来测试执行代码的性能
*/
var date = Date.now();
for(var i=0;i<100;i++){
    console.log(i);
}
var date2 = Date.now();
console.log(date2 - date)

十三、Math对象

Math和其他的对象不同，它不是一个构造函数

它属于一个工具类，不用创建对象，它里边封装了数学运算相关的属性和方法

/*
abs()可以用来计算一个数的绝对值
*/
console.log(Math.abs(-1)); // 1
​
/*
Math.ceil()：可以对一个数进行向上取整
Math.floor()：可以对一个数进行向下取整
Math.round()：可以对一个数进行四舍五入
*/
console.log(Math.ceil(1.1)); // 2
console.log(Math.cel(1.9)); // 2
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.9)); // 2
​
/*
Math.random()
    可以生成一个0-1之间的随机数
        生成一个x-y之间的随机数
            语法：
                Math.round(Math.random()*(y-x)+x)
*/
console.log(Math.round(Math.random()*9+1)); //生成1-10之间的随机数 
​
/*
Math.max() 可以获取多个数中的最大值
Math.min() 可以获取多个数中的最小值
Math.pow(x,y) 返回x的y次幂
*/
​

十四、字符串相关方法（常用）

在底层字符串是以字符数组的形式保存的，所以大部分属性和方法都和数组类似

/*
charAt()
    可以根据索引返回字符串中指定位置的字符
charCodeAt()
    获取指定位置字符的字符编码(Unicode编码)
*/
var str = "Hello";
console.log(str.charAt(0)); // H
console.log(str.charCodeAt(0)); // 72
​
/*
concat()
    可以用来连接两个或多个字符串，作用和+号差不多
    用法和数组类似
*/
​
/*
indexOf()
    该方法可以检索一个字符串中是否含有指定内容
    如果字符串含有该内容，则会返回其第一次出现的索引，如果没有，则返回-1
    可以指定一个第二个参数，那么会从指定位置开始查找
lastIndexOf()
    该方法的用法和indexOf是一样的
    不同的是从后往前找
*/
var str = "Hello";
console.log(str.indexOf(l)); // 2
console.log(str.indexOf(l,3)); // 3,此时从第二个l处开始查找
​
/*
slice()
    可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到的内容返回，和数组中用法类似
substring()
    作用、用法和slice()方法类似
    不同的是这个方法不能接受负值作为参数
        如果传递了一个负值，则默认使用0
        而且还会自动调正参数位置，从小到大调整
*/
​
/*
split()
    可以将一个字符串拆分为一个数组
    需要一个字符串作为参数，将会根据该字符串去拆分数组
*/
var str = "123,456,789";
console.log(str.split(",")) // 123,456,789
console.log(typeof str.split(",")) // Object
​
/*
toUpperCase()：将一个字符串转换为大写并返回
toLowerCase()：将一个字符串转换为小写并返回
*/

十五、正则表达式

1.简介

正则表达式用于定义一些字符串的规则：

计算机可以根据正则表达式，来检查一个字符串是否符合规则

也可以将字符串中符合规则的内容提取出来

/*
创建正则表达式的两种方法：（使用字面量的方式创建更加简单，使用构造函数创建更加灵活）
1）构造函数法：
    var reg(变量名) = new RegExp("正则表达式","匹配模式")
    
2）字面量法：
    var reg(变量名) = /正则表达式/+匹配模式
可以传递一个匹配模式（两个一起也行）作为第二个参数：
    i 忽略大小写
    g 全局匹配模式
​
正则表达式的方法：
    reg.test()
        使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
            如果符合返回true，否则返回false
*/

2.正则语法

/*
检测一个字符串中是否含有a或b
使用 | 或 [] 表示或者的意思
[A-z] 表示任意字母
[^ ] 表示除了什么意外
*/
var reg = /[ab]/;
var str = "ac";
var str2 = "bc";
var str3 = "c";
console.log(reg.test(str)); // true
console.log(reg.test(str2)); // true
console.log(reg.test(str3)); // false

3.字符串和正则相关的语法

/*
split()
    可以将一个字符串拆分为一个数组
    方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
*/
var str = "1a2b3c4d5e6f";
var reg = /[a-z]/;
console.log(str.split(reg)); // 1,2,3,4,5,6
​
/*
search()
    可以搜索字符串中是否有指定内容
    如果有，则会返回第一次出现的索引，如果没有，则返回-1
    它可以接受一个正则表达式作为参数，任何会根据正则表达式去检索
*/
var str = "hello abc hello aec afc";
var reg = /a[bef]c/;
console.log(str.search(reg)); // 6
​
/*
match()
    可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
    默认情况下match只会找到第一个符合要求的内容，然后就停止搜索
        我们可以将匹配模式设置为全局，这样就能匹配全局内容
    match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
*/
var str = "1a2b3c4d5e6f";
var reg = /[a-z]/g;
console.log(str.match(reg)); // a,b,c,d,e,f
​
/*
replace()
    可以将字符串中指定内容替换为新的内容
    参数：
        1.被替换的内容，可以接受一个正则表达式作为参数
        2.新的内容
    默认只会被替换第一个
*/
var str = "1a2b3c";
var reg = /[a-z]/g;
console.log(str.replace(reg,"=.=")); // 1=.=2=.=3=.= 

4.正则表达式语法

量词：

通过量词可以设置一个内容出现的次数

量词只对它前边的一个内容起作用

{n} 正好出现 n 次

{m,n} 出现 m - n 次

{m,} 出现m次以上

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

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

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

开头/结尾：

^ 表示开头

$ 表示结尾

如果在正则表达式中同时使用^ $，则要求字符串必须完全符合正则表达式

在正则表达式中使用 \ 作为转义字符

\ . 来表示 . (. 表示任意字符)

\ \ 来表示 \

\w 来表示：任意的字母、数字、_ [A-z0-9_]

\W 来表示：除了字母、数字、_ [ ^A-z0-9_]

\d 来表示 任意的数字

\D 来表示：除了数字

\s 来表示： 空格

\S 来表示：除了空格

\b 来表示：单词边界

\B 来表示：除了单词边界

5.正则相关练习

/*
创建一个正则表达式检测一个字符串中是否含有单词 xxx
*/
var reg = /\bxxx\b/;
console.log(reg.test("hello xxxren")); // false
console.log(reg.test("hello xxx ")); // true
​
/*
去除字符串中的前后空格（即使用""来替换空格）
*/
var str = "     hel  lo        ";
console.log(str.replace(/^\s* | \s*$/g,"")); // hel  lo
​
/*
判断邮箱的正则表达式：
    只允许英文字母、数字、下划线、英文句号、以及中划线组成
*/
var str = "zhangsan-001@gmail.com";
var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
console.log(reg.test(str)); // true
​
/*
判断手机号的正则表达式
*/
var str = "13567890123";
var reg = /^1[3-9][0-9]{9}$/;
console.log(reg.test(str)); // true

十六、DOM

1.简介

DOM：全称Document Object Model文档对象

JS中通过DOM来对HTML文档进行操作

节点：Node——构成HTML文档最基本的单元

常用节点分为四类：

文档节点：整个HTML文档

元素节点：HTML文档中的HTML标签

属性节点：元素的属性

文本节点：HTML标签中的文本内容

2.事件

事件：就是用户和浏览器之间的交互行为

浏览器在加载一个页面时，是按照自上向下的顺序加载，即读取到一行就运行一行，如果将script标签写到页面的上边，那么代码执行时，页面还没有加载

而window.onload事件会在整个页面加载完成后才触发（这样可以确保我们的代码执行时所以的DOM对象已经加载完毕了）

3.DOM查询

获取元素节点：

1）getElementById()

通过id属性获取一个元素节点对象

2）getElemensByTagName()

通过标签名获取一组元素节点对象

3）getElementsByName()

通过name属性获取一组元素节点对象

4）getElementsByClassName() （有兼容性问题）

通过calss属性获取一组元素节点对象

获取元素节点的子节点：

1）getElemensByTagName()

方法，返回当前节点的指定标签名后代节点

2）childNodes

属性，表示当前节点的所有节点（包含换行文本节点）

3）firstChild

属性，表示当前节点的第一个节点（包含换行文本节点）

4）lastChild

属性，表示当前节点的最后一个节点（包含换行文本节点）

获取父节点和兄弟节点：

1）parentNode()

属性，表示当前节点的父节点

2）previousSibling()

属性，表示当前节点的前一个兄弟节点

3）nextSibling()

属性，表示当前节点的后一个兄弟节点

十七、事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进相应函数（在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，鼠标滚轮滚动的方向....）

获取的事件对象名称.绑定的事件 = function(e/event) {
    alter(e/event); //其中e/event就是事件对象
}

十八、事件对象相关知识

1.事件的委派

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

事件委派是利用了事件冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

2.事件的绑定

使用 对象.事件 = 函数 的形式绑定响应函数

它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个

如果绑定多个，则后边会覆盖掉前边的

addEventListener()

通过这个方法也可以为元素绑定响应函数

参数：

1.事件的字符串，不需要使用on

2.回调函数，当事件触发时该函数会被调用

3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

而通过addEventListener()可以同时为一个元素的相同事件绑定多个响应函数

这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

3.事件的传播

1）捕获阶段

在该阶段时从最外层的祖先元素，向目标元素进行事件捕获

2）目标阶段

事件捕获到目标元素，捕获结束开始在目标元素上触发事件

3）冒泡阶段

事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()第三个参数设置为true

十九、BOM

1.简介

全称： Browser Object Model ，浏览器对象模型

BOM可以使我们通过JS来操作浏览器，为我们提供了一组对象，用来完成对浏览器的操作

2.BOM对象

1）Window

代表的是整个浏览器的窗口，同时window也是网页中的全局对象

2）Navigator

代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器

3）Location

代表当前浏览器的地址栏信息，通过location可以获取地址栏信息，或者操作浏览器跳转界面

4）History

代表浏览器的历史记录，但由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，且只在当次访问时有效

5）Screen

代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息

注意：BOM对象的使用自行了解！！！