js个人笔记

Js的编写

<script></script>

       控制浏览器弹出一个警告框

       alert(“”);

       让计算机在页面输出一个内容

       document.write()可以向body中输出一个内容

       向控制台输出一个内容

       console.log();

Js的基本语法

       多行注释/**/

       单行注释//

       单行注释:CTRL+/    多行注释:ALT+SHIFT+A

  1. js中严格区分大小写
  2. js中每一条语句以分号(;)结尾
  3. js中会忽略多个空格和换行,所以我们可以利用空格和换行进行格式化

字面量和变量

       字面量,都是一些不可改变的值

              如:1,2,3,4,5

       变量 变量可以用来保存字面量,而且在开发中都是通过变量去保存一个字面量

       声明变量

       在js中使用var关键字来声明一个变量

标识符

       在js中所有的可以由我们自主命名的都可以称为时标识符

       例如:变量名、函数名、属性名都属于标识符

       命名一个标识符时需要遵守如下规则:

  1. 标识符中可以含有字母、数字、-、¥
  2. 标识符不能以数字开头
  3. 标识符不能是ES中的关键字或保留名
  4. 标识符一般都采用驼峰命名法

首字母小写,每个单词的开头字母大写,其余字母小写

       Js底层保存标识符时实际上是采用的Unicode编码(UTF-8)

数据类型指的就是字面量的类型

       在js中一共有六种数据类型

              String 字符串       Number 数值       Boolean 布尔值

              Null空值           Undefined 未定义 Object 对象

在字符串中我们可以使用\作为转义字符

当表示一些特殊符号时可以使用\进行转义

可以使用一共运算符Typeof来检查一共变量的类型

语法:typeof 变量

Js中可以表示的数字的最大值Number.MAX_VALUE

Infinity 表示正无穷

-Infinity表示负无穷

使用typeof检查Infinity也会返回Number

Null表示空值

Undefine表示未定义,表示声明了,但是并没有赋值

强制类型转换

       -指将一个数据类型强制转换为其他的数据类型

       -类型转换主要指,将其他的数据类型,转换为String Number Boolean

              方法一:

                     -调用被转换数据类型的toString()方法

                     -该方法不会影响到原变量,它会将转换的结果返回

                     -但是注意:null和undefined这两个值没有toString方法

                            如果调用他们的方法,会报错

                            a.toString()

              方法二:

                     -调用String()函数,并将被转换的数值作为参数传入

       转换方式一:

       将其他的数据类型转换为Number

  1. 如果时纯数字的字符串,则直接将其转换为数字
  2. 如果字符串中又非数字的内容,则转换为NaN
  3. 如果字符串时一个空串或者是一个全是空格的字符串,则转换为0
  4. True转成1    false转成0
  5. Null转成0
  6. Undefined转数字NaN

转换方式二:

       这种方式专门用来对付字符串

       调用parseInt()函数将a转换为Number

       parseInt()可以将一个字符串中的有效的整数内容取出来,然后转换为Number

       parseFloat()作用和pareInt()类似,不同的是它可以获得有效的小数

如果对非String使用parseInt()或pareFloat(),它会将其转换为String然后再操作

Number()强制类型转换成数字

       parseInt()把一个字符串转换为一个整数

       parseFloat()把一个字符串转换为浮点型

其他的进制的数字

可以再parseInt()中传递一个第二个参数,来指定数字的进制

       在Js中,如果需要表示16进制的数字,则需要以0x开头

       如果要表示8进制的数字,则需要以0开头

       如果要表示2进制的数字,则需要以0b开头

              但是不是所有的浏览器都支持

将其他的数据类型转换为Boolean

       使用Boolean()函数(除了0、NaN、空串、null、undefined,其余的都是ture)

运算符也叫操作符

       通过运算符可以对一个或者多个值进行运算

       比如:typeof就是运算符,可以获得一个值的类型

              它会将该值的类型以字符串的形式返回

算数运算符

       +加法运算符-减法运算符*乘法运算符/除法运算符 %取模运算符

       当对非Number类型的值进行运算,会将这些值转换为Number然后再运算

       任何值和NaN做运算都为NaN

       如果对两个字符串进行加法运算,则会做拼串

       任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作

任何值和字符串相加都会转换为字符串,并做拼串操作

       我们可以利用这一特点,来将一个任意的数据类型转换为String

       我们只需要为任意的数据类型下+一个“”即可将其转换为String

       这是一种隐形的类型转换,由浏览器自动完成,实际上它也是调用String

       任何值做-*/运算时都会自动转换为Number

       我们可以利用这一特点做隐式的类型转换

一元运算符,只需呀要一个操作数

       +正号,正号不会对数字产生任何影响

       -负号,负号可以对数字进行负号的取反

       对于非Number类型的值

              它会将先转换为Number,然后再运算

              可以对一个其他的数据类型使用正号,将其转换为number

              它的原理和Number()函数一样

自增++

       通过自增可以使变量再自身的基础上增加1

       对于一个变量自增以后,原变量的值会立即自增1

       自增分成两种:后++(a++) 和去前++(++a)

       无论是a++ 还是++a,都会立即使原变量的值自增1

              不同的是a++和++a的值不同

              a++的值等于原变量的值(自增前的值)

              ++a的值等于原变量的新值(自增后的值)

对于非布尔值进行与或运算时,会先将其转换为布尔值,然后再运算,并且返回原值

与运算:如果两个值都为true,则返回后面的

              如果两个值中有false,则返回靠前的flase

或运算:如果两个值都为true,则返回前面的

              如果两个值中有false,则返回第二个值

赋值运算符:

       =可以将符合右侧的值赋值给符合左侧的变量

任何值和NaN作比较都是false

在字符串中使用转义字符输入Unicode编码 \u四位编码

在网页中使用Unicode编码 &#编码;这里的编码需要的是十进制

Promt()可以弹出一个提示框,该提示框中有一个文本框

       用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数

       该字符串将会作为提示框的提示文字

用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接收该内容

Switch(表达式{

       Case表达式:

语句….

Break;

Case表达式:

语句….

Break;

Default:

 语句

 Break;

)

循环语句

       通过循环语句可以反复的执行一段代码多次

While循环

       -语法:

              While(条件表达式){

                     语句…

              }

       -while语句在执行时,

              先对条件表达式进行求值判断,

              如果值为ture,则执行循环体,

              循环体执行完毕后,继续对表达式进行判断

              如果为true,则继续执行循环体,以此类推

              如果值为false,则终止循环

Do…while循环

       -语法:

              Do{

                     语句…

                     }while()

              先执行后判断

For循环

       For(初始化表达式;条件表达式;更新表达式){

}

Console.time()

Console.timeend()

基本数据类型:string、number、boolean、Null、undefined

引用数据类型:object

Object值为指向的地址

Var obj2={name:”   ”,

Age:” ”};

函数function

创建一个函数对象

Var fun=new Function()

封装到函数中的代码不会立即执行

函数中的代码会在函数调用的时候执行

调用函数 语法:函数对象()

Fun();

函数声明

       Function 函数名([形参1,形参2….形参N])

       Function fun(){
       }

Function sum(a,b){       //形参

Console.log(a+b)

}

Sum(1,2)//实参

立即执行函数

(function(){

       Alert(“我是一个匿名函数”)

})();

枚举对象中的属性

       语法:

       For(var n in obj){
console.log(n);

}

变量的声明提前

       使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值)

       但是如果声明变量时不适应var关键词,则变量不会被声明提前

函数的声明提前

       函数声明会被提前,函数表达式不会被提前

函数作用域

       在全局作用域中无法访问到函数作用的变量

       在函数作用域中可以访问到全局作用域的变量

隐函的参数就是this,this指向的是一个对象

根据函数的调用方式的不同,this会指向不同的对象

       以函数的形式调用时,this永远都是window

       以方法的形式调用时,this就是调用方法的那个对象

工厂方法创建对象

       Function createperson(name,age,gender){

       Var obj = new object();

       Obj.name=name;

       Obj.age=age;

       Obj.gender=gender;

       Obj.sayName=function(){

              Alert(this.name);

       };

       Return obj;

}

使用工厂方法创建的对象,使用的构造函数都是Objcet

       所以创建的对象都是Object这个类型

       就会导致我们无法区分出多种不同类型的对象

创建一个构造函数,专门用来创建Person对象

构造函数就是一个普通的函数,创建方式和普通函数没有区别

不同的是构造函数习惯上首字母大写

构造函数和普通函数的区别就是调用方式的不同

       普通函数是直接调用,构造函数需要使用new关键字来调用

构造函数的执行流程:

       1立刻创建一个新的对象

       2将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象

       3逐行执行函数中的代码

4将新建的对象作为返回值返回

使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类

       我们将通过一个构造函数创建的对象,称为是该类的实例

Function Person(){}

Var per=new Person();

使用instancof可以检查好一个对象是否是一个类的实例

       语法:

              对象instanceof 构造函数

This的情况:

  1. 当以函数的形式调用时,this是window
  2. 当以方法的形式调用时,谁调用方法this就是谁
  3. 当以构造函数的形式调用时,this就是新创建的那个对象

原型prototype

如果作为普通函数调用prototype没有任何作用

当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐函的属性

       执行该构造函数的原型对象,我们可以通过_proto_来访问该属性

原型对象就相当于一个公共的区域,所以同一个类的实例都可以访问到这个原型对象

       我们可以将对象中共有的内容,同意设置到原型对象中

当我们访问对象的一个属性和方法时,它会先在对象自身中寻找,如果有则直接使用,

       如果没有则会去原型对象中寻找,如果找到则直接使用

使用in检查对象中是否有某个属性时,如果对象中没有原型中有,也会返回true

可以使用对象的hasOwnPrototype()来检查对象中是否含有该属性

原型对象也是对象,所以它也有原型

       当我么使用一个对象的属性和方法时,会在自身中寻找

       如果没有则去原型对象中寻找,如果原型对象中有,则使用

       如果没有则去原型的原型中寻找

原型的原型

.__proto__.__proto__

当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值

垃圾回收(GC)

垃圾积攒过多以后,会导致程序运行的速度过慢

当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象

此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢

所以这种垃圾必须进行清理

在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁

我们不需要也不能进行垃圾回收的操作

我们需要做的只是要将不再使用的对象设置null即可

数组(Array)

       数组也是一个对象

       它和我们普通对象功能类似,也是用来存储一些值

       不同的是普通对象时使用字符串作为属性名的

       而数组是使用数字来作为索引操作元素

索引:

       从0开始的整数就是索引

       数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据

创建数组对象

Var arr= new Array();

向数组中添加元素

语法:数组[索引]=值

获取数组的长度

语法:数组.length

对于连续的数组,使用length可以获取到数组的长度(元素的个数)

对于非连续的数组,使用length会获取到数组的最大的索引+1

修改length

       如果修改的length大于原长度,则多出部分会空出来

       如果修改的length小于原长度,则多出部分会被删除

向数组最后一个位置添加元素

语法:数组[数组.length]=值

使用字面量来创建数组

语法:[]

使用字面量创建数组时,可以在创建时就指定数组中的元素

使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作为构造函数的参数传递

元素直接使用,隔开

数组中的元素可以是任意的数据类型,也可以是对象,也可以是一个函数,数组中也可以放数组

数组的方法

Push()该方法可以向数组的末尾添加一个或多个元素,并返回数组的新长度

Pop()该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回

Unshift()向数组开头添加一个或多个元素,并返回新的数组长度

Shift()可以删除数组的第一个元素,并将被删除的元素作为返回值返回

一般我们都是使用for循环去遍历数组

JS中还为我们提供了一个方法,用来遍历数组

forEach()

       这个方法只支持IE8以上的浏览器

forEach()方法需要一个函数作为参数

       像这种函数,由我们创建但是不由我们调用,我们称为回调函数

       数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素以实参的形式传递进来,我们可以来定义形参,来读取这些内容

       浏览器会在回调函数中传递三个参数:

       第一个参数,就是当前正在遍历的元素

       第二个参数,就是当前正再遍历的元素索引

       第三个参数,就是正在遍历的数组

这个方法只支持IE8以上的浏览器

       IE8以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach,还是使用For循环来遍历

arr.forEach(function(){})

slice()方法可以用来从数组提取指定元素

       该方法不会改变元素数组,而是将截取到的元素封装到一个型数组中返回

       参数:

  1. 截取开始的位置的索引,包含开启索引
  2. 截取结束的位置的索引,不包含结束索引

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

              索引可以传递一个负值,如果传递一个负值,则从后往前计算

Splice()可以用于删除数组中的指定元素

       使用splice()会影响到原数组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回

参数:

       第一个,表示开始位置的索引

       第二个,表示删除的数量

       第三个及以后,可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边

Concat()可以连接两个或多个数组,并将新的数组返回

       该方法不会对原数组产生影响

Join()该方法可以将数组转换为一个字符串

       该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回

       在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符

Reverse()该方法用来反转数组

       该方法会直接修改原数组

 Sort()可以用来对数组中的元素进行排序

       也会影响原数组,默认会按照Unicode编码进行排序

       即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序

       所以对数字记性排序时,可能会得到错误的结果

       我们可以自己来指定排序的规则

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

       使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边

       浏览器会根据回调函数的返回值来决定元素的位置

              如果返回一个大于0的值,则元素会交换位置

              如果返回一个小于0的值,则元素位置不变

              果返回一个0,则认为两个元素相等,也不交换位置

       如果需要升序排列,则返回a-b

       如果需要降序排序,则返回b-a

Call()和apply()这两个方法都是函数对象的方法,需要通过函数对象来调用

       当对函数调用call()和apply()都会调用函数执行

       在调用call和apply()可以将一个对象指定为第一个参数

              此时这个对象将会成为函数执行时的this

       Call()方法可以将实参在对象之后一次传递

       Apply()方法需要将实参封装到一个数组中统一传递

This的情况:

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

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

  1. 函数的上下文对象this
  2. 封装实参的对象arguments

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

在调用函数时,我们所传递的实参都会在argements中保存

Arguments.length可以用来获取实参的长度

我们即使不定义形参,也可以通过arguments来使用实参,只不过比较麻烦

       Arguments[0]表示第一个实参

它里面有一个属性叫做callee

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

Date对象在js中使用Date对象来表示一个时间

       如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间

       创建一个指定的时间对象

       需要构造函数中传递一个表示时间的字符串作为参数

       日期的格式 月份/日/年 时:分:秒

getDate()获取当前对象是几日

getDay()获取当前对象是周几,会返回0-6的值

getMonth()获取当前时间对象的月份,会返回0-11的值,0表示1月

getFullYear()获取当前日期对象的年份

getTime()获取当前日期对象的时间戳,时间戳指的是格林威治标准时间的1970年1月1日,0时0分0秒

       到当前日期所花费的毫秒数 1秒=1000毫秒,计算机底层在保存时间时都是时间戳

利用时间戳来测试代码的执行的性能,获取当前的时间戳

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

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

       比如:Math.PI表示的圆周率

       Abs()可以用来计算一个数的绝对值

       Ceil(x)可以对一个数进行向上取整

       Floor(x)可以对一个数进行向下取整,小数部分会被舍掉

       Round(x)可以对一个数四舍五入取整

       Random()可以生成一个0-1之间的随机数

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

              Math.round(Math.random*x)

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

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

       Max()可以获取多个数中的最大值

       Min()可以获取多个数中的最小值

       Pow(x,y)返回x的y次幂

       Sqrt()用于对一个数进行开方运算

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

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

       Number()可以将基本数据类型字符串转换为Number对象

       Boolean()可以将基本数据类型字符串转换为Boolean对象

对象比较地址,基本数据类型比较数

       但是注意:我们在实际应用中不会使用基本数据类型的对象

       如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预计的结果

方法和属性能添加给对象,不能添加给基本数据类型

       当我们对一些基本数据类型的值去调用属性和方法时,

       浏览器会临时使用包装类将其转换为对象,然后在调用对象的属性和方法

       调用完以后,在将其转换为基本数据类型

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

       charAt()可以返回字符串指定位置的字符

       charCodeAt()获取指定位置字符的字符编码(Unicode编码)

       formCharCode()可以根据字符编码去获取字符

       concat()可以用来连接两个或多个字符串,作用和+一样

       indexof()该方法可以检索一个字符串中是否含有指定内容

              如果字符串中含有该内容,则会返回其第一次出现的索引

              如果没有找到指定的内容,则返回-1

              可以指定一个第二个参数,指定开始查找的位置

       LastIndexOf()该方法的用法和indexof()一样,但是lastindexof是从后往前找

       Slice()可以从字符串中截取指定的内容,不会影响源字符串,而是将截取的内容返回

              参数:第一个,开始位置索引(包括开始位置)

                     第二个,结束位置索引(不包括结束位置)

              如果省略第二个参数,则会截取带后边所有的

              也可以传递一个负数作为参数,负数的话将会从后边计算

       Substring()可以用来截取一个字符串,与slice()类似

              不同的是这个方法不能接受负值作为参数,如果传递一个负值,则默认使用0

              而且他会自动调整参数的位置,如果第二个参数小于第一个,则会自动交换

       Substr()用来截取字符串

              参数:1.截取开始位置   2.截取的长度

       Split()可以将一个字符串拆分成一个数组

              参数:需要一个字符串作为参数,将会根据该字符串去拆分数组

              如果传递一个空串作为参数,则会将每个字符都拆分为数组中的一个元素

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

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

正则表达式

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

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

       获取将字符串中符合规则的内容提取出来

       语法:

              Var 变量 =new RegExp(“正则表达式”,“匹配规则”)

       正则表达式的方法:

              Test()

              使用这个方法可以用来检查一个字符串是否符合正则表达式的规则

              如果符合则返回true,否则返回false

              在构造函数中可以传递一个匹配模式作为第二个参数

              可以是:I 忽略大小写       g 匹配全局变量

       使用字面量创建正则表达式

              语法: var 变量 = /正则表达式/匹配模式

       创建一个正则表达式,检查一个字符串中是否有a或b

       Reg=/a|b/       使用|表示或者的意思

       创建一个正则表达式检查一个字符串中是否有字母

       Reg=/[ab]/     []里的内容也是或的关系

              Reg=/[a-z]/任意小写字母

              Reg=/[A-Z]/任意大写字母

              Reg=/[A-z]/或者reg=/[a-z]/I       任意字母

              Reg=/a[bde]c/       检查一个字符串中是否含有abc或adc或aec

       [^]除了

Reg=/[^ab]/

              Reg=[0-9]任意数字

字符串和正则相关的方法

       Split()可以将一个字符串拆分为一个数组

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

                     Var result = str.split(/[A-z]/)  根据任意字符将字符串拆分

       Search()可以搜索字符串中是否含有指定内容

              如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1

              它可以接受一个正则表达式作为参数,然后会根据正则表达式去检索字符串

              Search()只会查找第一个,即使设置全局匹配也没用(无效)

       Match()可以根据正则表达式,从一个字符串中将符合条件的内容提取出来

              默认情况下我们的match只会找到第一个符合要求的要求,找到以后就停止检索

              我们可以设置正则表达式为全局匹配模式,这样就会匹配到所以的内容

              可以为一个正则表达式设置多个匹配模式,且顺序无所谓

              Match()会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果

       Replace()可以将字符串中指定内容替换为新的内容

              参数:1.被替换的内容,可以接受一个正则表达式作为参数          2.新的内容

              默认只会替换第一个

              Result = str.replay(/[a-z]/gi,”@-@”)            “”->替换为空串

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

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

       {n}正好出现n次

       {m,n}出现m-n次

       {m,}m次以上

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

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

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

       ^表示开头/^a/

       $表示结尾/a$/

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

       /^a|a$/以a开头或者以a结尾

.表示任意字符,在正则表达式中使用\作为转义字符     \.来表示.       \\表示\

       注意:使用构造函数时,由于它的参数是一个字符串,而\是一个自付出中转移字符

       如果要使用\则需要使用\\来代替

       \w 查找单词字符。

\W 查找非单词字符。

\d 查找数字。

\D 查找非数字字符。

\s 查找空白字符。

\S 查找非空白字符。

\b 匹配单词边界。

\B 匹配非单词边界。

       去除开头空格str=str.replace(/^\s*/,””)

       去除结尾空格str=str.replace(/\s*$/,””)

       去除开头和结尾的空格str=str.replace(/^\s*|\s*$/g,””)

邮件的正则表达式

       规则:任意字母数字下划线 .任意字母数字下划线@ 任意字母数字 .任意字母(2-5位).任意字母(2-5位)

       Var emailReg =/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/

DOM Document Object Model文档对象模型

JS通过DOM来对HTML文档进行操作。只要理解DOM就可以随心所欲的操作WEB页面

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

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

模型       使用模型来表示对象之间的关系

节点Node 构成网页中最基本的部分,网页中的每一个部分都可以称为一个节点

文档节点:整个HTML文档

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

属性节点:元素的属性

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

浏览器已经为我们提供文档节点对象,这个对象是window属性

       可以在页面中直接使用,文档节点代表的是整个网页

       Document.getElementById

事件,就是用户和浏览器直接交互行为

       如:点击按钮,鼠标移动,关闭窗口……

       我们可以在事件对应的属性中设置一些JS代码,这样当事件被触发时,这些代码将会执行

Document.querySelector()需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点

       该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个

Document.querySelectorAll()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回

InssertBefore()可以在指定的子节点前插入新的子节点

       语法:父节点.insertBefore(新节点,旧节点);

replaceChild()可以使用指定的子节点替换已有的子节点

       语法:父节点.replaceChild(新节点,旧节点);

RemovChild() 可以删除一个子节点

       语法:父节点.removeChild(子节点);

              子节点.parentNode.removeChild(子节点);

通过js修改元素的样式

       语法:元素.style.样式名=样式值

注意:如果CSS的样式名中含有-

       这种名称在js中是不合法的

       需要将这种样式名修改为驼峰命名法

       去掉-,然后将-后的字母大写

currentStyle获取元素当前显示的样式

       语法:元素.currentStyle.样式名

       currentStyle只有IE浏览器支持

       在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式

       这个方法是window的方法,可以直接使用

       需要两个参数:

              第一个:获取样式的的元素      第二个:可以传递一个伪元素,一般传null

              Var obj=getComputedStyle(box1,null); alert(getComputedStyle(box1,null).width)

Onscroll当滚动条滚动到底时使表单项可用

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

       参数:1事件的字符串 2回调函数    3是否在捕获阶段触发事件,需要一个布尔值,一般都传false

attachEvent()在IE8中可以使用

参数:1事件的字符串       2回调函数

事件的传播

       关于事件的传播网景公司和微软公司有不同的理解

       微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件

       网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的事件,然后在向内传播给后代元素

       W3C综合了两个公司的方案,将事件传播分三个阶段

  1. 捕获阶段
    1. 在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
  2. 目标阶段

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

  1. 冒泡阶段

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

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

BOM

       浏览器对象模型

       BOM可以使我们通过JS来操作浏览器

       在BOM中为我们提供了一组对象,用来完成对浏览器的操作

       BOM对象

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

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

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

              History代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录,由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且该操作只能当次访问有效

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

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

       由于历史原因,Navigator对象中的大部分属性都已经不能帮助我们识别浏览器

       一般我们只会使用userAgent来判断浏览器的信息

              userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容

              不同的浏览器会有不同的userAgent

              如果通过UserAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器中的信息       比如:ActiveXObject

定时器

setInterval()

       定时调用

       可以将一个函数,每隔一段时间执行一次

       参数

  1. 回调函数,该函数会每隔一段时间被调用一次
  2. 每次调用间隔的时间,单位是毫秒

返回值:返回一个Number类型的的数据

              这个数字用来作为定时器的唯一标识

clearInterval()可以用来关闭一个定时器

       方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器

延时调用

       延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次

延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次

延时调用和定时调用实际上是可以互相代替,在开发中可以根据自己需要去选择

延时调用setTimeout( ,1000)//延时1000毫秒后调用一次

使用ClearTimeout()来关闭一个延时调用

JSON

       JS中的对象只有JS自己认识,其他的语言都不认识

       JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别

              并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互

       JSON

              JavaScript Object Notation   JS对象表示法

              JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号

                     其他的和JS语法一致

              JSON分类:

  1. 对象{}
  2. 数组[]

JSON中允许的值:

  1. 字符串
  2. 数值
  3. 布尔值
  4. Null
  5. 对象
  6. 数组

在JSON字符串转换为JS中的对象

       在JS中,为我们提供了一个工具类,就叫JSON

       这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON

JSON——>JS对象

JSON.parse()

       可以将一个JSON字符串转换为JS对象

       需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回

JS对象——>JSON

JSON.stringify()

       可以将一个JS对象转换为JSON字符串

       需要一个JS对象作为参数,会返回一个JSON字符串

JSON这个对象在IE7及以下的浏览器中不支持,所以这些浏览器中调用会报错

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值