文章目录
JavaScript简介
- JavaScript负责页面中的的行为。
- 它是一门运行在浏览器端的脚本语言。
- 它是一个轻量级,但功能强大的编程语言
js的编写位置
- 编写到标签的指定属性中
<button onclick="alert('hello');">按钮</button>
<a href="javascript:alert('hello');">超链接</a>
- 编写到script标签中
<script type="text/javascript">
//编写js代码
</script>
- 编写到外部的js文件中,通过标签将其引入
注意:script标签一旦用于引入外部文件了,就不能在编写代码了,即使编写了浏览器也会忽略 ,如需要则可以在创建一个新的script标签用于编写内部代码
<script type="text/javascript" src="js文件路径"></script>
基本的语法
注释:
- 单行注释
//这里的内容不会被执行
- 多行注释
/*
这里的内容同样不会被执行
*/
JS严格区分大小写
JS中会自动忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化
输出语句
alert("要输出的内容");
该语句会在浏览器窗口中弹出一个警告框
document.write("要输出的内容");
该语句会将内容写到body标签中,并在页面中显示
console.log("要输出的内容");
该语句会将内容打印到控制台
字面量和变量
字面量
字面量实际上就是一些固定的值,比如 1 2 3.5 true false null NaN “hello” 等等…
字面量都是不可以改变的
由于字面量不是很方便使用,所以在JS中很少直接使用字面量
变量
变量是用于存储信息的"容器"(即可以用来保存字面量,使用起来比较方便)
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
var 关键词来声明变量
var a
变量赋值
a=1
声明和赋值同时进行
var a=5
标识符
在JS中所有的可以自主命名的内容,都可以认为是一个标识符,
比如:变量名、函数名、属性名等…
- 标识符中可以含有字母、数字、_、$
- 标识符不能以数字开头
- 标识符不能是JS中的关键字和保留字
- 标识符一般采用驼峰命名法:xxxYyyZzz
数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。
注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。
基本类型
字符串
字符串是存储字符(比如 “Bill Gates”)的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号:
var carname="Volvo XC60";
var carname='Volvo XC60';
Number 数值
JS中所有的整数和浮点数都是Number类型
特殊的数字:
- Infinity 正无穷
- Infinity 负无穷
- NaN 非法数字(Not A Number)
Boolean 布尔值
布尔值主要用来进行逻辑判断,只要两个值
- true 逻辑的真
- false 逻辑的假
Null 空值
空值专门用来表示为空的对象,Null类型的值只有一个
null
- 用来初始化一个对象
- 垃圾回收
Undefined 未定义
该类型只有一个undefined值
如果声明一个变量但是没有为变量赋值此时变量的值就是undefined
引用类型
Object 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"John", lastname:"Doe", id:5566}
//另一种写法,也是经常使用
var person={
firstname : "John",
lastname : "Doe",
id : 5566
}
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
类型转换
类型转换就是指将其他的数据类型,转换为String Number 或 Boolean
转换为String
1.调用被转换数据的toString()方法
var a = 12
a = a.toString()
注:这个方法不适用于null和undefined
2.调用String()函数
var a = 12
a = String(a)
原理:对于Number Boolean String都会调用他们的toString()方法来将其转换为字符串,对于null值,直接转换为字符串"null"。对于undefined直接转换为字符串"undefined"
3.为任意的数据类型+""
var a = true
a = a + ""
转换为Number
1.调用Number()函数
var a = "123"
a = Number(a)
转换的情况:
- 字符串 > 数字
如果字符串是一个合法的数字,则直接转换为对应的数字
如果字符串是一个非法的数字,则转换为NaN
如果是一个空串或纯空格的字符串,则转换为0 - 布尔值 > 数字
true转换为1
false转换为0 - 空值 > 数字
null转换为0 - 未定义 > 数字
undefined 转换为NaN
2.调用parseInt()或parseFloat()
这两个函数专门用来将一个字符串转换为数字的
parseInt() 可以将一个字符串中的有效的整数位提取出来,并转换为Number
var a = "123.456px"
a = parseInt(a) //123
如果需要可以在parseInt()中指定一个第二个参数,来指定进制。
parseFloat()可以将一个字符串中的有效的小数位提取出来,并转换为Number
var a = "123.456px"
a = parseFloat(a) //123.456
3.使用一元的“+”来进行转换
var a = "123"
a = +a
原理:和Number()函数一样
转换为布尔值
1.使用Boolean()函数
var s = "holle"
s = Boolean(s) //true
转换的情况 :
-
字符串 > 布尔
除了空串其余全是true -
数值 > 布尔
除了0和NaN其余的全是true -
null、undefined > 布尔
都是false -
对象 > 布尔
都是true
2.为任意的数据类型做两次非运算,即可将其转换为布尔值
var a = "hello"
a = !!a //true
基础语法
运算符
- 运算符也称为操作符
- 通过运算符可以对一个或多个值进行运算或操作
typeof运算符
用来检查一个变量的数据类型
语法:typeof 变量
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
算数运算符
- + 对两个值进行加法运算并返回结果
- - 对两个值进行减法运算并返回结果
- * 对两个值进行乘法运算并返回结果
- / 对两个值进行除法运算并返回结果
- % 对两个值进行取余运算并返回结果
除了加法以外,对非Number类型的值进行运算时,都会先转换为Number然后在做运算。
任何值和字符串做加法,都会先转换为字符串,然后再拼串
一元运算符
一元运算符只需要一个操作数
1.一元的+
相当于正号,不会对Number数值产生任何影响,但是可以将一个非数字转换为数字
var a = true
a = +a
2.一元的-
相当于负号,可以对一个数字进行符号位取反
var a = 5
a = -a
3.自增
自增可以使变量在原值的基础上自增1
无论是a++还是++a都会使a自增1,但是a++的值和++a的值不同
- ++a的值是变量的新值(即自增后的值)
- a++的值是变量的原值(即自增前的值)
4.自减
自减可以使变量在原值的基础上自减1
无论是a–还是–a都会使a自减1,但是a–的值和–a的值不同
- –a的值是变量的新值(即自减后的值)
- a–的值是变量的原值(即自减前的值)
逻辑运算符
1. !
非运算可以对一个布尔值进行取反,可以对非布尔值取两次反转化为布尔值
2. &&
&&可以对符号两侧的值进行与运算
只有两端的值都为true时,才会返回true。只要有一个false就会返回false。
规则:- 如果第一个值为false,则返回第一个值
- 如果第一个值为true,则返回第二个值
3. | |
| |可以对符号两侧的值进行或运算
只有两端都是false时,才会返回false。只要有一个true,就会返回true。
规则:
- 如果第一个值为true,则返回第一个值
- 如果第一个值为false,则返回第二个值
赋值运算符
1. =
可以将符号右侧的值赋值给左侧变量
var a=5
2. +=
a += 5 相当于 a = a+5
3. -=
a -= 5 相当于 a = a-5
4. *=
a *= 5 相当于 a = a*5
5. /=
a /= 5 相当于 a = a/5
6. %=
a %= 5 相当于 a = a%5
关系运算符
关系运算符用来比较两个值之间的大小关系的
- > 大于,判断两个值谁大
- >= 大于等于,判断两个值谁大或者相等
- < 小于,判断两个值谁小
- <= 小于等于,判断两个值谁次奥或者相等
规则
- 如果关系成立则返回true,关系不成立则返回false。
- 如果比较的两个值是非数值,会将其转换为Number然后再比较。
- 如果比较的两个值都是字符串,此时会比较字符串的Unicode编码,而不会转换为Number。
相等运算符
1. ==
判断左右两个值是否相等,如果相等返回true,如果不等返回false 。
如果对不同的类型进行比较,会将其转换为相同的类型然后再比较。
2. !=
判断左右两个值是否不等,如果不等则返回true,如果相等则返回false。也会自动做类型转换。
3. ===
判断左右两个值是否全等,如果全等则返回true,如果不全等等则返回false。
如果对不同的类型进行比较,不会做类型转换,因为全等的判断值和类型都要一致。
4. !==
判断左右两个值是否不全等,如果不全等则返回true,如果全等则返回false。和全等一样不会做类型转换。
特殊的值:
null和undefined
null == undefined 会返回true。
但是 null === undefined 会返回false。
NaN
NaN不与任何值相等,包括它自身 NaN == NaN //false
判断一个值是否是NaN
使用isNaN()函数
三元运算符
1. ?:
语法:条件表达式?语句1:语句2;
执行流程:
先对条件表达式求值判断,
- 如果判断结果为true,则执行语句1,并返回执行结果
- 如果判断结果为false,则执行语句2,并返回执行结果
流程控制语句
程序都是自上向下的顺序执行的,
通过流程控制语句可以改变程序执行的顺序,或者反复的执行某一段的程序。
条件分支语句
1. if语句
条件语句用于基于不同的条件来执行不同的动作。
语法1:
if(条件表达式){
语句...
}
if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
语法2:
if(条件表达式){
语句...
}else{
语句...
}
if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
语法3:
if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else{
语句...
}
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
swich语句
switch 语句用于基于不同的条件来执行不同的动作。
语法:
switch(条件表达式){
case 表达式:
语句...
break
case 表达式:
语句...
break
case 表达式:
语句...
break
default:
语句...
break
}
switch 语句 - 使用该语句来选择多个代码块之一来执行。
循环语句
循环语句可以将代码块执行指定的次数。
for循环
语法:
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
- 语句 1 (代码块)开始前执行
- 语句 2 定义运行循环(代码块)的条件
- 语句 3 在循环(代码块)已被执行之后执行
for/In 循环
for/in 语句循环遍历对象的属性
var person={fname:"Bill",lname:"Gates",age:56}
for (x in person) // x 为属性名
{
txt=txt + person[x]
}
while 循环
语法:
while (条件)
{
需要执行的代码
}
while 循环会在指定条件为真时循环执行代码块。
do/while 循环
语法:
do
{
需要执行的代码
}
while (条件);
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。
对象(Object)
对象是一种引用数据类型,在对象中可以保存多个不同数据类型的属性
对象的分类:
- 内建对象
-
由ES标准中定义的对象,在任何的ES的实现中都可以使用
-
比如:Math String Number Boolean Function Object…
- 宿主对象
- 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
- 比如 BOM DOM
- 自定义对象
- 由开发人员自己创建的对象
如何创建对象?
方式1:
var obj = new Object()
方式2:
var obj = {}
向对象中添加属性
语法:
对象.属性名 = 属性值;
对象["属性名"] = 属性值;
属性值也可以任意的数据类型。
读取对象中的属性
语法:
对象.属性名
对象["属性名"]
如果读取一个对象中没有的属性,它不会报错,而是返回一个undefined
删除对象中的属性
语法:
delete 对象.属性名
delete 对象["属性名"]
遍历
使用in检查对象中是否含有指定属性
语法:
"属性名" in 对象
如果在对象中含有该属性,则返回true
如果没有则返回false
var obj = {'0':'bob','1':'tom','2':'lisa'};
for(var i in obj) {
console.log(i,"-",obj[i]);
}
使用对象字面量,在创建对象时直接向对象中添加属性
语法:
var obj = {
属性名:属性值,
属性名:属性值,
属性名:属性值,
属性名:属性值
}
基本数据类型的数据,变量是直接保存的它的值。
变量与变量之间是互相独立的,修改一个变量不会影响其他的变量。
引用数据类型的数据,变量是保存的对象的引用(内存地址)。
如果多个变量指向的是同一个对象,此时修改一个变量的属性,会影响其他的变量。
比较两个变量时,对于基本数据类型,比较的就是值, 对于引用数据类型比较的是地址,地址相同才相同
函数(Function)
函数的概念
- 函数也是一个对象,也具有普通对象的功能
- 函数中可以封装一些代码,在需要的时候可以去调用函数来执行这些代码
- 使用typeof检查一个函数时会返回function
如何创建函数?
方式1:函数声明
function 函数名([形参1,形参2...形参n]){
语句...
}
方式2:函数表达式
var 函数名 = function([形参1,形参2...形参N]){
语句...
}
调用函数
语法:
函数对象([实参1,实参2...实参N])
立即执行函数
函数定义完,立即被调用,这种函数叫做立即执行函数
立即执行函数往往只会执行一次
(function(a,b){
console.log("a = "+a)
console.log("b = "+b)
})(12,34)
形参和实参
- 形参:形式参数
- 定义函数时,可以在()中定义一个或多个形参,形参之间使用,隔开
- 定义形参就相当于在函数内声明了对应的变量但是并不赋值
- 形参会在调用时才赋值。
- 实参:实际参数
-
调用函数时,可以在()传递实参,传递的实参会赋值给对应的形参,
-
调用函数时JS解析器不会检查实参的类型和个数,可以传递任意数据类型的值。
如果实参的数量大于形参,多余实参将不会赋值 如果实参的数量小于形参,则没有对应实参的形参将会赋值undefined
返回值,就是函数执行的结果。
使用return 来设置函数的返回值。
可以通过一个变量来接收返回值
一旦执行到return语句时,函数将会立刻退出。
如果return后不跟值,或者是不写return则函数默认返回undefined。
break、continue和return
- break :退出循环
- continue :跳过当次循环
- return :退出函数
方法(method)
可以将一个函数设置为一个对象的属性,
当一个对象的属性是一个函数时, 我们称这个函数是该对象的方法。
对象.方法名()
函数名()
函数的属性和方法
call()
apply()
这两个方法都是函数对象的方法需要通过函数对象来调用
通过两个方法可以直接调用函数,并且可以通过第一个实参来指定函数中this
不同的是call是直接传递函数的实参而apply需要将实参封装到一个数组中传递
arguments
arguments是一个类数组元素,它用来封装函数执行过程中的实参
所以即使不定义形参,也可以通过arguments来使用实参
this(调用函数的那个对象)
this是函数的上下文对象,根据函数的调用方式不同会指向不同的对象
- 以函数的形式调用时,this是window
- 以方法的形式调用时,this是调用方法的对象
- 以构造函数的形式调用时,this是新建的那个对象
- 使用call和apply调用时,this是指定的那个对象
- 在全局作用域中this代表window
作用域
作用域简单来说就是一个变量的作用范围。
1.全局作用域
- 直接在script标签中编写的代码都运行在全局作用域中
- 全局作用域在打开页面时创建,在页面关闭时销毁。
- 全局作用域中有一个全局对象window,window对象由浏览器提供,
- 可以在页面中直接使用,它代表的是整个的浏览器的窗口。
- 在全局作用域中创建的变量都会作为window对象的属性保存
- 在全局作用域中创建的函数都会作为window对象的方法保存
- 在全局作用域中创建的变量和函数可以在页面的任意位置访问。
- 在函数作用域中也可以访问到全局作用域的变量。
- 尽量不要在全局中创建变量,减少一定内存使用
2.函数作用域
- 函数作用域是函数执行时创建的作用域,每次调用函数都会创建一个新的函数作用域。
- 函数作用域在函数执行时创建,在函数执行结束时销毁。
- 在函数作用域中创建的变量,不能在全局中访问。
- 当在函数作用域中使用一个变量时,它会先在自身作用域中寻找, 如果找到了则直接使用,如果没有找到则到上一级作用域中寻找, 如果找到了则使用,找不到则继续向上找,直到找到全局作用域,如果全局作用域中也没有,则返回undefined。
变量的声明提前
- 在全局作用域中,使用var关键字声明的变量会在所有的代码执行之前被声明,但是不会赋值。 所以我们可以在变量声明前使用变量。但是不使用var关键字声明的变量不会被声明提前。
- 在函数作用域中,使用var关键字声明的变量会在函数所有的代码执行前被声明, 如果没有使用var关键字声明变量,则变量会变成全局变量 。
函数的声明提前
- 在全局作用域中,使用函数声明创建的函数,会在所有的代码执行之前被创建,也就是我们可以在函数声明前去调用函数,但是使用函数表达式创建的函数不行。
- 在函数作用域中,使用函数声明创建的函数,会在所有的函数中的代码执行之前就被创建好了。
构造函数
构造函数是专门用来创建对象的函数
一个构造函数我们也可以称为一个类
通过一个构造函数创建的对象,我们称该对象时这个构造函数的实例
通过同一个构造函数创建的对象,我们称为一类对象
构造函数就是一个普通的函数,只是他的调用方式不同,
如果直接调用,它就是一个普通函数
如果使用new来调用,则它就是一个构造函数
例子:
function Person(name , age , gender){
this.name = name
this.age = age
this.gender = gender
this.sayName = function(){
alert(this.name)
}
}
构造函数的执行流程:
1.创建一个新的对象
2.将新的对象作为函数的上下文对象(this)
3.执行函数中的代码
4.将新建的对象返回
instanceof 可以用来检查一个对象是否是一个类的实例
语法:
对象 instanceof 构造函数
如果该对象时构造函数的实例,则返回true,否则返回false
Object是所有对象的祖先,所以任何对象和Object做instanceof都会返回true
原型(prototype)
创建一个函数以后,解析器都会默认在函数中添加一个prototype
prototype属性指向的是一个对象,这个对象我们称为原型对象。
当函数作为构造函数使用,它所创建的对象中都会有一个隐含的属性执行该原型对象。
这个隐含的属性可以通过对象.__proto__来访问。
我们可以将对象中共有的属性和方法统一添加到原型对象中, 这样我们只需要添加一次,就可以使所有的对象都可以使用。
当我们去访问对象的一个属性或调用对象的一个方法时,它会先自身中寻找, 如果在自身中找到了,则直接使用。 如果没有找到,则去原型对象中寻找,如果找到了则使用, **如果没有找到,则去原型的原型中寻找,**依此类推。直到找到Object的原型为止,Object的原型的原型为null,
如果依然没有找到则返回undefined
hasOwnProperty()
这个方法可以用来检查对象自身中是否含有某个属性
语法:对象.hasOwnProperty("属性名")
toString方法
当我们直接在页面中打印一个对象时,事件上是输出的对象的toString()方法的返回值
如果我们希望在输出对象时不输出[object Object],可以为对象添加一个toString()方法
//修改Person原型的toString
Person.prototype.toString = function(){
return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
}
垃圾回收(GC)
就像人生活的时间长了会产生垃圾一样,程序运行过程中也会产生垃圾 ,这些垃圾积攒过多以后,会导致程序运行的速度过慢, 所以我们需要一个垃圾回收的机制,来处理程序运行过程中产生垃圾。
当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象, 这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢, 所以这种垃圾必须进行清理。
在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁,我们不需要也不能进行垃圾回收的操作 。我们需要做的只是要将不再使用的对象设置null即可
数组(Array)
什么是数组?
数组对象是使用单独的变量名来存储一系列的值。
如果你有一组数据(例如:车名字),存在单独变量如下所示:
var car1="Saab";
var car2="Volvo";
var car3="BMW";
然而,如果你想从中找出某一辆车?并且不是3辆,而是300辆呢?这将不是一件容易的事!
最好的方法就是用数组。
数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。
数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。
数组的操作:
创建数组
var arr = new Array()
var arr = []
向数组中添加元素
arr[0] = 123
arr[1] = "hello"
创建数组时直接添加元素
var arr = [元素1,元素2....元素N]
var arr = [123,"hello",true,null]
访问数组
var name=myCars[0]
myCars[0]="Opel"
获取和修改数组的长度
获取长度:
数组.length
length获取到的是数组的最大索引+1
对于连续的数组,length获取到的就是数组中元素的个数
修改数组的长度
数组.length = 新长度
如果修改后的length大于原长度,则多出的部分会空出来
如果修改后的length小于原长度,则原数组中多出的元素会被删除
向数组的最后添加元素
数组[数组.length] = 值;
数组的方法
方法 | 描述 |
---|---|
push() | 用来向数组的末尾添加一个或多个元素,并返回数组新的长度 |
pop() | 用来删除数组的最后一个元素,并返回被删除的元素 |
unshift() | 向数组的开头添加一个或多个元素,并返回数组的新的长度 |
shift() | 删除数组的开头的一个元素,并返回被删除的元素 |
reverse() | 可以用来反转一个数组,它会对原数组产生影响 |
concat() | 可以连接两个或多个数组,它不会影响原数组,而是新数组作为返回值返回 |
indexOf() | 搜索数组中的元素,并返回它所在的位置。 |
reverse() | 反转数组的元素顺序。 |
slice() | 选取数组的一部分,并返回一个新数组。 |
splice() | 从数组中添加或删除元素。 |
slice(sart,[end])
可以从一个数组中截取指定的元素
该方法不会影响原数组,而是将截取到的内容封装为一个新的数组并返回
参数:
1.截取开始位置的索引(包括开始位置)
2.截取结束位置的索引(不包括结束位置)
第二个参数可以省略不写,如果不写则一直截取到最后
参数可以传递一个负值,如果是负值,则从后往前数
splice()
可以用来删除数组中指定元素,并使用新的元素替换
该方法会将删除的元素封装到新数组中返回
参数:
1.删除开始位置的索引
2.删除的个数
3.三个以后,都是替换的元素,这些元素将会插入到开始位置索引的前边
join([splitor])
可以将一个数组转换为一个字符串
参数:
需要一个字符串作为参数,这个字符串将会作为连接符来连接数组中的元素
如果不指定连接符则默认使用,
遍历数组
遍历数组就是将数组中元素都获取到
一般情况我们都是使用for循环来遍历数组
for(var i=0 ; i<arr.length ; i++){
//arr[i]
}
使用forEach()方法来遍历数组(不兼容IE8)
数组.forEach(function(value , index , obj){
})
forEach()方法需要一个回调函数作为参数, 数组中有几个元素,回调函数就会被调用几次, 每次调用时,都会将遍历到的信息以实参的形式传递进来。
我们可以定义形参来获取这些信息。
value:正在遍历的元素
index:正在遍历元素的索引
obj:被遍历对象
Date
日期的对象,在JS中通过Date对象来表示一个时间
创建一个当前的时间对象
var d = new Date()
创建一个指定的时间对象
var d = new Date("月/日/年 时:分:秒")
方法:
方法 | 描述 |
---|---|
getDate() | 当前日期对象是几日(1-31) |
getDay() | 返回当前日期对象时周几(0-6) |
getMonth() | 返回当前日期对象的月份(0-11) |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getTime() | 返回当前日期对象的时间戳 时间戳,指的是从1970年月1日 0时0分0秒,到现在时间的毫秒数 计算机底层保存时间都是以时间戳的形式保存的。 |
Date.now() | 可以获取当前代码执行时的时间戳 |
Math
Math属于一个工具类,它不需要我们创建对象,它里边封装了属性运算相关的常量和方法
我们可以直接使用它来进行数学运算相关的操作
方法:
方法 | 描述 |
---|---|
Math.PI | 常量,圆周率 |
Math.abs() | 绝对值运算 |
Math.ceil() | 向上取整 |
Math.floor() | 向下取整 |
Math.round() | 四舍五入取整 |
Math.random() | 生成一个01之间的随机数 |
Math.round(Math.random()*(y-x)+x) | 生成一个xy之间的随机数 |
Math.pow(x,y) | 求x的y次幂 |
Math.sqrt() | 对一个数进行开方 |
Math.max() | 求多个数中最大值 |
Math.min() | 求多个数中的最小值 |
字符串的相关的属性和方法
属性/方法 | 描述 |
---|---|
length | 获取字符串的长度 |
charAt() | 根据索引获取指定的字符 |
charCodeAt() | 根据索引获取指定的字符编码 |
String.fromCharCode() | 根据字符编码获取字符 |
indexOf() | 从一个字符串中检索指定内容,如果找到该内容,则会返回其第一次出现的索引,如果没有找到则返回-1。 可以指定一个第二个参数,来表示开始查找的位置。从前向后找 |
lastIndexOf() | 从一个字符串中检索指定内容,如果找到该内容,则会返回其第一次出现的索引,如果没有找到则返回-1。 可以指定一个第二个参数,来表示开始查找的位置。从后向前找 |
toLowerCase() | 将字符串转换为小写并返回 |
toUpperCase() | 将字符串转换为大写并返回 |
slice(start,[end])
可以从一个字符串中截取指定的内容,并将截取到内容返回,不会影响原变量
参数:
第一个:截取开始的位置(包括开始)
第二个:截取结束的位置**(不包括结束)**
可以省略第二个参数,如果省略则一直截取到最后
可以传负数,如果是负数则从后往前数
substr()
和slice()基本一致,不同的是它第二个参数不是索引,而是截取的数量
substring()
和slice()基本一致,不同的是它不能接受负值作为参数,如果设置一个负值,则会自动修正为0,
substring()中如果第二个参数小于第一个,自动调整位置*
正则表达式
正则用来定义一些字符串的规则,程序可以根据这些规则来判断一个字符串是否符合规则,
也可以将一个字符串中符合规则的内容提取出来。
创建正则表达式
var reg = new RegExp("正则","匹配模式")
语法:
匹配模式:
- i:忽略大小写(ignore)
- g:全局匹配模式(默认为1次)
正则语法:
- | 或
- [] 或
- [^ ] 除了
- [a-z] 小写字母
- [A-Z] 大写字母
- [A-z] 任意字母,
- [0-9] 任意数字
元符号:
转义 | 描述 |
---|---|
\. | 来表示. |
\\ | 表示\ |
\w | 任意字母、数字、_ [A-z0-9_] |
\W | 除了字母、数字、_ [ ^A-z0-9_] |
\d | 任意的数字 [0-9] |
\D | 除了数字 [ ^0-9] |
\s | 空格 |
\S | 除了空格 |
\b | 单词边界 |
\B | 除了单词边界 |
量词
通过量词可以设置一个内容出现的次数 (只对前面的内容起作用)
- {n} 正好出现n次
- {m,n} 出现mn次
- {m,} m次以上
- +至少一个,相当于{1,}
- *个或多个,相当于{0,}
- ? 0个或1个,相当于{0,1}
边界表达式
^:正则开始
$:正则结束 :
reg = /^a/;
reg = /b$/;
正则表达相关方法
test()
可以用来检查一个字符串是否符合正则表达式
如果符合返回true,否则返回false
去掉两端的空格:
var s = " f afa ";
s = s.replace(/^\s*|\s*$/g,"");
split()
可以根据指定内容将一个字符串拆分为一个数组
参数:
需要一个字符串作为参数,将会根据字符串去拆分数组
可以接收一个正则表达式,此时会根据正则表达式去拆分数组
match()
可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
默认情况下我们的match只会找到第一个符合要求的内容,找到以后就停止检索
我们可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式,且顺序无所谓
match()会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果
replace()
可以将字符串中指定内容替换为新的内容 (默认替换第一个)
参数:
1.被替换的内容,可以接受一个正则表达式作为参数
2.新的内容 ,空串则为删除""
search()
可以搜索字符串中是否含有指定内容
如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回1
它可以接受一个正则表达式作为参数,然后会根据正则表达式去检索字符串
serach()只会查找第一个,即使设置全局匹配也没用
DOM
文档对象模型(Document Object Model ),通过DOM可以来任意来修改网页中各个内容
- 文档指的是网页,一个网页就是一个文档
- 对象指将网页中的每一个节点都转换为对象 ,转换完对象以后,就可以以一种纯面向对象的形式来操作网页
- 模型用来表示节点和节点之间的关系,方便操作页面
节点(Node)
节点是构成网页的最基本的单元,网页中的每一个部分都可以称为是一个节点
虽然都是节点,但是节点的类型却是不同的
- 文档节点 (Document),代表整个网页
- 元素节点(Element),代表网页中的标签
- 属性节点(Attribute),代表标签中的属性
- 文本节点(Text),代表网页中的文本内容
DOM操作
DOM查询
在网页中浏览器已经为我们提供了document对象,它代表的是整个网页,它是window对象的属性,可以在页面中直接使用。
document查询方法:
根据元素的id属性查询一个元素节点对象:
document.getElementById(“id属性值”);
根据元素的name属性值查询一组元素节点对象:
document.getElementsByName(“name属性值”);
根据标签名来查询一组元素节点对象:
document.getElementsByTagName(“标签名”);
读取元素的属性:
语法:元素.属性名
ele.name
ele.id
ele.value
ele.className
注意:class属性不能采用这种方式, 读取class属性时需要使用 元素.className
修改元素的属性:
语法:元素.属性名 = 属性值
innerHTML
使用该属性可以获取或设置元素内部的HTML代码
事件(Event)
事件指的是用户和浏览器之间的交互行为。比如:点击按钮、关闭窗口、鼠标移动…
我们可以为事件来绑定回调函数来响应事件。
绑定事件的方式:
方式1:可以在标签的事件属性中设置相应的JS代码
<button onclick="js代码">按钮</button>
方式2:可以通过为对象的指定事件属性设置回调函数的形式来处理事件
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn")
btn.onclick = function(){
alter("我是一个按钮")
}
</script>
文档的加载
浏览器在加载一个页面时,是按照自上向下的顺序加载的,加载一行执行一行。
如果将js代码编写到head标签里或者页面的都没DOM对象之前,当代码执行时,页面中的DOM对象还没有加载,此时将会无法正常获取到DOM对象,导致DOM操作失败。
解决方式1:
将js代码编写到要操作的DOM对象后面或者body标签的下面
<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn")
btn.onclick = function(){
alter("我是一个按钮")
};
</script>
</body>
解决方式2:
将js代码编写到window.onload = function(){}中
window.onload 对应的回调函数会在整个页面加载完毕以后才执行, 所以可以确保代码执行时,DOM对象已经加载完毕了
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alter("我是一个按钮")
}
}
</script>
DOM查询
通过具体的元素节点来查询
元素.getElementsByTagName()
通过标签名查询当前元素的指定后代元素
元素.childNodes
获取当前元素的所有子节点
childNodes属性会获取包括文本节点在内的所有节点 ,DOM标签标签间空白也会当成文本节点
注意:在IE8及以下的浏览器中,不会将空白文本当成子节点
用法 | 描述 |
---|---|
.children | 获取当前元素的所有子元素 |
.firstChild | 获取当前元素的第一个子节点,会获取到空白的文本子节点 |
.lastChild | 获取当前元素的最后一个子节点 |
.parentNode | 获取当前元素的父元素 |
.previousSibling | 获取当前元素的前一个兄弟节点 |
.previousElementSibling | 获取前一个兄弟元素,IE8及以下不支持 |
.nextSibling | 获取当前元素的后一个兄弟节点 |
.firstElementChild | 获取当前元素的第一个子元素 ,不支持IE8及以下的浏览器, |
innerHTML和innerText
这两个属性并没有在DOM标准定义,但是大部分浏览器都支持这两个属性
两个属性作用类似,都可以获取到标签内部的内容,
不同是innerHTML会获取到html标签,而innerText会自动去除标签
document对象的其他的属性和方法
属性 | 描述 |
---|---|
document.all | 获取页面中的所有元素,相当于document.getElementsByTagName("*"); |
document.documentElement | 获取页面中html根元素 |
document.body | 获取页面中的body元素 |
document.getElementsByClassName() | 根据元素的class属性值查询一组元素节点对象, 不支持IE8及以下的浏览器 |
document.querySelector() | 根据CSS选择器去页面中查询一个元素 如果匹配到的元素有多个,则它会返回查询到的第一个元素 |
document.querySelectorAll() | 根据CSS选择器去页面中查询一组元素 |
DOM修改
document.createElement(“TagName”)
可以用于创建一个元素节点对象,
document.createTextNode(“textContent”)
可以根据文本内容创建一个文本节点对象
父节点.appendChild(子节点)
向父节点中添加指定的子节点
父节点.insertBefore(新节点,旧节点)
将一个新的节点插入到旧节点的前边
父节点.replaceChild(新节点,旧节点)
使用一个新的节点去替换旧节点
父节点.removeChild(子节点)
删除指定的子节点
推荐方式:子节点.parentNode.removeChild(子节点)
<!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>
<style type="text/css">
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
text-align: left;
}
#btnList {
float: left;
}
#total {
width: 450px;
float: left;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float: left;
}
.inner {
width: 400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
</style>
<script>
window.onload = function () {
//构建一个函数
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
// 1.创建一个"广州节点,添加到#city下"
myClick("btn01", function () {
// 创建li节点
var li = document.createElement("li")
// 创建li的文本节点
var gztext = document.createTextNode("广州")
// 将gztext设置为li的子节点
li.appendChild(gztext)
// 获取city
var city = document.getElementById("city")
// 将li设置为city的子节点
city.appendChild(li)
})
// 2.将"广州"节点插入到#bj前面
myClick("btn02", function () {
// 创建li节点
var li = document.createElement("li")
// 创建li的文本节点
var gztext = document.createTextNode("广州")
// 将gztext设置为li的子节点
li.appendChild(gztext)
//获取北京
var bj = document.getElementById("bj")
// 获取city
var city = document.getElementById("city")
// 将li插入到bj前面
city.insertBefore(li, bj)
})
//3.使用"广州"节点替换bj节点
myClick("btn03", function () {
// 创建li节点
var li = document.createElement("li")
// 创建li的文本节点
var gztext = document.createTextNode("广州")
// 将gztext设置为li的子节点
li.appendChild(gztext)
//获取北京
var bj = document.getElementById("bj")
// 获取city
var city = document.getElementById("city")
// 广州节点替换北京节点
city.replaceChild(li, bj)
})
// 4.删除北京节点
myClick("btn04", function () {
/*
//获取北京
var bj = document.getElementById("bj")
// 获取city
var city = document.getElementById("city")
// 删除北京节点
city.removeChild(bj)
*/
//获取北京
var bj = document.getElementById("bj")
// 删除北京节点
bj.parentNode.removeChild(bj)
})
// 5.读取city内的html代码
myClick("btn05", function () {
// 获取city
var city = document.getElementById("city")
alert(city.innerHTML)
})
//6.设置bj的Html代码
myClick("btn06", function () {
//获取北京
var bj = document.getElementById("bj")
// 将北京改为陆丰
bj.innerHTML = "陆丰"
})
//7.创建一个"广州"节点添加到city下
myClick("btn07", function () {
// 创建li节点
var li = document.createElement("li")
//设置li的html代码
li.innerHTML="广州"
// 获取city
var city =document.getElementById("city")
//将li设置为city的子节点
city.appendChild(li)
})
}
</script>
<body>
<div id="total">
<div class="inner">
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">1、创建一个"广州"节点,添加到#city下</button></div>
<div><button id="btn02">2、将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">3、使用"广州"节点替换#bj节点</button></div>
<div><button id="btn04">4、删除#bj节点</button></div>
<div><button id="btn05">5、读取#city内的HTML代码</button></div>
<div><button id="btn06">6、设置#bj内的HTML代码</button></div>
<div><button id="btn07">7、创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>
DOM对CSS的操作
读取和修改内联样式
使用style属性来操作元素的内联样式
读取内联样式
语法:元素.style.样式名
注意:如果样式名中带有-,则需要将样式名修改为驼峰命名法将-去掉,-后的字母改大写
比如:background-color > backgroundColor
border-width > borderWidth
修改内联样式
语法:元素.style.样式名 = 样式值
通过style修改和读取的样式都是内联样式,由于内联样式的优先级比较高, 所以我们通过JS来修改的样式,往往会立即生效, 但是如果样式中设置了!important,则内联样式将不会生效。
读取元素的当前样式
正常浏览器
使用getComputedStyle()
这个方法是window对象的方法,返回一个对象,这个对象中保存着当前元素生效样式
参数:
第1个:要获取样式的元素
第2个:可以传递一个伪元素,默认传null
获取元素的宽度
getComputedStyle(box , null)["width"];
通过该方法读取到样式都是只读的不能修改
IE8
使用currentStyle
语法: 元素.currentStyle.样式名
box.currentStyle["width"]
通过这个属性读取到的样式是只读的不能修改
实现兼容性
/*
* 定义一个函数,用来获取指定元素的当前的样式
* 参数:
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj , name){
//判断浏览器是否存在window.getComputedStyle,如果有则调用getComputedStyle(obj , null)[name],没有则调用obj.currentStyle[name]
return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
}
其他的样式相关的属性
属性 | 描述 |
---|---|
clientHeight | 元素的可见高度,包括元素的内容区和内边距的高度 |
clientWidth | 元素的可见宽度,包括元素的内容区和内边距的宽度 |
offsetHeight | 整个元素的高度,包括内容区、内边距、边框 |
offfsetWidth | 整个元素的宽度,包括内容区、内边距、边框 |
offsetParent | 当前元素的定位父元素 ,离他最近的开启了定位的祖先元素,如果所有的元素都没有开启定位,则返回body |
offsetLeft | 当前元素和定位父元素之间的水平偏移量 |
offsetTop | 当前元素和定位父元素之间的垂直偏移量 |
scrollHeight | 获取元素滚动区域的高度 |
scrollWidth | 获取元素滚动区域的宽度 |
scrollTop | 获取元素垂直滚动条滚动的距离 |
scrollLeft | 获取元素水平滚动条滚动的距离 |
判断滚动条是否滚动到底
- 垂直滚动条 :scrollHeight -scrollTop = clientHeight
- 水平滚动 :scrollWidth -scrollLeft = clientWidth
事件(Event)
事件对象
当响应函数被调用时,浏览器每次都会将一个事件对象作为实参传递进响应函数中,这个事件对象中封装了当前事件的相关信息,比如:鼠标的坐标,键盘的按键,鼠标的按键,滚轮的方向…
获取到鼠标的坐标
clientX和clientY
用于获取鼠标在当前的可见窗口的坐标
pageX和pageY
用于获取鼠标相对于当前页面的坐标
事件的冒泡(Bubble)
事件的冒泡指的是事件向上传导,当后代元素上的事件被触发时,将会导致其祖先元素上的同类事件也会触发。
事件的冒泡大部分情况下都是有益的,如果需要取消冒泡,则需要使用事件对象来取消
可以将事件对象的cancelBubble设置为true,即可取消冒泡
例子:
div.onclick = function(event){
event = event || window.event;
event.cancelBubble = true;
};
事件的委派
指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
我们希望,只绑定一次事件,即可应用到多个的元素上,即使元素是后添加的
我们可以尝试将其绑定给元素的共同的祖先元素
事件的绑定
addEventListener() (不支持IE8及以下的浏览器 )
通过这个方法可以为元素绑定响应函数
参数:
1.事件的字符串,不要on
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,默认传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数, 这样当事件被触发时,响应函数将会按照函数的绑定顺序执行。
btn01.addEventListener("click",function(){
alert("hello");
},false);
btn01.addEventListener("click",function(){
alert("hello");
},false);
attachEvent()
在IE8中可以使用attachEvent()来绑定事件
参数:
1.事件的字符串,要on
2.回调函数
这个方法也可以同时为一个事件绑定多个处理函数,不同的是它是后绑定先执行,执行顺序和addEventListener()相反
btn01.attachEvent("onclick",function(){
alert("hello");
});
btn01.attachEvent("onclick",function(){
alert("hello World");
});
实现兼容性
//定义一个函数,用来为指定元素绑定响应函数
* 参数:
* obj 要绑定事件的对象
* eventStr 事件的字符串(不要on)
* callback 回调函数
*/
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr , callback , false);
}else{
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
//在匿名函数中调用回调函数
callback.call(obj);
});
}
}
事件的传播
关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,
然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件, 然后在向内传播给后代元素
W3C综合了两个公司的方案,将事件传播分成了三个阶段
- 捕获阶段
在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件 - 目标阶段
事件捕获到目标元素,捕获结束开始在目标元素上触发事件 - 冒泡阶段
事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false
常用事件
鼠标事件
div跟着鼠标移动
<!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>
<script>
window.onload = function() {
//获取box1
var box1 = document.getElementById("box1");
//绑定鼠标移动事件
document.onmousemove = function(event) {
//解决兼容问题
event = event || window.event;
//获取滚动条滚动的距离
/*
* chrome认为浏览器的滚动条是body的,可以通过body.scrollTop来获取
* 火狐等浏览器认为浏览器的滚动条是html的,
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//var st = document.documentElement.scrollTop;
//获取到鼠标的坐标
/*
clientX和clientY
用于获取鼠标在当前的可见窗口的坐标
div的偏移量,是相对于整个页面的
*/
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
}
</script>
<style>
#box1{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}
</style>
<body style="height: 1000px;width: 1500px;">
<div id="box1"></div>
</body>
</html>
键盘事件
移动div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
//使div可以根据不同的方向键向不同的方向移动
/*
* 按左键,div向左移
* 按右键,div向右移
* 。。。
*/
window.onload = function() {
//定义一个变量,来表示移动的速度
var speed = 10;
//创建一个变量表示方向
//通过修改dir来影响移动的方向
var dir = 0;
//开启一个定时器,来控制div的移动
setInterval(function() {
/*
* 37 左
* 38 上
* 39 右
* 40 下
*/
switch (dir) {
case 37:
//alert("向左"); left值减小
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
//alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
//alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
//alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
}
}, 30);
//为document绑定一个按键按下的事件
document.onkeydown = function(event) {
event = event || window.event;
//当用户按了ctrl以后,速度加快
if (event.ctrlKey) {
speed = 50;
} else {
speed = 10;
}
//使dir等于按键的值
dir = event.keyCode;
};
//当按键松开时,div不再移动
document.onkeyup = function() {
//设置方向为0
dir = 0;
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
BOM
浏览器对象模型(browser object model)
BOM可以使我们通过JS来操作浏览器
BOM对象
Window : 代表的是整个浏览器的窗口,同时window也是网页中的全局对象
Navigator :代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
Location : 代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
History :代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且该操作只在当次访问时有效
Screen :代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的,
可以通过window对象来使用,也可以直接使用
Navigator
代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
由于历史原因,Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
一般我们只会使用userAgent来判断浏览器的信息,
userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,
不同的浏览器会有不同的userAgent
火狐的userAgent
Mozilla5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko20100101 Firefox50.0
Chrome的userAgent
Mozilla5.0 (Windows NT 6.1; Win64; x64) AppleWebKit537.36 (KHTML, like Gecko) Chrome52.0.2743.82 Safari537.36
IE8
Mozilla4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE9
Mozilla5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE10
Mozilla5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE11
Mozilla5.0 (Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
在IE11中已经将微软和IE相关的标识都已经去除了,所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
alert(navigator.appName);
var ua = navigator.userAgent;
console.log(ua);
if(firefoxi.test(ua)){
alert("你是火狐!!!");
}else if(chromei.test(ua)){
alert("你是Chrome");
}else if(msiei.test(ua)){
alert("你是IE浏览器~~~");
}else if("ActiveXObject" in window){
alert("你是IE11,枪毙了你~~~");
}
History
对象可以用来操作浏览器向前或向后翻页
length
属性,可以获取到当成访问的链接数量
back()
可以用来回退到上一个页面,作用和浏览器的回退按钮一样
forward()
可以跳转下一个页面,作用和浏览器的前进按钮一样
go()
可以用来跳转到指定的页面
它需要一个整数作为参数
1:表示向前跳转一个页面 相当于forward()
2:表示向前跳转两个页面
-1:表示向后跳转一个页面
-2:表示向后跳转两个页面
Location
该对象中封装了浏览器的地址栏的信息
如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
如果直接将location属性修改为一个完整的路径,或相对路径,则我们页面会自动跳转到该路径,并且会生成相应的历史记录
location = "http:www.baidu.com"
location = "01.BOM.html"
assign()
用来跳转到其他的页面,作用和直接修改location一样
reload()
用于重新加载当前页面,作用和刷新按钮一样
如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面
location.reload(true)
replace()
可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
不会生成历史记录,不能使用回退按钮回退
window
定时器
setInterval()
定时调用 :可以将一个函数,每隔一段时间执行一次
参数:
第1个:回调函数,该函数会每隔一段时间被调用一次
第2个:每次调用间隔的时间,单位是毫秒
返回值: 返回一个Number类型的数据
这个数字用来作为定时器的唯一标识
clearInterval()可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
clearInterval()可以接收任意参数,
- 如果参数是一个有效的定时器的标识,则停止对应的定时器
- 如果参数不是一个有效的标识,则什么也不做
var num = 1;
var timer = setInterval(function() {
count.innerHTML = num++;
if(num == 20) {
//关闭定时器
clearInterval(timer);
}
}, 500);
延时调用
setTimeout
延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次
延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择
var timer = setTimeout(function(){
console.log(num++);
},3000);
使用clearTimeout()来关闭一个延时调用
clearTimeout(timer);
类的操作
直接修改元素的类css:
通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面。 这样的执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便。
我们希望一行代码,可以同时修改多个样式
我们可以通过修改元素的class属性来间接的修改样式.这样一来,我们只需要修改一次,即可同时修改多个样式,浏览器只需要重新渲染页面一次,性能比较好, 并且这种方式,可以使表现和行为进一步的分离 。
//定义一个函数,用来向一个元素中添加指定的class属性值
/*
* 参数:
* obj 要添加class属性的元素
* cn 要添加的class值
*/
function addClass(obj, cn) {
if (!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
* 判断一个元素中是否含有指定的class属性值
* 如果有该class,则返回true,没有则返回false
*
*/
function hasClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
}
/*
* 删除一个元素中的指定的class属性
*/
function removeClass(obj, cn) {
//创建一个正则表达式
var reg = new RegExp("\\b" + cn + "\\b");
//删除class
obj.className = obj.className.replace(reg, "");
}
/*
* toggleClass可以用来切换一个类
* 如果元素中具有该类,则删除
* 如果元素中没有该类,则添加
*/
function toggleClass(obj , cn){
//判断obj中是否含有cn
if(hasClass(obj , cn)){
//有,则删除
removeClass(obj , cn);
}else{
//没有,则添加
addClass(obj , cn);
}
}
JSON
JavaScript Object Notation JS对象表示法
JSON 格式
- 复合类型的值只能是数组或对象,不能是函数、正则表达式对象、日期对象。
- 原始类型的值只有四种:字符串、数值(必须以十进制表示)、布尔值和
null
(不能使用NaN
,Infinity
,-Infinity
和undefined
)。 - 字符串必须使用双引号表示,不能使用单引号。
- 对象的键名必须放在双引号里面。
JS中的对象只有JS自己认识,其他的语言都不认识
JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别, 并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号
JSON分类:
1.对象 {}
2.数组 []
JSON中允许的值:
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组
举例:
var arr = '[1,2,3,"hello",true]'
var obj2 = '{"arr":[1,2,3]}'
var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]'
JSON工具类
json > js对象
JSON.parse()
可以将以JSON字符串转换为js对象
它需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回
var obj = JSON.parse(json)
JS对象 > JSON
JSON.stringify()
可以将一个JS对象转换为JSON字符串
需要一个js对象作为参数,会返回一个JSON字符串
var str = JSON.stringify(obj3)
JSON这个对象在IE7及以下的浏览器中不支持