JS基础教程-优快云博客

JS：一种解释性语言，不需要编译，由浏览器进行解释和JAVE没有关系（前端语言）

JS作用：增强客户端的交互效果

JS技术体系：

ECMAScript:ES5 ES6 :定义语法规则及提供一些内置对象

BOM:提供对浏览器的相关操作

DOM：提供网页的相关操作

变量：为存储数据，在内存中开辟的一个地址空间，相当于一个容器

变量名规则

变量名组成：数字字母下划线 $

变量名首字符不能为数字

变量名不能为关键字

规范

1.见名知意

2.驼峰命名法

帕斯卡命名（每个单词首字母大写）

ECMA

数据类型转换

1.转换成布尔

Boolean()

//字符串 true

//数字除0以外都为true

//undefined null fales

2.把非数值转换成数值

Number() parseInt() parseFloat() Number()下 undefined 转换为数值类型为NaN Null、fales 转换为数值类型为0 true为1

//Number() 整体转换

//parseInt() 整型不包括小数点

原理：从左到右，一位一位的取出来进行转换，如果有一位不能转换为数字就停止转换

//parseFloat() 浮点型包括小数点，但只认一个小数点原理同parseInt()

3.转换成字符串

值.toString()

Undefined和null不能转换为字符串

关系运算符比较时

两个操作数都是数值，则数值比较

两个操作数都是字符串，则比较两个字符串对应的字符编码值

两个操作数有一个是数值，则将另外一个转换为数值，再进行数值比较

Switch（表达式）{

Case 常量1;

语句;

break;

Case 常量2;

语句;

break;

...

default;

语句;

break;

}

注：case值，判断的是全相等

Case值，必须是常量

Case常量值不能相同

Case 没有顺序之分

default 可以省略，可以放在任意位置

注意：当条件满足某一个情况时，就不在进行条件的判断，从上到下执行，直到遇到break结束

循环

循环是什么：循环是反复执行的代码块、程序段

组成：初始条件条件判断循环体条件改变

当型循环 while for

直到型循环 do while

场景：次数固定用for循环

次数不固定，用while或 do while

Break: 应用于Switch 与循环结构：作用是，跳出当前结构，在switch结构里，就是跳出switch结构，在循环跳出循环结构。

Continue:只应用于循环结构，作用是，结束本次循环后面的代码，进行下一次循环。

数组

数组是一种可以储存相同性质数据的变量

数组组成：数组名数组下标数组元素

数组声明：6种

一般搭配循环使用

数组的操作（增删改查）

数组新增

1.var arr=[]

arr[0]=12

Arr[2]=12

2.var arr=new Array（）

3.arr[myArray.lenth]=34

4.arr.push() 在数组尾部插入元素

5.arr.unshift() 在数组的首部插入一个元素

删除

arr.pop() 默认删除数组最后一个元素

arr.shift() 删除数组的尾部元素

其他方法

Join() 转换字符串拼接

Sort() 元素排序

a .sort(function(a,b){

return a-b

}

)

Math对象

Math.random() 0到1之间的随机数取得到0 取不到1

Var o1=parseInt(Math.random()*10); //0-9之间的数

Var o2=parseInt(Math.random()*10+1); //1-10之间的整数

（Math.random()*9+1） //1-9之间的整数

parseInt（Math.random()*(最大值-最小值+1）+最小值

堆栈操作队列操作

函数

变量与函数都会提前声明但是变量不会提前赋值如果是函数内的局部变量只会提前到函数内最前面声明

函数调用

1.直接函数名（）

2.函数调用其他函数

3.函数调用当前函数（递归）

变量

全局变量：在函数外声明的就叫做全局变量任何函数都可以访问

局部变量：在函数内声明的都是局部变量只有函数内部可以访问

注当没有var 时我们默认这个变量是全局变量

String 对象

charAt 语法

A.charAt(8) 返回对应下标位置上的字符从0开始数

concat 字符串的连接 str.concat(str2,str3,...)

slice(7,10) 包含第一个参数指定的位置和所有到但不含第二个参数指定位置之间的所有字符从最后开始截取 -3 -1 从倒数第三个到倒数第一个

substring 参数不能为负数

substr(7,10) 从第七个位置开始至后面的10个字符

replace(a,b) 用b替换a

spilt(“”) 分隔字符串

trim 取消无效空格

Date 对象

Var a=new Date

a.getFullyear()

a.getMonth()+1

a.getDate

DOM

Document Object Model 文档对象模型

一个Window对象有一个document属性引用了Document对象

Document对象表示窗口内容，他是一个巨大的API中的核心对象，他代表操作文档的内容

docunment:文档节点代表整个文档也代表根节点

Element:元素节点

Text:文本节点

Attr:属性节点

Comment:注释节点

注意：因为属性节点实际上是附属于元素的，所以不被看做是元素的子节点，因为并没有被当做是DOM的一部分。在属性节点上调用parentNode，previousSibling和nextSibling都返回null。

了解DOM我们需要了解：

1 在文档中查询元素

2 将文档作为节点树来遍历，找的节点的祖先、兄弟和后代

3 查询和设置文档的属性

4 查询、更改文档的内容

5 创建、插入、删除节点来修改文档

1.nodeType

元素节点，nodeType为1

属性节点，nodeType为2

文本节点，nodeType为3

文档节点，nodeType为9

2.nodeName 节点名 (标签名属性名 #text)

3.nodeValue 节点值注：元素节点的节点值为null或undefined 属性节点节点值为属性值文本节点为文本内容

hasChildNodes 判断是否有子节点

获取节点

document.body.childNdes 字节点集合

document.body.getElementById（）单个节点

document.body.getElementsByTagName() 节点集合

document.body.getElementsByClassName() 节点集合

document.body.getElementsByName("name") 节点集合

document.body.getAttrbute("class") 获取属性节点只能在单个元素节点中使用

父节点 parentNode

上一个兄弟节点 previousSibling

下一个兄弟节点 nextSibling

创建节点

document.createElement() 创建元素节点

document.createTextNode() 创建文本节点

设置节点属性

var obj=document.getElementById（"div"）

obj.setAttribute(属性name,属性value)

obj.id="id名"

增加节点

document.body.append（）

移除节点 //需要找到操作元素的父节点

document.body.remove() //需要找到操作元素的父节点

替换节点

document.body.replacechild(新节点，旧节点) //需要找到操作元素的父节点

插入节点

document.body.insertBefore(新节点，旧节点) //需要找到操作元素的父节点

获取最终样式

document.defaultView.getComputedStyle(元素节点，null)

操作文本节点

删除 .deleteData(起始位置，个数）

添加 .appendData(起始位置，末尾添加的内容）

插入 .insertData(起始位置，插入的内容）

替换 .replaceData(起始位置，个数，替换的新内容）

.Data(“ ”) //空白清除

mainObj.innerHTML=mainObj.innerHTML+”新内容” 在元素内部添加

mainObj.outerHTML=mainObj.outerHTML+”新内容” 在元素外添加添加到元素前只需要把新内容写在”+”号前面

事件流

1.事件冒泡（IE）

2.事件捕获（NetsCape）

3.DOM事件流捕获阶段目标阶段冒泡阶段

传统事件绑定方法

优点兼容性强缺点维护困难，并且只能绑定一个处理程序

1.直接在标签上加On事件

2.指定函数 Window.onclick=test //test为一个函数名

匿名函数 window.onclick=function(){ }

解除事件绑定的方法 window.onclick=null 匿名函数不能用此方法解除绑定

现代事件绑定方法

优点一个事件可以绑定多个处理程序缺点兼容性不好

DOM方法

绑定：Obj.addEventLister(“click”,test,false) 默认false 采用冒泡机制

移除：Obj.removeEventLister(“click”,test,false)

IE方法

绑定：Obj.attachEvent(“onclick”,test)

解除：Obj.detaEvent(“onclick”,test)

BOM

Window.open(“url”,”新窗口名”，”新窗口属性”）

Window.go ) -2退后两页 1前进一页

Window.location.href=”www.baidu.com”

定时器

SetTimeout(function(){},毫秒数）延迟多少毫秒后执行函数

Var a=setInterval(function(){},毫秒数）每隔多少毫秒循环执行函数

clearInterval(a) 清除定时器

JS初学总结