一、JavaScript是什么？
JavaScript是一门面向对象的语言。
JavaScript是严格区分大小写的，也就是abc和Abc会被解析器认为是两个不同的东西。
二、使用步骤
1.标签引用
代码如下（示例）：
<script>
/*控制浏览器弹出警示框
alert("这是我的第一行JS代码");
*/
/*控制计算机在页面中输出一个内容
document.write("2341") 向body中输出内容
*/
/*向控制台输出内容
console.log("")
*/
</script>
在一个单独的js文件中也可以编写JavaScript代码，然后在HTML文件中使用script标签进行引用:
<script src="#"></script>
<!-- 可以将js编写到标签的onclick属性 点击按钮时js才会生效-->
<button onclick="alert('讨厌')">dian</button>
<!--可以将js写在超链接的herf内 -->
<a href="javascript:alert('讨厌');">dian</a>
2.标识符
标识符可以是按照下列格式规则组合起来的一或多个字符：
第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
其它字符可以是字母、下划线、美元符号或数字。
按照惯例，标识符采用驼峰命名法。
标识符不能是关键字和保留字符。
3.变量、字面量
变量的声明： 使用var关键字声明一个变量。
4.语法
4.1数据类型
字符串型（String）
数值型（Number）
布尔型（Boolean）
未定义（Undefined）
null型（Null）
Object 对象 引用数据类型
4.2运算
prompt（）可以弹出提示框，带有文本 用于输入数据
String 字符串 ""或 ‘’ 不能嵌套 ：双引不双引 单引不单引
在字符串中我们可以用\作为转义字符
1. “表示普通的”
2. ‘表示普通的’
3.\n 换行
4.\t 制表符
5.\表示\
6.Number 数值 Number.MAX_VALUE表示数字最大值 Number.MIN_VALUE表示数字最小值>0
7.Nan是一个特殊的数字表示Not A Number
8.Infinity:正无穷
9.typeof:可以用来检查一个变量的数据类型
4.3强制类型转换
-
toString()：不会影响原变量 将转换的结果返回 null和undefined报错
-
String：都可以转换
-
Number（）：纯数字的字符串转换为数字，有非数字转换位NaN
-
parseInt（）：字符串转化为整数
-
parseInt（0x12，16）：第二个参数位进制
-
parseFloat（）：浮点数
-
Boolean（）：数字除了0和NaN其他都是true, 字符串除了空串 null undefined都是true
5.对象
5.1创建对象：
var obj=new Object( );
var b=obj.name="孙悟空";//添加name属性 语法：对象.属性名
obj["乱七八糟的名字"]=23;//语法：对象["属性名"]=属性值
console.log(b);
//对象字面量
var obj={
name:"jjj";
}
5.2删除对象：
var obj=new Object( );
var b=obj.name="孙悟空";
delete obj.name;//删除对象属性
6.函数
6.1创建函数
- 使用 函数对象 来创建一个函数
var 函数名 = new Function("执行语句");
- 使用 函数声明 来创建一个函数（比较常用）
function 函数名([形参1,形参2,...,形参N]) {
语句...
}
- 使用 函数表达式 来创建一个函数（比较常用）
var 函数名 = function([形参1,形参2,...,形参N]) {
语句....
}
函数名（）；
6.2匿名函数
var fun = function () {
alert("我是一个匿名函数");
}
fun();
6.3立即执行函数
立即执行函数：函数定义完，立即被调用，这种函数叫做立即执行函数，立即执行函数往往只会执行一次
(function () {
alert("我是一个匿名函数");
})();
6.4对象中的函数
如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法，调用这个函数就说调用对象的方法
function fun(){};
var obj1={
name:"swk",
sayname:fun
};
obj.sayname();
6.5 this
解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象
- 以函数形式调用时，this永远都是window
- 以方法的形式调用时，this是调用方法的对象
- 以构造函数的形式调用时，this是新创建的那个对象
- 使用call和apply调用时，this是指定的那个对象
6.6 用工厂方法创建对象
function createPerson(name,age ,...){
var obj=new Object();
obj.name=name;
obj.age=age;
obj.sayname=function(){
}
return obj;
}
var a=createPerson("ss",11);
但是你会发现每一个人都是一样的，我们要是想要给每一个人不同的属性值需要使用构造函数创建对象
6.7构造函数
- 立刻创建新对象
- 将新建对象设为函数的this
- 执行
- 将新对象作为返回值
<script>
function Person(name,age){
this.name=name,
this.age=age;
this.sayname=fun;
};
// 定义在全局中不安全且占用命名空间
function fun(){
alert(this.name);
};
//改进 向原型中添加
Person.prototype.sayname=function(){
alert(this.name);
}
//var per=Person();//普通函数
var per=new Person("swk",11);//加new构造函数
console.log(per);
//使用instanceof可以检查一个对象是否是一个类的实例
console.log(per instanceof Person);
</script>
6.8原型对象
- prototype原型 每创建一个函数 都会向函数里添加此属性
- 如果作为普通函数没用 构造函数有用
- 如果函数作为普通函数调用prototype没有任何作用当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
- 原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
- 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用,如果没有则会去原型对象中寻找，如果找到则直接使用
- 创建对像时共有属性可以直接写在原型中
- 使用in检查时对象无原型有也会true
- 可以使用对象的hasOwnProperty（“”）方法检查自身是否有此属性
function a(){
}
var b=new a();
b.name="hh";
a.prototype.abc=123;
console.log(b.hasOwnProperty("name"));
console.log(b.__proto__==a.prototype);
console.log(typeof a.name);
console.log(b.abc);
console.log(a.abc);
6.9对象的toString方法
打印对象，实际上是输出对象的toString（）方法的返回值 因此我们可以自定义该方法
function obj(){
}
var b=new a();//利用构造函数创建对象
b.prototype.toString()=function(){
}//在对象的原型中自定义，可以保证每个对象都可以实现
6.10垃圾回收
当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。
在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作，我们需要做的只是要将不再使用的对象设置null即可。
6.11作用域
6.11.1全局作用域
直接编写在script标签中的JavaScript代码，都在全局作用域
全局作用域在页面打开时创建，在页面关闭时销毁
在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建，我们可以直接使用
在全局作用域中：
- 创建的变量都会作为window对象的属性保存
- 创建的函数都会作为window对象的方法保存
全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到
6.11.2函数作用域
在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量
7.数组
7.1创建方法
7.1.1使用对象创建
var arr=new Array();
arr[0] = 1;
arr[1] = 2;
//数组元素可以是任意数据类型也可以是对象,函数
arr=["hello",true]
7.1.2使用字面量创建
var arr=[1,2,3]
7.1.3使用构造函数创建
//将要添加的元素作为函数的参数传递
var arr=new Array(10,20);
//创建一个数组只有一个元素10
arr=[10];
//十个元素的数组
var arr2=new Array(10);
7.2数组的方法
1. push()
像数组末尾添加一个或多个元素 ，并返回数组的新长度
arr.push();
2. pop()
删除最后一个元素，并返回其值
arr.pop();
3. unshift()
向开头添加一个或多个元素，数组的索引会自动调整
arr.unshift();
4. shift()
删除数组的第一个元素，并返回其值
arr.shift();
5. concat()
可以连接两个或多个数组，并将其返回
var arr=["swk","zbj","shs"];
var arr2=["hhh","jjj","kkk"];
var result=arr.concat(arr2);
6. join()
将数组转换为一个字符串
不会对原数组造成影响，将转换后结果返回
join（）中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
result=arr.join("@@");
7. reverse()
reverse()反转数组 , 会修改原数组
arr.reverse();
8. sort()
sort()对数组排序 按Unicode编码排序 , 影响原数组, 对数字排序可能出错
可以自己制定规则:我们可以在sort()添加一个回调函数，来指定排序规则
回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
浏览器会根据回调函数的返回值来决定元素的顺序:
如果返回一个大于0的值，则元素会交换位置
如果返回一个小于0的值，则元素位置不变
如果返回一个0，则认为两个元素相等，也不交换位置
arr.sort();
arr.sort(function(a,b){
//升序
return a-b;
//降序
return b-a;
});
console.log(arr);
9. forEach()
forEach()方法需要一个函数作为参数
arr.forEach(function(a,b,c){
console.log(a);
});
回调函数
像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，
我们可以来定义形参，来读取这些内容
浏览器会在回调函数中传递三个参数:
第一个参数，就是当前正在遍历的数组的元素(a)
第二个参数，就是当前正在遍历的元素的索引(b)
第三个参数，就是正在遍历的数组(c)
10. slice()
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
1.截取开始的位置的索引，包含开始索引
2.截取结束的位置的索引，不包含结束索引
var result=arr.slice(0,2);
第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
索引可以传递一个负值，如果传递一个负值，则从后往前计算
-1 倒数第一个
-2 倒数第二个
11. splice()
使用splice()会影响到原数组，会将指定元素从原数组中删除并将被删除的元素作为返回值返回
参数:
第一个，表示开始位置的索引
第二个，表示删除的数量
第三个及以后.....可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
arr.splice(1,0,"jjj");
8.Data对象
//JS中使用Date对象表示时间
var d=new Date();
console.log(d);
//日期格式：月份/日/年 时：分：秒
var d2=new Date("12/03/2019 11:10:30");
console.log(d2);
//getDate()获取几日
//getDay（）获取周几：0表示周日，1表示周一
//getMonth（）获取月份 0-11
//getTime（）获取当前日期时间戳：从格林标准时间1970年1月1日，0时0分0秒 毫秒数 1s=1000毫秒
var result=d2.getTime();
//利用时间戳测试代码执行的性能
//获取当前时间戳
var start=Date.now();
//代码
var end=Date.now();
console.log(end-start+"毫秒");
9.Math对象
Math 和其他对象不同不是构造函数 不用new创建对象，属于工具类，封装了一些数学属性方法
Math.random();//生成0-1之间的随机数
Math.ceil();//向上取整
Math.floor();//向下取整
Math.round();//四舍五入取整
Math.round(Math.random()*x);//生成0-x之间随机数
Math.round(Math.random()*(y-x)+x);//生成x-y之间随机数
Math.max(,,);//获取多个数最大值
Math.min();
Math.abs();//绝对值
Math.pow(x,y);//x的y次幂
Math.sqrt();//开方
.....
10. 字符串方法
字符串长度
var str='hh';
console.log(str.length);
concat()：连接多个字符串 同数组
slice(): 同数组
charAt（）：返回字符串中指定位置的字符 根据索引 通过对象调用
charCodeAt（）：返回字符串中指定位置的字符编码 通过对象调用
str.charAt();
str.charCodeAt();
String.fromCharCode()：根据字符编码获取字符 通过构造函数对象调
var result=String.fromCharCode();
indexof():检索一个字符串是否有指定内容，有则返回第一次出现的索引 无返回-1,第二参数指定开始查找位置
str.indexOf("h",0);
lastIndexOf：从后往前找
substring（）同slice：不同点不能传负值，会自动调整参数位置
split（）：将字符串根据（）里的内容拆分成数组
str="hh,jj,111,sss";
result = str.split(",");//数组, 根据 “，”拆分
console.log(result[0]);
toUpperCase toLowerCase 大小写转换,返回结果
11.包装类
方法和属性能添加给对象，不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时
浏览器会临时使用包装类将其转换为对象，
然后在调用对象的属性和方法调用完以后，
在将其转换为基本数据类型
12.函数对象的方法 call apply
call()和apply()这两个方法都是函数对象的方法，需要通过函数对象来调用
当对函数调用call()和apply()都会调用函数执行
在调用call()和apply()可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行时的this
function fun(){
alert(this.name);
};
var obj1={
name:"swk";
};
var obj2={
name:"shs";
};
fun.call(obj1);
call()方法可以将实参在对象之后依次传递
fun.call(obj,1,2);
apply()方法需要将实参封装到一个数组中统一传递
fun.apply(obj,[2,3]);
this的情况:
1.以函数形式调用时，this永远都是window
2.以方法的形式调用时，this是调用方法的对象
3.以构造函数的形式调用时，this是新创建的那个对象
4.使用call和apply调用时，this是指定的那个对象
13.arguments
在调用函数时，浏览器每次都会传递进两个隐含的参数:
1.函数的上下文对象 this
2.封装实参的对象 arguments
arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度
在调用函数时，我们所传递的实参都会在arguments中保存arguments.length可以用来获取实参的长度
我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦
arguments[0]表示第一个实参
arguments[1] 表示第二个实参
它里边有一个属性叫做callee， 这个属性对应一个函数对象，就是当前正在指向的函数的对象，可以看函数对象的内容
14.正则表达式
1.创建方法
var 变量=new RegExp(“正则表达式”，“匹配模式”) ；
var 变量=/正则表达式/匹配模式；
匹配模式:i 忽略大小写 ，g全局匹配模式
test()：检查是否符合正则
2.正则量词
设置一个内容出现的次数
var reg=new RegExp("a");//是否有a
var reg2=/a|b/;//a或b
var reg3=/[a,b]/; //a或b
var reg3=/[a-z]/; //小写
var reg3=/[A-Z]/; //大写
var reg3=/[A-z]/; //任意字母0
//[^]除了
- {n}出现n次
- {M,N}M~N次
- {M，}M次以上
- +：至少一个
- *：0个或多个
- ？：0/1
- ^：表示开头 与[^]不同
- $：表示结尾
- "."表示单个字符
- \.表示. 转义
- \b单词边界 \bhello\b
- \s空格
- \w任意字母数
注意：只对前面的一个内容起效
3.字符串与正则
split(正则)
search（正则）：检查字符串中是否有指定内容
match（正则）：根据正则提取内容，并封装到数组 默认只提取第一个可以加匹配模式
replace（被替换的内容，新内容）：将指定内容替换为新内容 默认只提取第一个可以加匹配模式
4. 进阶
手机号匹配模式
/^1 [3-9] [0-9]{9}$/
去空格
var str=" dfds ";
str=str.replace(/^\s*|\s*$/g,"")
console.log(str);
15.DOM
15.1 DOM概述
当网页被加载时，浏览器会创建页面的文档对象模型
15.2 DOM文档节点
常用节点分为四类：
- 文档节点：整个HTML文档
- 元素节点：HTML文档中的HTML标签
- 属性节点：元素的属性
- 文本节点：HTML标签中的文本内容
15.3 DOM文档操作
15.3.1 查找 HTML 元素
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素。 |
| document.getElementsByTagName(name) | 通过标签名来查找元素。 |
| document.getElementsByClassName(name) | 通过类名来查找元素。 |
| document.querySelector(CSS选择器) | 通过CSS选择器选择一个元素。 |
| document.querySelectorAll(CSS选择器) | 通过CSS选择器选择多个元素。 |
| document.all | 选择所有元素 |
15.3.2 获取 HTML 的值
| 方法 | 描述 |
|---|---|
| 元素节点.innerText | 获取 HTML 元素的 innerText。 |
| 元素节点.innerHTML | 获取 HTML 元素的 innerHTML。 |
| 元素节点.属性 | 获取 HTML 元素的属性值。 |
| 元素节点.style.样式 | 获取 HTML 元素的行内样式值。 |
| 元素节点.getAttribute(attribute) | 获取 HTML 元素的属性值。 |
获取body标签:
var body=document.getElementsByTagName("body")[0];
通过style属性设置和读取的都是内联样式，无法读取样式表中的样式或者说正在应用的样式，如果想要读取当前正在应用的样式属性我们可以使用元素.currentStyle.样式名来获取元素的当前显示的样式，它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值，但是currentStyle只有IE浏览器支持，其它的浏览器都不支持，
在其它浏览器中可以使用getComputedStyle(box1，null)：需要两个参数
1.要获取样式的元素
2.伪元素
该方法会返回一个对象，对象中封装了当前元素对应的样式可以通过对象。样式名来读取样式
如果获取的样式没有设置，则会获取到真实的值，而不是默认值比如，
没有设置width，它不会获职到auto，而是一个长度
//getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性，因此，我们可以写一个适配各个浏览器的读取元素样式的方法。
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}
else return obj.currentStyle[name];//IE模式
}
15.3.3 修改 HTML 元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建 HTML 元素节点 |
| 父节点.appendChild(element) | 添加 HTML 元素 |
| 父节点.removeChild(element) | 删除 HTML 元素 |
| 子节点.parentNode.removeChild(子节点) | 删除 HTML 元素 |
| 父节点.replaceChild(element) | 替换 HTML 元素 |
| 父节点.insertBefore(新，旧); | 在指定子节点前插入新的子节点 |
15.3.4 元素的其他属性
| 方法 | 描述 |
|---|---|
| clientWidth | 获取元素的可见宽度，包括内容区和内边距 |
| clientHeight | 获取元素的可见高度，包括内容区和内边距 |
| offsetWidth | 获取元素的整个的宽度，包括内容区、内边距和边框 |
| offsetHeight | 获取元素的整个的高度，包括内容区、内边距和边框 |
| offsetParent | 可以用来获职当前元素的定位父元素 |
| offsetLeft | 当前元素相对于其定位父元素的水平偏移量 |
| offsetTop | 当前元素相对于其定位父元素的而直偏移量 |
| scrollLeft | 可以获取水平滚动条滚动的距离 |
| scrollTop | 可以获取乖直滚动条滚动的距离 |
| scrollHeight | 获取元素内部高度，包括不可见部分 |
| scrollWidth | 获取元素内部宽度，包括不可见部分 |
| 元素节点.parentNode | 返回元素的父节点 |
| 元素节点.parentElement | 返回元素的父元素 |
15.4 DOM文档事件
HTML事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
当页面文档加载完成后，输出"Hello, World":
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
console.log("Hello,World");
};
</script>
</head>
<body>
</body>
</html>
15.5 事件的绑定
1.使用对象.事件=function（）{}绑定响应函数时
只能同时为一个元素的一个事件绑定一个相应函数
不能绑定多个，后会覆盖前,因此需要新的操作解决
2.addEventListener()也可以为元素绑定响应函数
参数 1.事件的字符串,不写on
2.回调函数
3.是否在捕获阶段触发事件，需要Boolean，一般为false
它的this时绑定事件的对象
可以同时为一个元素的相同事件绑定多个相应函数 按顺序执行
这个方法不支持IE8及以下的浏览器
3. attachEvent()
在IE8中可以使用attachEvent()来绑定事件
参数：
1.事件的字符串，要on
2.回调函数
这个方法也可以同时为一个事件绑定多个处理函数，
不同的是它是后绑定先执行，执行顺序和addEventListener()相反
4.合并两种方法
//合并两种，更兼容 参数：1.要绑定的对象 2.事件字符串不要on 3.回调函数
function bind(obj,eventStr,callback){
if(obj.addEventListener){
obj.addEventListener(eventStr,callback,false);
}
else{
obj.attachEvent("on"+eventStr,function(){
callback.call(obj);
})
}
}
15.5.1 鼠标绑定
| 属性 | 描述 |
|---|---|
| onclick | 当单击鼠标时运行 |
| onmousedown | 当按下鼠标按钮时运行 |
| onmouseup | 当松开鼠标按钮时运行 |
| onmousemove | 当鼠标指针移动时运行 |
| onscroll | 当滚动元素的滚动条时运行 |
| onmousewheel | 鼠标滚轮滚动时运行：火狐不支持该属性 |
| event.wheelDelta | 可以获取鼠标滚轮滚动的方向 |
| DOMMouseScroll | 鼠标滚轮滚动时运行：火狐支持该属性 |
| event.detail | 在火狐中使用来获取滚动的方向 |
15.5.2 键盘绑定
| 属性 | 描述 |
|---|---|
| onkeydown | 按键被按下运行 |
| onkeyup | 按键被松开运行 |
| keyCode | 获取按键的编码 |
| altKey | 获取alt |
| ctrlKey | 获取ctrl |
| shiftKey | 获取shift |
15.6事件的冒泡
事件的冒泡:
事件的向上传导，当后代元素上的事件被触发时，其祖先元素的同样事件也会触发
事件的委派：
将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件
利用了冒泡，可以减少事件绑定的次数，提高程序性能
event.target表示触发事件的对象
if(event.target.className=="..")就触发
15.7事件的传播
- 捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
- 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
- 冒泡阶段：事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件
16. BOM
16.1概述
浏览器对象模型（BOM）使 JavaScript 有能力与浏览器"对话"。
- Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
- Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
- Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
- History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
- Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。
16.2 Window对象
1. 警告框
alert(" ");
2. 确认框
confirm(" ");
3. 提示框
如果您希望用户在进入页面前输入值，通常会使用提示框。
当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。
prompt("sometext","defaultText");
4. 定时事件
JavaScript 可以在时间间隔内执行，这就是所谓的定时事件
4.1定时器
JS的程序的执行速度是非常非常快的
如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
/*
* setInterval()
* - 定时调用
* - 可以将一个函数，每隔一段时间执行一次
* - 参数：
* 1.回调函数，该函数会每隔一段时间被调用一次
* 2.每次调用间隔的时间，单位是毫秒
*
* - 返回值：
* 返回一个Number类型的数据
* 这个数字用来作为定时器的唯一标识
*/
var num=1;
var timer=setInterval(function(){
count.innerHTML=num++;
if(num==11){
clearInterval(timer);
}
},100);
//关闭计时器 clearInterval();
4.1延时器
var btn = document.getElementById("btn");
btn.onclick = function () {
// 创建延时器
var timer = setTimeout(function () {
console.log("Hello");
}, 3000);
// 清除延时器
// clearTimeout(timer);
16.3 其它窗口方法
1.Windows
- window.open(URL,name,specs,replace) ：打开新的窗口
- window.close() : 关闭当前窗口
2.Navigator对象
Navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器，由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了，一般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent
谷歌浏览器：
-
Mozilla/5.0 (Windows NT 10.0; Win64; x64)
-
AppleWebKit/537.36 (KHTML, like Gecko)
-
Chrome/85.0.4183.83 Safari/537.36
火狐浏览器： -
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:81.0)
-
Gecko/20100101 Firefox/81.0
IE11浏览器： -
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0;
-
.NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR
-
3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
IE10浏览器： -
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0;
-
WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR
-
2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
IE9浏览器： -
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0;
-
WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR
-
2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
IE8浏览器： -
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0;
-
WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR
-
2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
IE7浏览器： -
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0;
-
WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR
-
2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
于是乎，我们就可以实现对浏览器类型的判断：
var ua = navigator.userAgent;
if (/firefox/i.test(ua)) {
alert("你是火狐浏览器");
} else if (/chrome/i.test(ua)) {
alert("你是谷歌浏览器");
} else if (/msie/i.test(ua)) {
alert("你是IE5-IE10浏览器");
} else if ("ActiveXObject" in window) {
alert("你是IE11浏览器");
}
3.Location对象
// Location封装了浏览器地址栏信息
// 直接打印location，会获取当前页面完整路径
/*
如果直接将location修改为一个完整路径或相对路径
页面会自动跳转到，并生成历史记录
*/
window.onload=function(){
//alert(location);
location="http://www.baidu.com";
}
/*
* assign()
* - 用来跳转到其他的页面，作用和直接修改location一样
*/
//location.assign("http://www.baidu.com");
/*
* reload()
* - 用于重新加载当前页面，作用和刷新按钮一样
* - 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
*/
//location.reload(true);
/*
* replace()
* - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
* 不会生成历史记录，不能使用回退按钮回退
*/
location.replace("01.BOM.html");
4.History对象
//History对象可以用来操作浏览器向前向后翻页
//length属性可以获取当前访问的页面数量
//history.length
history.back();//回退前一个页面
history.forward();//跳转下一个页面
history.go();//可以跳转到指定页面 需要整数作为参数 1：向前跳1 ，-1：向后跳1
5.Screen对象
Screen 对象包含有关客户端显示屏幕的信息。
7206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
