js基础总结

JS基础
为什么开发js？
    由于拨号上网网速慢，验证信息时间长
js的作用？
    能做各种的网页前端特效
    js能用来在客户端（vscode，网易云音乐,uniapp）
    js能用来做服务器端（Node.js）
js的组成部分：
    ECMAScript：定义核心语法结构
    DOM：文档对象模型
        用DOM来自前端的增删改查
    BOM:浏览器对象模型
js的调试
    console：控制台，展示打印错误信息
    network：展示所有的网络请求
        css/images/js/接口
    application：应用
        cookice/缓存/数据库
js的三中输出方式：
    1、在控制台输出：
        列如：console.log('')
    2、在浏览器弹出信息
        列如：alert('')
    3、在DOM文档输出
        document.write()
js的两种交互方式：
    corfirm（）：确认框
    prompt（）：输入框
js的语法结构：
    1、js区分大小写
    2、js的标识符和命名规则
        标识符：用来定义变量，常    量，函数，类等名称
        命名规则：
            1、标识符可以是字母，数字，下划线和$,但首字母不能以数字开头
            2、不能使用关键字和保留字
    3、注释：
        //:单行注释
        /* */:多行注释
        方法描述：
        /*
        *@param 参数类型 参数名 返回值
        *@return 返回类型
        */
    4、可选的分号
        js中每行语句的结束以分号结束
        建议：
        强制在每条语句的结尾加上分号
        原因：
        1、代码量较大是，不填写分号情况下压缩文件会造成错误
        2、让解析器判断语句是否结束时会影响性能
    5、变量的定义
    定义变量的三种方式：var、let、const（一般用来定义常量）
    区别:
    1、使用var定义的作用于域作用于顶端
    2、let定义的变量的作用域作用于当前代码块
    var可以定义多个同名变量，let只能定义一个
    3、const一般定义常量，不可更改，声明对象可以更改
js两种引入方式？：
<script></dcript>
<script src=''></dcript>
严格模式：
开启严格模式：'use strict'
运算符：
    1、算数运算符：+、-、*、/、%
    2赋值运算符：+=，-+，*=，/=
    3、判断运算符：==，===（恒等于，会判断两边的数据类型和值），
    3、逻辑运算符：&&：与、||：或、！：非
    4、三元运算符：判断条件 ？表达式1：表达式2
js数据类型：
分为基本数据类型和复合数据类型
基本数据类型：整型、字符串、布尔、null和undefined
            null和undefined又称特殊数据类型
复合数据类型：对象（对象、数组、函数）
检查数据对象的数据类型：typeof
整型：整数和浮点数
浮点数相加不准：因为js采用了IEEE754标准，该标椎对于十进制精度不准
tofixed(n):保留n位小数，四舍五入
十六进制：0x
八进制：0o
二进制：0b
Number.MAX_VALUE:js满足的最大值
数值间强制类型转换：
parseInt()/parseFloat()/Number()
转换字符串：
parseInt（）
    1、转换非字符时返回整数位
    2、以字母开头是返回NaN
parseFloat（）
    1、转换非字符时返回浮点位
    2、以字母开头是返回NaN
number：含非数值是返回NaN
转换布尔值时：parseInt（）和parseFloat（）返回NaN
            Number()返回true为1，FALSE为0
转换Null时：parseInt和parseFloat返回NaN
            number返回0
undefined：返回NaN
字符串：
字符模板：`${}`
length():获取字符串长度
复合数据类型：
对象：是值得集合，键值对
创建对象的方式
    1、通过{}来创建
    2 通过new Object()来创建
        var obj = new Object();
    3、通过Object.create()来创建，需要传递对象的原型链
    var obj = Object.create(Object.prototype)
    原型链：
    var obj = new Object()
    Object.prototype.add = function(){

    } 
对象的访问和设置
1、通过对象、属性来设置和访问
2、可以通过对象['属性']设置和访问
this关键字
    在对象中，this关键字代表的是当前对象
对象属性的检测：
in：检测属性是否为自身或继承来的

Dom：文档对象模型（Document Object model）
主要功能：
操作页面上的所有文档结构
document：是文档对象的顶级对象
静态属性：document.doctype:文档结构
document.title：文档标题
document.title = ‘文档标题’
document.body:获取主题内容
document.body.bgColor = ‘文档颜色’
Dom树：
节点：元素节点：由html的元素标签组成的界面
属性节点：html标签属性
内容节点：html中的内容
获取文档对象的方式
1、document.grtElementByid()通过id获取文档属性
同一个页面相同id最好只使用一次
因为获取id时获取不到
2、通过class属性来获取文档属性
document.getElementsByClassName(‘class属性’);
3、通过html标签来获取文档属性
document.getElementsByTagName(‘html标签’)
4、通过name属性来获取文档对象
doccument.getElementsByName(‘name属性’)
5、通过css选择器来获取匹配的单个文档对象
docuemnt.querySelector(‘’)
6、通过css选择器来获取匹配所有的文档对象
document.querySelectorAll()
操作页面样式的三种方式
1、通过style属性来更改样式
注意事项：
Js中style属性采用小驼峰
2、通过class属性来更改样式
1、通过对象.className =
2、对象.classList.add()
移除样式：
对象.classList.Remove(‘’)
对象.classList.contains()：判断样式是否存在
if(common.classList.contains()){
common.classList.remove(‘’)//移除样式
}
js事件：
事件绑定的方式：
1、给对象绑定事件
2、给html标签绑定事件
onclick：鼠标单击事件
操作文本节点（内容）
innerHTML：获取节点下所有的内容，包括html标签
innerText：获取节点下的内容
识别空白行：
childNodes：获取所有的子节点；
firstChild：获取第一个子节点；
lastChild:获取最后一个子节点、
previousSibling:获取上一个兄弟节点
nextSibling：获取下一个兄弟节点
parentNode：获取父节点
不识别空白行：children：获取所有的子节点；
firstElementChild：获取第一个子节点；
lastElementChild：获取最后一个子节点、
previousElementSibling:获取上一个兄弟节点
nextElementSibling：获取下一个兄弟节点
parentElement：获取父节点
移除节点：remove();
创建节点：document.createElement(标签)：动态创建节点
追加节点：append和appendChild
共同点：动态创建的对象追加到尾部
区别：append：支持追加文本内容，appendChild():只支持追加节点
append：支持追加多个，appendChild（）:只支持追加单个
before()：在文档对象前插入节点；
after():在文档对象后面插入节点
Math对象：
Math.round():四舍五入
Math.floor():向下求整
Math.ceil():向上求整
Math.random():创建一个介于0到1之间的随机数
Math.max():最大值
Math.min():最小值
Math.PI():圆周率
字符串对象
1，可以将字符串当做数组来使，通过下标返回值
2、CharAT(下标)：通过下标返回值
3、length():字符串长度
4、字符串位置的查找，存在返回下标，否则，返回-1；
indexOf():从前向后
lastIndexOF():从后向前
5.字符截取：
slice():如果不传值则截取整个字符串
slice(start):从start位置截取到末尾
slice(start,end)从start截取到end位置不包括end；
支持传递负值
substring（）：不支持传递负值
6。split()将字符串转换成数组
7.trim():去掉空白符
trimLeft():去掉左边空白符
trimRight（）：去掉右边空白符
数组：array（）
新增：push():末尾新增一个或多个
pop（）：末尾移除元素
unshift（）；向头部新增一个或多个元素
shift():头部移除元素
splice（）新增和删除多个数据
新增：splice(index，0，val，val,·····)：从index位置新增多个元素
splice（index,num）:从index位置删除num个元素
splice(index,num,val,val,val,····)从index位置删除num个元素新增多个元素
排序：
sort():
1.如果不传值的情况，采用ASCII排序
2.升序：格式：
数组.sort(function(a,b){return a - b})
3.降序：格式
数组.sort(function(a,b){return b - a})
4.倒序：reverse()
元素位置的查找：
indexOf：从前向后存在返回下标，否则，返回-1；
lastindexOf：从后向前存在返回下标，否则，返回-1；
includes():存在true 不存在false；
判断是否为数组：Array.isArray()
foeEach():item:值，index：下标
数组.foeEach(function(item,index){

})
every()：全部满足返回true，否则返回false
some()：有一项满足条件返回true 否则返回falseA
filter():返回条件的元素组成新数组；
map():返回计算后的数组
for in：枚举对象的键
for of：枚举对象的值

事件：
事件对象：var event = e || windown.event
keyCode():

事件源：发起时件的目标对象
事件的绑定方式：
    1.在html元素上绑定事件
    2.在文档上绑定事件
事件冒泡：从最底层往上返
阻止事件冒泡：e.stopPropagation()
事件捕获：window对象==>document ==> html ==> body ==> 快
表单事件：onsubmit()表单提交事件
        onfocus()获取焦点时触发的事件
        onblur():失去焦点时触发的事件
        onchange():内容改变是触发的事件
        oninput():内容输入是触发的事件
键盘事件:onkeypress():按下某个键盘键并释放是触发，如果按住某个键，会不断触发该事件。该事件处理函数返回时，会取消默认的动作
        onkeydown():按下时触发的事件
        onkeyup():松开时触发的事件
鼠标事件：
onclick():鼠标单击事件
ondblclick():鼠标双击事件
onmouseover():鼠标移动上时事件
onmouseout（）：鼠标移开时触发的事件

–>