javascript前端

 包含es+dom、bom+jQuery

ECMAScript：规定了JavaScript的编程语法和基础核心内容

DOM：操作页面中的元素。

BOM：是一套编程接口，重点用于实现交互效果。用于对浏览器进行操作，如刷新页面、弹出警告框、控制页面跳转等。（相关对象、窗口事件以及定时器，浏览器刷新跳转）

正则表达式：对字符串进行处理，重点应用于进行表单验证。

Web服务器与Ajax：数据从服务器动态获取，会随操作发生改变。

jQuary：用于简化DOM和Ajax代码

一、js注释

单行注释：//

多行注释：/*     */

补充：改变多行注释快捷键：vs做下角设置图表中，点击键盘跨界方式，找到shift+ait+A进行修改

二、js输入输出语句

常用输出输入内容：prompt（用户输入内容，弹出输入框）、console.log（浏览器控制台打印输出信息）、alert（弹出警示框）、document.writer('打印的内容可以识别标签')

（弹出输入框）（在控制台给程序人员看的）

注：prompt接收到的字符串类型！！！

三、变量：向内存申请的一部分存储空间

变量名规则：不能以数字开头，不能含有运算符，严格区分大小写，不能使用关键字作为变量名。

命名规则：使用字母数字下划线或者$美元符号、尽量见名知意、驼峰命名法。

常见的关键字：const声明常量、function定义函数、typedef检测变量的数据类型、

声明变量：var 变量名；

赋值：变量名=值；

注：只声明未赋值输出返回的是:undefined(未定义的)

（存取用户输入的内容）

四、数据类型

只有根据赋的值才可以确定数据类型，js的数据类型是会变的！！！

简单数据类型：number数字型（NaN非数值）、boolean布尔值型、string字符串型（推荐使用单引号），undefined

复杂数据类型：object

数组、函数和正则表达式都属于对象。

记住：js中八进制前面加0，十六进制前面加0x

记住：可以通过is NaN判断是否为数字：isNaN(数字)：判断该数字是否为数字返回true和false

字符串转义符：\n换行符、\\斜杠、\‘单引号、\”双引号、\b空格（在字符串中使用）

字符串长度：变量名.length；

字符串拼接：+拼接（字符串和其他类型拼接最终结果都是字符串）

拓展：两个字符串型中间拼接一个变量数字型：（使用变量名）

检测变量的数据类型：typeof 变量名

检测是否为数字：isNAN(值/变量名)

转换为字符串的方式：

（编写代码输出今年的年龄）

布尔类型数据为false的值：空字符串、数字0、NaN、null、undefined

将数据转换为数字型类型的函数：parseInt（）、parseFloat（）、Number（）

将数据转换为字符串型：String（变量名）、toString（）

五、运算符

算数运算符：+、-、*、/、%（%运算结果正负取决于左边书的正负）

递增运算符，递减运算符：++、--

比较运算符：< > >= <=   !=  ==(会默认转换数据类型)   ===(全等，值和类型都相等)

逻辑运算符：&&  ||   ！

&&：如果

赋值运算符：=   -=   +=  *=   /=   %=

将数据类型转换为数值型：parseInt（待转换的值）、parseFloat（待转换的值）、Number（待转换的值）

浮点数精确函数：变量名.ToFixed（小数点后数字的个数）,超过该范围会自动四舍五入，如果省略括号中的数值自动默认值为0.                             注意：该方法返回的值是字符串

将数据转换为字符串型：变量名.ToString（）      注意：括号中可以设置参数设置输出的进制类型

需要由于prompt获取的是字符串类型先将变量c转换为数值型才能进行四舍五入

六、数组：[]包裹

数组是一组数据的集合，每个数据成为元素，数组中可以存放任意类型的元素

创建数组的两种方式：（索引从0开始）

1.利用new创建数组(Array系统内置数组对象！！！)

2.利用数组变量名创建数组：var arr2=[1,'a',"aaa",true];

数组的长度：数组名.length();

数组新增的元素：

修改length长度扩容（有多的empty空元素）

七、函数：function

函数的使用：声明函数、调用函数

声明函数：

function 函数名（参数列表）{ 函数体；}    （函数名一般为动词，不调用不执行）

var 变量名=function(){  };//该函数没有名字称为匿名函数

调用函数：函数名（）；

函数的参数：形参和实参

函数的返回值：return 结果；

arguments伪数组使用：当前函数的内置对象，arguments存储传递的所有实参（形参可以不设置）

八、作用域：变量在某个范围内作用和起效果

es6全局作用域和局部作用域：

全局作用域：整个script标签

局部作用域：在函数内部就是局部作用域

变量：全局变量和局部变量

全局变量：全局都可以使用

局部变量：在局部作用域下的变量

九、对象（Object）：对象是一个具体的实物：{}包裹

对象是一个无序的相关属性和方法的集合，万物皆对象！（用来保存一个人完整的信息）

对象由属性和方法组成：

属性：事物的特征

方法：事物的行为

创建对象三种方法：利用字面量{}创建方法、利用 new object创建对象、利用构造函数创建对象

1.利用字面量创建方法： var obj={    }；//方法就是后面跟一个匿名函数

（最后一个属性不用跟逗号！，sayHi表示方法名）

调用对象的属性：对象名.属性名；

调用方法：对象名.方法名（）；

2.利用new Object创建对象：var obj=new Object();创建一个空的对象

（Object系统自带的内置对象函数）

赋值：obj.属性名=属性值；obj.方法名=function（）{匿名函数体}；
3.利用构造函数创建对象：利用构造函数的过程也称为 

构造匿名函数：利用函数： 重复这些相同的代码和属性，里面封装的是对象（又叫做继承）规范：构造函数首字母大写（类似java的类）

（this必须指向当 前的）

（值就是传进来的参数，可以批量生成对象  ）

注：只要调用new star（）就创建一个对象{}

new关键字执行过程：先创建一个空的对象，this指向该空对象，接着执行函数里的代码给这个空对象添加属性和方法，返回该对象

遍历对象：for in遍历对象

for（变量k或者key  in 对象名）{遍历对变量操作}；

（k相当于是属性的序号）

十、内置对象：Math、日期、数组、字符串

js对象包含：自定义对象、内置对象（前两者属于ES）、浏览器对象（js独有的）

内置对象：js自带的一些对象，提供常用的基本的功能（属性和方法）

学习前端查阅文档的网站：mdn或者w3c    链接🔗：MDN Web 文档 (mozilla.org)

1.Math对象：不是一个构造函数，不需要new来调用直接使用

（直接Math.函数名（）调用即可）

2.Date对象：处理日期和时间，是一个构造函数！！！，必须使用new调用 

如果没有参数，则返回当前系统的时间；

使用：Date.方法名（）；

案例：京东秒杀倒计时，只能使用时间戳转换为毫秒数再相减！！！

  模板：         var d=parseInt(tims/60/60/24);

            var h=parseInt(tims/60/60%24);

            var m=parseInt(tims/60%60);

            var s=parseInt(tims%60);

计算毫秒数的方法：（+new Date（）最常用）

3.数组对象Array：

例如：创建数组对象使用new：var arr=new Array（可以限制长度）；//表示创建一个数组对象

检测是否为数组：

法一：数组名 instanceof Array；如果是则返回true

 法二：Array.isArray（数组名）：返回true和false

添加删除数组元素：

push（添加元素的值）：数组的末尾添加数组元素一个或多个（push完毕返回的是新数组的长度）

unshift（添加元素的值）：在数组的开头添加数组元素

pop():删除数组的最后一个元素

shift（）：删除数组的第一个元素

数组索引方法：

 indexOf（数组元素值）：返回第一个满足条件数组元素的下标索引号（若找不到则返回-1）

lastIndexOf（数组元素）：返回最后一个满足条件数组元素的下标索引号（若找不到则返回-1）

数组转换为字符串：

1.数组名.toString（）:将数组转换为字符串

2.join里面没可以跟分隔符：数组名.join（自定义分隔符）

string字符串对象：

字符串值不可变！！，只是地址变了新开辟了内存空间，因此不要大量拼接字符串，会产生大量空间

 根据字符返回位置：

indexOf（‘要查找的字符’）：返回在字符串中第一次出现的下标

lastIndexOf（‘要查找的字符’）：返回在字符串中最后一次出现的下标

 拼接和截取字符串：

拼接：+

截取：substr（开始索引号，截取长度）、slice（开始位置，结束位置）、substring（开始位置，结束位置）

十一、简单基本类型与复杂类型：

1.简单数据类型：string、number、boolean、undefined、null

简单数据类型放在栈中保存（变量对函数传参对变量本身值没有影响！！！）

2.复杂类型：通过new关键字创建的对象（系统（Object、Array、Date）、自定义）

存放在堆中变量名指向堆的地址！

十二、Web APIs和JS关联：

JS分为es基础语法+（BOM+DOM）

API和WEB API ：前者是应用程序的接口，后者是浏览器功能和页面元素的API（BOM+DOM实现交互效果）

十三、DOM：为了修改js,js 有一套自己的编程接口

1.获取元素：（该内容script标签写在</body>上面）

(1)、通过id获取：ducoment.getElementById（'id名'）

该语句返回整个标签以及文字内容；

(2)、通过标签名获取：ducoment.getElementByTagName（'标签名'）

返回的是获取的元素的集合！遍历节点：节点名.length；该集合索引从零开始

(3)、通过类名获取：ducoment.getElementClassName（'类名'）（支持的版本较高）

2.操作元素：节点都要获取！！

(1)、改变元素内容：

节点.innerText（不会识别html标签，标签也会显示，并且显示会自动去除空格和换行）

节点.innerHTML（可以识别标签）

(2)、修改属性：节点.属性名=新属性值（例如轮播图图片src进行修改）

(3)、操作表单：表单内容的值是通过value来修改的

改变表单的值value：节点.value='值'

disabled被禁用：节点.disabled=true(表示被禁用)或者使用this.disabled=true（这里的this指时间调用函数调用者也就是节点）

(4)、修改样式：

值必须加单引号！！！

节点样式修改少：节点.style.属性名=值；

节点样式修改多：节点.className=新类名；（直接将新类的所有样式替换给当前类，但也会改变当前标签的类名）

十四、事件：被js侦测到的行为并作出操作响应机制

（触发相应的一种机制）例如：点击按钮会切换也米娜或者弹出对话框

1.事件三要素：事件源、事件类型、事件处理程序

格式：事件源.事件类型=function（）{ 执行时间代码块；    }；

(1)、事件源：便是谁被触发需要先获取。

(2)、事件类型：便是如何触发

一般有：鼠标单击（onclick）、鼠标经过onmouseocer、鼠标按下（onmousedown）

(3)、事件处理程序：触发响应的机制，时间

十五：操作元素（改变元素内容、修改属性、操作表单信息value、修改样式）

都要获取节点！！！

1.改变元素内容：innerText、innerHTML

节点.innerText：改变节点内容，但是若内容中含有html标签则取法识别

节点.innerHTML：改变元素内容，会识别标签并进行显示

2.修改属性：（例如：轮播图修改图潘src属性即可跳转）

节点.属性名=‘新属性值’

3.操作表单：（value改变表单的值，表单被禁用，type改变）

value改变表单的值：节点.value=‘值’（改变表单显示的值）

disabled：节点.disabled=true表示已经被禁用（或者使用this.disabled=true，this表示事件函数调用者）

4.修改样式：

节点样式修改少的：节点.style.属性名=属性值

样式修改多：节点.className=新类名（直接修改新类名对应新样式）

补充：对某内容后者节点进行隐藏或者显示（display：none表示隐藏元素；display：block表示显示元素）

十六：自定义属性操作：

不能通过（节点.属性）获取值，由于不知系统自带的属性值

1.获取属性值：节点.getAttribute('属性')

节点.属性名（只能获取内置自带属性）

节点.getAttribute('属性')：可获取自定义属性（属性直接写在标签内部）

2.设置属性值：节点.setAttribute（‘属性’，‘值’）

节点.属性=值，如果是新建可以直接进行设置，不用新建！！

节点.setAttribute（‘属性’，‘值’）:主要针对自定义属性

3.移除属性值：节点.removeAttribute

十七：h5规定自定义属性：属性名date开头

h5新增获取自定义属性值：节点.dataset.（属性名date后面的部分）

十八：节点操作：（DOM中节点用node表示）

补充：document.querySelector（‘css选择器’）经常用！！！！

节点层级：

1.利用父子节点获取：

父级节点：节点.parentNode(得到的是离父元素最近的节点)

子节点：parentNode.childNodes所有子节点（不支持使用，会获取文本节点（换行空格等也算一个节点））

解决办法：通过NodeType判断节点类型数值（若为1则是元素节点，若为3则为文本节点不操作即可）

非标准：parentNode.children获取所有子元素节点

第一个子节点：parentNode.firstElementChild获取第一个节点（设置了Element则限制了元素节点）

最后一个节点:parentNode.lastElementChild获取第一个节点（设置了Element则限制了元素节点）

子节点个数可以用length计算！！！

2.兄弟节点：（标签为并列关系）（了解，用的少）

由于IE9版本以上的浏览器才支持

下一个节点：node.nextElementSibling

上一个节点：node.previousElementSibling

3.创建以及增加节点：（按照父子关系添加）

为页面写动态新增内容

var 父节点=document.createElement('标签名')

父节点.appendChild(孩子节点)：追加放在最后

父节点.insertBefore（孩子节点，指定某元素前（使用子元素的下标））

页面想要添加新元素：必须先创建元素，再添加元素

4.删除节点：

获取的父节点.removeChild（子节点）：删除父节点的子节点（动态的删除）

5.复制节点：

节点.cloneNode（）返回一个节点（括号中为空或者为false表示浅拷贝不复制标签内容，true表示复制标签内容）

十九：创建元素（write、innerHTML、createElement）

document.write（html标签+文字内容）//弊端：会重新加载一个新页面进行显示

innerHTML

createElement('标签名')：推荐使用

二十：DOM高级事件

1.元素注册事件的两种方式：

传统方式：节点.事件名=function (){引起事件发生的程序代码块}；

有一个特点：事件名都是on 开头的

 （也可以把事件写在便签内部！！！）

弊端：只能对一个节点设置一个事件，若设置两个或多个事件前面事件都会被覆盖，具有唯一性

方法监听注册方式：attachEventListener(事件类型，事件处理函数function (){}，可选参数)

特点：同一个元素同一个事件可以设置多个监听器

 

注意：事件类型不加on ,一定要加引号

attachEvent (事件类型，事件处理函数)非标准

此时的事件类型要加on 并且也要加单引号！！！

2.删除事件：该事件使用完一遍后删除事件

传统方式：节点.事件名=null 

 监听删除：removeEventListener(事件名，函数名)

注意：创建事件时，函数不能为匿名函数，调用时不能加括号！！！

3.DOM事件流：

addEventListener(类型，函数，控制哪个阶段) 

如果第三个阶段为true 则处于捕获阶段

捕获阶段:从外层开始传播，依次找是否有点击事件

如果第三个参数为false 或者省略不写，则处于冒泡阶段

4.事件对象：创建事件时函数的参数就是事件对象（写在监听函数的小括号内部）

只有有了事件，事件对象才会存在，是系统自动创建的，该事件对象包含事件的全部信息 

事件对象名字自己定义，常用：e  event   evt 

5.事件对象常见的属性和方法

e.target ：触发事件的对象

利用冒泡捕获，this 是指向绑定

e.type 返回事件类型

e.preventDefault（）：阻止默认事件行为，例如：阻止页面跳转

return false 没有兼容性，可以阻止页面跳转

6.事件委托：事件代理（JQUary中叫做事件委派）

避免访问DOM的次数多，会延长整个页面的交互时间！！！

（1）、事件委托原理（面试常问）：不是每个字节点单独设置事件监听器，而是事件监听器设置在父节点上，利用冒泡原理影响设置每个子节点（只操作了一次DOM）

（由冒泡原理会一次向上冒泡到ul，可以通过e.target获取当前被点击的对象）

（e.target获取当前被点击的元素）

7.常用的鼠标事件：

(1)、普通的网页内容用户是可以直接进行复制的。可以通过禁止鼠标右键

（contextmenu阻止右键行为，也是一个事件类型）

 （阻止默认事件对象，e.preventDefault()）

（2）、禁止选中文字

（3）、鼠标事件对象：（事件对象默认是监听函数的参数）

鼠标事件对象：MouseEvent表示该事件对象为鼠标事件对象

（打印出来e为MouseEvent）

鼠标事件对象应用：

（打印鼠标在可视区（不看滑动的区域）点击的坐标，文档页面（包括滑动的区域））pagex/y更常用

鼠标经过移动事件：mousemove（鼠标每移动1px数值都会变）

8.键盘事件（keyup）对象e：

keycord属性可以得到用户按下键的ASCII值！

键盘事件：（可以通过返回的ASCII值判断用户按下的是哪个键）

keyup和keydown相同不区分大小写（默认都看成大写）

（keyup在键盘弹起的时候才触发，keydown键盘按下触发）

keypress事件区分字母大小写