标签：语句函数对象元素基础 JS 字符串属性

js基础

之前学习的都忘了，重来

一，js简介

ECMAscript是javascript标准，所以一般情况下我们认为这是一个意思

实际上javascript要更大一些

完整的javascript实现应该由以下三个部分构成

ECMAscript DOM BOM 构成

js的特点：

解释型语言
类似于java和c语言的结构
动态语言
基于原型的面向对象

二，js hello world!

alert('')让浏览器弹出警告框

document.write('')在计算机页面中输出一个内容、这个内容输出在body里

console,log('')向控制台输出内容

三，js书写的位置

js编写到外部的js文件中，然后通过script标签引入，写到外部文件中就可以在不同的页面中间同时引用，也可以利用浏览器缓存机制

script如果引入外部js文件之后，标签内则不能够书写代码，如果要书写心得代码则需要创建新的script标签

或者在html文件中写script标签中书写代码

还有关于script标签的书写位置的说法，由于js是单线程从上到下，先解析代码在渲染页面，速度较慢用户体验也不好，于是我们将代码放到body里，这样先将页面呈现出来，渲染页面，以上是我的个人理解。

四，js的基本语法

/**/多行注释，注释中的内容不会被执行，但是会在页面中查看

//单行注释

养成习惯经常写注释

1.JS中严格区分大小写，大小写不能混着用

举个例子：alert('')是弹出警告窗户，但是如果写成Alert('')代码就会报错。

2.JS中每行代码的结束用(;)结尾，但是分号不写的话也行，但是不写的话浏览器会自动添加，但是会影响系统性能，并且有可能，会将；加错位置，导致出错。

3.JS中会忽略空格和换行，所以对代码可以进行格式化处理

五，字面量和变量

从这里开始痛苦

1.字面量，指的是不能改变的量，例如1 ，a等，所以字面量可以直接使用，但是一般不会直接使用

2.变量，顾名思义值会变化，用来保存字面量，变量更加方便我们使用

声明变量，在js中使用var声明变量，声明过后的变量可以不用再写var 例如： var a;但是声明后没有值没有办法用，于是有了下面的： var a = 1;一般声明和赋值同时进行

六，标识符

js中所有所有的可以我们自己命名的就叫标识符，例如变量名，函数名，属性名等。

遵守如下规则

标识符可以含有数字，字母，下划线和$
标识符不能以数字开头
标识符不能是ES中的关键字或保留字
标识符一般采用驼峰命名法，首字母小写每个单词首字母大写，其余字母小写：helloWorld，这只是规范不是强制，还有中文也能用，但是最好不要用

JS底层保存标识符采用Unicode编码，理论上utf-8中含有的内容都可以使用

七，数据类型

前五种时基本数据类型，最后的object属于引用数据类型

一，String类型

字符串

在js中使用字符串需要用“”引用起来，其中单引号和双引号都能用，但是不要混着用，并且引号不能嵌套

例子：var str = "hello"；

如果不加引号，就会变成变量

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

转义字符举例

\" 表示"
\' 表示'
\n 表示换行
\t 制表符

例子：console.log("这是一个\"我的页面\"")

二，Number类型

所有的数值都是Number类型

包括整数和浮点数（小数）

JS表示数值的最大值，Number.MAX_VALUE

JS表示数值的最小值，Number.MIN_VALUE

如果使用Number超过使用的最大值，则会返回一个Infinity表示正无穷，Infinity是一个字面量

NaN 是一个特殊的数字表示 Not a Number，NaN是Number类型的

重点：在JS中使用小数计算就你可能得到一个不精准的结果，所以千万不要使用JS对精确度比较高的计算

这里说个题外话

可以使用type of来检查数据类型

语法： type of 变量名

使用type of检查正无穷返回Number类型

三，Boolean类型

只有两个值，主要用来逻辑判断

true 表示真

false 表示假

使用type of检查时返回boolean

四，Undefined类型

只有一个值就是undefined

创建一个变量不声明就是undefined

五，Null类型

只有一个值就是Null

null专门用来表示为空对象

type of 检测类型时object类型

六，Object类型（引用数据类型）

暂时不谈

八，数据类型转换

强制类型转换

将一个数据类型强制转换成其他数据类型

一，String

方式一，调用被转换数据类型的toString()的方法

注意：null和undefined没有tostring方法


        var a = 123;
        console.log(typeof a);
        console.log(typeof toString(a));

方法二，调用String()函数，来将a转换为字符串，将转换的数据作为参数传递给函数

注意：null和undefined转换为"null"和"undefined"


        var a = 123;
        b = String(a)
        console.log(b,typeof b)

二，Number

方式一，使用Number()函数

如果是纯数字字符串，则直接将其转换为数字
如果字符串里有非数字则转换为NaN
空字符串或者全是空格的字符串转换为0
boolean转换时true转成1，false转成0
null转换成0
undefind转换成NaN

转换过程不难但是转换的结果很重要。

方式二，专门用来转换字符串的

parseInt()
parseFloat()

该方法将字符串中有效的数字内容取出来，然后转换为Number

个人理解这种转换的方式是从左往右看遇到第一个不是数字的符号为止，作为结果输出所以不论是parseInt('123abc456')或是parseInt('123.456')输出的结果都是123

对于非String类型的对象转换会先将其转换成String类型然后再操作

三，其他进制的数值

数字有很多进制，再js中需要

16进制的数字，则需要0x开头

8进制以0开头

2进制以0b开头（不是所有的浏览器都支持）

每个浏览器都不一样例如070，有些浏览器会当成8进制，有的会当成10进制，可以用parseInt设置两根参数，第二参数表示进制

四，转换为boolean

使用Boolean()函数，简单来说数字转成boolean值非0和Null就是true，不管是正数还是负数，字符串转换，除了空字符串都是true，最后还剩undefined也是false，对象转换也是true

九，运算符

一，基本运算符

也叫做操作符，通过运算符可以对一个值或者多个值进行计算，例如type of，运算符都是由返回值的type of的返回值是String类型。

算数运算符

+（这是个特殊）

对两个值进行加法运算，并将结果返回，
如果两个字符串假发，则进行字符串的拼接，任何数据类型的值与字符串相加都会先转换成字符串，然后进行拼接的工能

剩下的-，*，/都会先转换成number类型进行运算

%取模，也就是取余数的计算

二，一元运算符

只需要一个操作数，再通俗一点就是只有一个值

+正好， -负号

三，自增自减

自增 ++ 自减——

通过自增是变量的值再基础上增加1，自增分为两种a++,++a,a++的值是自增前的值，++a的值是自增后的值，自减同理

四，逻辑运算符

三种！ && ||，分别表示非与或

！就是对boolean进行取反，true变false false变true

对一个值进行取反两次不会变化

对非boolean值取反会先将其转化为boolean值，再取反，可以为任意的boolean取反两次来类型转换，其原理和boolean()一样

&& 与运算对两个值进行与运算，并返回值，只有两个值为true的时候才会返回true

JS中的与第一个值为true时才会检查第二个数值，返回第二个值，若第一个数值时false不会检查第二个数值，直接返回false

||与&&相反两个值都是false时才会返回false

非boolean值使用逻辑运算符的时候会先将值转换成boolean值，然后输出结果

五，赋值运算符

= 将符号右侧的值，赋值给左边的变量

+= 例如a+a=5 等价于 a+=5,同理-=一样

六，关系运算符

大于号“>” ,判断左侧的值时是否大于右侧的值同理还有“>=” "<" ''<="

对于非数值进行比较

任何值和NaN比较都是false,但是如果两边都是字符串，则会比较两边字符的Unicode编码，而字符编码则是一个一个的比较

七，相等运算符

== 比较两个值是否相等，相等返回true，不等返回false

使用==比较时如果比较类型不同，则自动类型转换，特殊的undefined和null比较时返回true，NaN不和任何值相等，如果要判断NaN可以使用函数isNaN()判断

!= 比较两个值不相等，不同返回true,相同返回false

同样的比较也会发生类型转换

=== 和！==代表全等和全不等，这两个比较会比较数值的类型，比较时不会发生类型转换

八，条件运算符和三元运算符

语法;条件表达式？语句1：语句2

首先对条件表达式求职，true执行语句1，false执行语句2，并且返回执行结果

九，运算符的优先级

，逗号运算符，主要的用法时声明多个变量，有其他用法但是更多是用来分割

优先级的话大致是这么个情况但是肯定不全面

. () [] new

++ –

算术运算符

关系运算符

逻辑运算符（&& ||）

三目运算符

赋值运算符（= += *= /= != -= ）

十，语句

语句是自上向下一条一条的执行的JS中可以使用{}对代码进行分组，同一个{}里的语句成为同一组语句，他们要么都执行要么都不执行一个{}里叫做一个代码块，代码块的后边不用编写；

JS代码块只有分组的作用，没有其他用途

一，条件判断语句

if语句

语法一：

if（条件表达式）

语句

执行时先对条件表达式进行判断，如果条件表达式为true，则执行if语句，如果条件表达式的值是false则不会执行if后的语句

if语句只能控制紧跟其后的语句

语法二：

if（条件表达式）{

语句...

}else{

语句...

}

if...else...语句

这个语句执行时先对条件表达式进行判断，true则执行if后的语句false执行else后的语句

语法三：其实就是嵌套了

if（条件表达式）{

语句一

}else if（条件表达式）{

语句二

}else{

语句三

}

一般不会这么些，如果真的需要那么多判断，就是用条件分支语句，不过条件分支语句用的更少

二，条件分支语句

也叫做switch语句

switch（条件表达式）{

case 表达式1：

语句

break；

case 表达式2：

语句

break；

case 表达式3：

语句

break；

default：

语句

break；

}

执行时会将case表达式的值和switch后的条件表达式的值进行全等比较：如果c比较结果时true则从当前代码开始case后的所有代码都会被执行语句最后的break保证不会执行其他的case，比较结果为false时，继续向下比较，如果都是false则执行default后面的语句

三，循环语句

向页面中输出连续的数字等场景时使用，个人用for循环比较好，在之后foreach循环用的更多

一，while循环

语法

while（条件表达式）{

语句...

}

先对条件式判断，判断结果时true的时候执行循环体，知道值为false的时候终止循环

条件表达式是true的循环，是死循环，用break打破死循环

二，for循环

语法

for（初始化表达式；条件表达式；更新表达式）{

语句...

}

结构更加清晰

执行流程，初始化表达式，初始化变量，随后通过条件表达式判断是否循环，如果结果为true执行循环体，如果为false终止循环，执行次数为更新表达式的次数

在这里说两个知识点就是break和continue

break只能使用在switch和循环语句，作用是退出循环

break会立刻停止距离他最近的循环

continue立刻跳过当次循环

十一，对象

一，对象简介

之间介绍的都是基本数据类型，除以上五种外都是引用数据类型，基本数据类型都是一个独立的值，其间互相没有关系。

对象属于一种复合的数据类型，再对象中保存多个不同的数据类型的属性

对象的分类：

内建对象

由ES标准中定义的对象，再任何的ES中都可以使用

比如Math String Number等
宿主对象

由JS运行的环境提供对象，目前来讲主要是指浏览器提供的对象
自定义对象

由开发人员自己创建的对象

二，对象的基本使用

1.创建函数

var obj = new Object();

2.在对象中保存的值叫做属性，在对象中添加属性

对象.属性名=属性值

obj.name = ‘wds’

3.读取对象的属性,读取的属性不存在的话不要会报错，返回undefined

对象.属性名

obj.name

4.修改对象的属性值

对象.属性=新值

三，属性名和属性值

属性名：不强制要求遵守标识符的规范，但是尽量不要乱用

如果是特殊的属性名，属性的操作方式的写法发生改变

对象.["属性名"]=“属性值”，这种方式更加的灵活，中括号可以传递一个变量，变量的值是多少就会读取哪个属性

属性值：可以是任意数据类型，甚至是一个对象

in运算符检查一个对象中是否含有指定的属性名，有是true，没有是false

属性名 in 对象名

四，基本数据类型和引用数据类型的区别

怎么么说呢，JS中基本数据类型的变量是再栈内存中存放的，比如现在创建出一个变量a，值是1，当创建出来一个新的变量b，并且将a的值赋给b，此时由于a，b的值的存储的位置不同导致更改a的值时候，b的值没有发生改变，然而应用数据类型中变量定义的对象是放在堆内存中的，变量的值是一个地址，将变量赋值给新的变量后由于再内存中将地址给复制过去，就导致地址相同导致两个变量操作的其实是同一个内容。

当比较两个基本数据类型的值的时候，就是比较值的类型，而引用数据类型比较的是地址的值，如果地址一样再去比较数据的值

五，对象字面量

创建对象的简写形式，举个例子

var obj = new Object（）

可以坚持写成 var obj = {}

这么写打的好处：创建对象时，直接指定对象中的属性，清晰明了，再定义属性的名字的时候，属性名是可以加引号的。属性名和属性值是一组一组的，中间那用逗号隔开

六，使用工厂方法创建对象

方法一：


        //创建一个函数
        function creatPrson(name,age) {
            //创建一个对象
            var obj = new Object();
            //向对象中添加属性
            obj.name = name
            obj.age = age
            //返回对象
            return obj
        }

        var a =  creatPrson('wds',21)

        console.log(a)

方法二：构造函数的创建，详情请看函数那一节

七，其他对象

一，Data对象

JS使用Data对象来表示一个事件

直接使用构造函数创建一个Data对象,就会封装当前代码执行的时间。

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

日期格式：月份/日/年/ 时：分：秒

方法时很多的这里实在是不想列举，也列举不完。

这里我插一句嘴，学到这里的时候我把函数和对象的概念又混淆了，创建构造函数的过程就叫做实例化对象，但是函数和对象又有什么关系呢？前面提到了创建对象的第一步，创建一个函数，这个函数的名字叫做Object，这里我把Object类型和Object函数混淆了，那我们为什么直接就能引用Object函数创建函数呢？浏览器有自己的Object方法，既然这个函数能够直接调用我猜他是写在window对象里面的，然后通过控制台输出this查看window对象，最后果然找到了Object对象，这也解释了为什么不要直接创建函数而是在原型对象中创建函数，这里还有一个问题，实例化对象后对象和构造函数有什么关系呢，这就是一个创建函数的用法，这里我为了区分方法这个词以后我会尽量改成用法，这个用法我目前也没有想法取深入研究，还有第三个问题，在学习的过程中关于this的用法，牢记住谁调用this指向谁，这里还要在提醒自己一下，函数，对象，方法的关系，这里真的混淆了我很长时间了，这个问题其实很简单呢，奈何本人太笨了，得不停的停下来回顾。

二，Math对象

这里一样的有很多，列举一些常见的：

abs() 取绝对值
ceil() 向上取整
PI 这不是方法只是一个属性显示圆周率
floor() 向下取整
round() 四舍五入取整
radom() 生成0-1之间的随机数字

十二，函数

来啦兄弟，他来了

一，什么是函数

函数也是一个对象

函数可以封装一个需求（代码），在需要时可以执行这些功能
函数可以保存一些代码在需要的时候用
使用type of检查一个函数对象时，返回function

创建一个函数

var a = function(

"console.log('666')"

)

可以将要封装的代码以字符串的形式传递给构造函数

封装到函数中的代码不会立刻执行，代码会在调用函数时候执行，封装的代码会按照顺序执行

函数调用的语法

函数名（）；

二，函数的参数

在函数定义的时候在（）中定义一个或多个形式参数

多个形式参数之间用逗号隔开，相当于在函数中声明变量但是不赋值

函数解析器不会检查形参的类型，同时解析器也不会检查实参的数量，多余的参数不会被赋值。

三，函数的返回值

可以使用return返回结果

return 值

return后的值会作为函数的执行结果返回可以定义一个变量来接收返回参数

四，立即执行函数

顾名思义，就是写完之后立即执行的函数，挺抽象的

（function(){

函数体...

}）();

五，构造函数

构造函数和普通函数用法一样，构造函数的首字母大写，构造函数调用的时候需要new关键字

构造函数执行的流程：

立刻创建一个新的对象
将新建的对象设置为函数中的this
逐行执行函数中的代码
将新建的对象作为函数返回值

六，函数的方法

一，call和apply

函数对象的方法,需要通过调用函数执行

在调用call和apply可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this

call方法可以将实参在对象之后依次传递

apply方法可以将实参封装到一个数组中统一传递

七，arguments

封装实参的对象arguments，这个是一个类数组对象，它可以通过索引操作数据，也可以获取长度。

在调用函数时，传递的实参都保存在arguments来使用实参

arguments中有一个属性，这个属性对应着一个函数的对象

十三，方法

创建一个对象之后，对象的属性值可以是一个函数，这个函数作为一个对象的属性保存的时候，这个函数时该对象的方法。

通俗一点的个人理解，直接调用的函数叫函数，调用对象里的函数叫方法。方法和函数只是一个叫法，没有什么区别

这里插一句题外话

for in 语句

for(var a in 对象){

}

十四，作用域

指变量的作用范围

一，全局作用域

直接写在script标签的代码，都在全局作用域

全局作用域在浏览器打开时创建，浏览器关闭时销毁

全局作用域有一个全局对象widow，代表浏览器窗口，可以直接使用

我们创建的对象都会作为window对象的属性保存下来，所以说接上上一节的只是，我们所定义的函数其实就是window对象的方法

使用var关键字声明的变量会在所有代码执行前声明，但是不会赋值。

全局作用域中的变量都是全局变量，在页面任意的一个部分都可以访问的到

二，函数作用域

调用函数时创建的作用域，函数执行完毕之后，函数作用域销毁

每调用一次函数就会创建一个新的函数作用域，他们之间都是互相独立的

函数作用域可以访问到全局作用域，但是全局无法访问到函数作用域

当在函数作用域中使用一个变量，如果没有，就上一级取寻找，直到全局变量，还没有就报错。

三，this

解析器每次在调用函数时都会向函数内部传入一个隐含参数，这个隐含参数就是this，this指向一个对象，以函数的方式调用this时，this指向的永远是window，以方法调用this时this指向的就是调用的那个方法，当以构造函数的形式调用的时候，this就是新创建的那个对象

十五，原型对象

原型prototype

我们算创建的每一个函数，解析器都会向函数中添加一个属性prototype

这个属性对应一个对象，原型对象

函数作为普通函数调用prototype没有任何用处，当函数以构造函数的形式调用时，对象含有一个隐含属性，指向该构造函数的原型对象，我们可以通过下划线proto下划线的来访问该属性。这里的下划线需要写两个

当寻找对象里的一个属性时，现在对象实例对象中寻找，如果没有就去原型对象中寻找

这个时候不能用in检查对象内是否存在属性

要用hasOwnProperty见擦汗对象中是否含有该属性

object对象没有原型，，如果object还没有，就返回undefined，

十六，tostring

当我们在页面上直接打印一个对象时，事件上输出的对象是tostring方法

十七，垃圾回收

垃圾回收GC

程序运行过程中产生垃圾回收机制

举个例子：当一个对象使用之后，对象就不在调用，占用内存，导致程序运行过慢。

JS中有自动的垃圾回收机制，我们不需要也不能垃圾回收的操作。

他只讲了这些但是这里的概念远不止这些，需要之后自行查看

十八，数组

一，什么是数组

数组也是一个对象（Array）

数组也是一个对象

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

对象是使用字符串使用的，二数组使用数字来作为索引操作元素，索引从0开始。

为什么要用数组呢

应为数组的性能效果要比一般的对象要好

用法的话举个例子

var a = []

a[0] = 1

其中有一个方法是length

对于连续的数组，使用length可以获取到数组最大的长度（元素的个数）

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

二，数组的字面量

数组的两种创建方式

方式一：

a = [10]

方式二：

a = new Array(10)

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

三，数组的方法

当然数组中的方法不只有这几个

一，push()

向数组末尾添加一个或多个元素，并返回数组的长度

可以将要添加的元素作为方法的参数传递，自动将这些元素添加到数组的末尾

该方法会将新数组的长度作为返回值返回

二，pop()

该方法删除数组的最后一个元素

三unshift()

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

向前插入元素之后，索引会一次调整

四，shift()

删除数组的第一个元素，并将被删除的元素作为返回值返回

五，slice()

从数组中提取指定元素

参数：

截取开始的位置索引
截取结束的位置索引

这个截取包括开始索引的位置，不包含结束位置的索引，第二个参数可以省略不写，此时会从开始索引截取往后全部的元素，第二个值也可以是负数，负数就是从后向前推进。

六，splice()

删除数组中的指定元素，并将删除的元素作为返回值返回，当第二个元素是0的时候，该方法还能添加元素

参数：

表示开始位置的索引
表示删除的数量
第三个和以后会自动插入到开始的位置索引的前面

四，数组的遍历

将数组中所有的元素都取出来

利用循环

一般的循环我就不写了，基本的循环在学习java基础的时候写吐了

这里我们上黑科技

forEach，IE8以下不支持

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

这样的函数，由我们创建但是不由我们调用的函数叫做回调函数,在这个循环方法的回调函数有三个形参：

第一个参数，当前正在遍历的元素 value
第二个元素，当前正在遍历元素的索引 index
第三个元素，正在遍历的数组 obj

十九，包装类

将基本数据类型转换成对象，有三种number，string，boolean

这个玩意很坑

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

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

浏览器将包装类将其转换为对象，然后调用对象的属性和方法，调用完之后，再将其转换成基本数据类型

二十，字符串的相关方法

底层字符串是以字符数组的形式保存的所以就产生了以下的方法：

方法	简介
charAt()	这个方法索引获取指定的字符
charCodeAt()	获取指定位置的字符编码
formCharCode()	根据字符编码去获取字符
concat()	连接两个或多个字符串
indexof()	检索一个字符串中是否含有指定内容
slice()	从字符串中截取指定的内容返回
substring()	和slice功能一致
split()	将会根据该字符串去拆分数组
toUpperCase()	将字符串转换为大写并返回
toLowerCase()	将字符串转换为小写并返回

二十一，正则表达式

一，正则表达式简介

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

计算机根据正则表达式检验字符串是否符合标准

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

语法：

var 变量 = new regExp("正则表达式","匹配模式") //这个匹配模式作为第二个参数包括：i 忽略大小写，g 全局匹配模式

使用typeof检查正则对象，返回object

正则表达式的方法：

test()使用这个方法可以用来检查一个字符串是否符合正则表达式规则是，符合返回true，否则返回false

二，正则语法

使用字面量创建简单，但是构造函数创建更加灵活

正则表达式的简写方法：

reg = /a/i

1.正则表达式中使用|表示或，或者将内容用中括号包起来[],

例子：

/a|b/ /[ab]/ /[a-z]/

2.中括号里添加尖括号表示除了里面的内容

举例：


/^abc/

3.量词

通过量词设置一个内容出现的次数{n}//正好出现n次，但是量词只对前面的内容起作用

举例：

/a{3}/

/(ab){m,n}/ 后面这个表达式表示ab这个字符出现m-n次如果n不写代表无数次

/a+/ 加号表示至少一个

/a*/ 星号表示0个或多个，有没有都行

/a?/ 问好表示0个或多个

/^a 向上三角表示开头，紧跟着的表示字符串开头必须是，表示结尾必须是a

如果同时包含^和$表示必须完全符合正则表达式


//手机号码的正则表达式
let phone = /^1[3-9][0-9]{9}$/

/*
    在正则表达式中.表示任意字符
    如果想在正则表达式中使用.就要用到转义字符\
    如果是使用字面量创建正则表达式就不需要转义字符
    \在字符串里也是转义字符
*/
var a = /a.\\/

/*
\W 除了字母数字
\w 任意字母数字
\D 除了数字
\d 任意数字
\S 除了空格
\s 空格
\B 除了单词边界
\b 单词边界

*/

三，正则表达式和字符串

就是再使用字符串的相关的方法的时候，我们用正则表达式代替字符串完成方法

二十二，DOM

一，什么是DOM

doucment object model

通过JS操作web页面

节点：Node-html最基本的单元，我们起了一个名字叫做节点，其实本质是一个对象。

节点分类

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性名
文本节点	#text	3	文本内容

二，事件的简介

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

比如：点击事件键盘事件等

当事件被触发的时候，这些代码会被执行

三，文档的加载

js是从上向下执行的，如果script放到body前面就会导致还没有渲染出相应的元素就执行代码从而导致报错

这里用到onload事件，该事件会让JS代码，在页面加载完成之后才开始执行代码。

所以我选择将代码写在下面。

四，DOM查询

获取元素节点

通过document对象调用

getElementById() //通过id属性来获取元素的节点

getElementsByTagName() //通过标签名获取一组元素节点的对象注意这个方法给我们返回一个类数组

getElementsByName() //通过name属性获取一组元素节点

后代子节点

childNode属性获取当前对象里的所有节点，DOM标签里的空白也会当成文本节点。

chidern属性获取当前元素的所有子元素

firstChild可以获取当前元素的第一个子元素

firstElementChild ie8一下不支持

同理last是最后的

父节点，兄弟节点

parentNode当前节点的父节点

previosSibling当前节点的前一个兄弟节点

nextSilbling当前节点的后一个兄弟节点

补充

在document中有一个属性body，它保存的是body的引用，

document中documentElement属性保存的是html根标签

document中all属性代表页面中的所有属性

根据classname查询元素节点

getElementByClassName，注意该方法不支持ie8

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

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

innerHTML标签获取元素内部的HTML，自结束标签不适用。

五，DOM的增删改

这些方法基本上都是通过父节点调用

一，创建

document.creatElement("#")

可以用于创建一个元素节点，他需要一个标签名作为参数，会根据标签名生成元素节点对象，并将创建好的对象返回

document.creatTextNode("#")

可以用来创建一个文本节点对象，需要一个文本内容作为参数，将根据改内容创建文本节点对象，并将创建好的对象返回

appendChild()

向一个父节点中添加一个新的节点，用法，父节点.append(子节点)

insertBefore() 在指定的子节点前面插入新的子节点

二，更改

replaceChild('新','旧') 用新的节点替换旧的节点

三，删除

removeChild("") 删除一个子节点

还有一种方法

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

六，操作内联样式

通过js修改元素的样式

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

注意：如果CSS的样式值含有—，这种名称在JS中是不合法的需要将这种样式名修改为驼峰命名法，去掉—，然后将—后面的字母大写

我们通过style设置的样式都是内联样式，内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

同样的通过style样式读取的样式也是内联样式，无法读取样式表中的样式

但是如果样式中写了！important，则此时的样式会有最高优先级，即使通过JS也不能覆盖央视，会导致JS失效，所以尽量不要为样式添加！important

七，读取元素的样式

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

语法：元素.currentStyle.样式名

它可以用来读取当前元素正在显示的样式

如果当前元素没有显示样式，则获取默认值

注意：但是这个玩意只有ie支持，其他都不支持

getcomputedStyle()这个方法获取元素的样式，这是window的方法，可以直接调用

需要两个参数

第一个：要获取样式元素

第二个：传递一个为元素，不过一般不用直接传递null

该方法会返回一个对象，该对象会返回当前元素的样式

但是这个方法获取没有的样式时，返回当前的值而不是默认值

八，其他样式相关属性

clientWidth

clientHeight

这两个属性回去元素的可见宽度和高度

这些属性都不带xp的，返回都是一个数字，可以直接进行计算

包含的区域为元素内容和内边框

offsetWidth

offsetHeight

获取元素的高度和宽度，包括内容区，内边距，边框

offsetParent

可以用来获取当前元素定位父元素

获取到当前元素最近的开启了定位的祖先元素

offsetLeft

当前元素相对于其定位元素的水平偏移量

offsetTop

当前元素相对于其定位元素的垂直偏移量

scrollHeight

scorllWidth

获取整个滚动条区域的宽度和高度

scrollLeft

scrollTop

获取滚动条滚动的距离

所以当scrollHeight-scrollTop == clientHeight说明滚动条滚动到底了

九，事件对象

onmousemove

该事件会在鼠标在元素中移动时触发

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象最为实参传递响应函数

该对象的属性

十，事件的冒泡

所谓的事件冒泡指的就是事件的向上传导，当后代元素上的事件被触发后，其祖先元素的相同事件也会触发。

要想停止冒泡可以通过取消事件对象来取消冒泡

event.cancelBubbl = true;取消事件冒泡

十一，事件的委派

希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，

将事件统一绑定在祖先元素，这样当后代元素上的事件触发的时候，会一直冒泡到祖先元素

减少事件绑定的次数，提高性能

十二，事件的绑定

使用对象.事件 = 函数的方式绑定响应函数，它只能为对象绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前面的。

要想绑定多个事件

addEventListener()

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

参数：

事件的字符串，不要写on
回调函数，事件触发时该函数会调用
是否在捕获阶段触发事件，需要一个boolean值，子般传false

函数中的this指向该对象

还有一个attachevent()又是ie。

十三，事件的传播

1.捕获阶段

在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，单数你人此时不会触发

2.目标阶段

事件捕获到目标元素

3.冒泡阶段

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

十四，拖拽练习


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: rgb(9, 245, 9);
            position: absolute;
        }
    </style>
    <title>zhendejuele</title>
</head>

<body>
    <div class="box">

    </div>
    <script>

        var box = document.querySelector(".box")

        box.onmousedown = function (event) {
            event = event || window.event;
            var to = event.offsetY
            var le = event.offsetX
            console.log("开始")

            document.onmousemove = function (event) {
                event = event || window.event;
                var top = event.clientY - to
                var left = event.clientX - le

                box.style.left = left + "px";
                box.style.top = top + "px";
            }

            document.onmouseup = function () {
                document.onmousemove = null
                document.onmouseup = null
                console.log("完成")
                return false
            }
        }


    </script>

</body>

</html>

十五，滚轮事件

onmousewheel鼠标滚轮事件，会在滚轮的时候触发

该方法传递参数event

event.wheelDelat 可以获取鼠标滚动方向，向上正值，向下负值

十六，键盘事件

onkeydown 键盘摁下

onkeyup 键盘弹起

这类事件绑定在可以获取焦点的事件或者document

同时可以通过keycode来获取案件的编码

通过它可以判断那个按键被摁下

除了keycode，事件对象还提供了几个属性，altkey，ctrlkey，shiftkey（以上我写的都是方法名第二个字母应该大写，虽然不大写也不报错。。。 0）

二十三，BOM

浏览器对象模型

BOM可以通过操作JS操作浏览器

BOM对象

Window 浏览器的窗口，网页的全局对象
Navigator 代表浏览器的信息，识别不同的浏览器
Location 代表浏览器的地址栏信息，操作页面条状
History 代表浏览器的历史记录，操作浏览器的历史记录，不能获取到具体的历史记录，只能操作浏览器向前向后，而且该操作只在当此访问的时候有效
Screen 用户屏幕信息，一般移动端使用

这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用

还是那句话对象不仅仅只有这几个，有很多。

一，Navigator

判断浏览器是不是ie浏览器，用到的是一个UserAgent属性

二，History

可以用来操作浏览器向前向后

history.length 获取当且造成访问的连接数

history.back()退回到上一个页面

history.forward()跳转到下一个页面

history.go() 有一个数字作为参数，表示向前跳转参数大小的页面，正数向前跳转，负数，向后跳转

三，Location

直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）

如果将location属性直接修改为一个完整的路径，或相对路径则会自动跳转页面，并且生成相应的历史记录

列举一些方法

assign()用来跳转页面

reload()用来重新加载页面，刷新，如果在这个方法中传递一个参数true则会强制刷新页面

replace()可以使用一个新的页面替换，嗲偶用完毕之后也会跳转页面

四，定时器

setInterval()

定时调用

可以将一个函数，每隔一段执行一次

参数：

回调函数，该函数每隔一段时间会调用一次
每次调用间隔的时间，单位是毫秒

返回值：

返回一个Number类型的数据
这个数字用来作为定时器的唯一标识

clearInterval()关闭定时器

二十四，类的操作

之前通过style修改元素的样式，这样不好，应为每一次修改样式都会重新渲染页面

通过修改元素的class属性来间接修改样式。

二十五，json

json就是特殊格式的字符串，字符串可以被任意语言识别，可以在任意语言中转换成对象，所以json主要用来数据传递。

json转换成JS

将js对象

JSON.parse()

JS对象转换成json

JSON.stringify()

以js对象为参数，返回一个JSON字符串

注意：以上的方法不要再ie浏览器中使用，也不管ie那个版本了，不要用就对了。

eval()

这个函数执行字符串js代码，并将结果返回,eval的功能很强大，但是在开发的过程中尽量不要使用，里边涉及到性能较差，并且涉及到安全隐患。

标签：语句,函数,对象,元素,基础,JS,字符串,属性
From： https://www.cnblogs.com/laonianrenws/p/17544403.html

JS基础

js基础

一，js简介

二，js hello world!

三，js书写的位置

四，js的基本语法

五，字面量和变量

六，标识符

七，数据类型

一，String类型

二，Number类型

三，Boolean类型

四，Undefined类型

五，Null类型

六，Object类型（引用数据类型）

八，数据类型转换

一，String

二，Number

三，其他进制的数值

四，转换为boolean

九，运算符

一，基本运算符

二，一元运算符

三，自增自减

四，逻辑运算符

五，赋值运算符

六，关系运算符

七，相等运算符

八，条件运算符和三元运算符

九，运算符的优先级

十，语句

一，条件判断语句

二，条件分支语句

三，循环语句

一，while循环

二，for循环

十一，对象

一，对象简介

二，对象的基本使用

三，属性名和属性值

四，基本数据类型和引用数据类型的区别

五，对象字面量

六，使用工厂方法创建对象

七，其他对象

一，Data对象

二，Math对象

十二，函数

一，什么是函数

二，函数的参数

三，函数的返回值

四，立即执行函数

五，构造函数

六，函数的方法

一，call和apply

七，arguments

十三，方法

十四，作用域

一，全局作用域

二，函数作用域

三，this

十五，原型对象

十六，tostring

十七，垃圾回收

十八，数组

一，什么是数组

二，数组的字面量

三，数组的方法

一，push()

二，pop()

三unshift()

四，shift()

五，slice()

六，splice()

四，数组的遍历

十九，包装类

二十，字符串的相关方法

二十一，正则表达式

一，正则表达式简介

二，正则语法

三，正则表达式和字符串