W3C HTML DOM标准

1.整个文档是一个文档节点
2.每个HTML元素是一个元素节点
3.HTML元素内文本是文本节点
4.HTML属性是属性节点

使用DOM树能干什么

1.JavaScript 能够改变页面中的所有HTML元素
2.JavaScript 能够改变页面中的所有HTML属性
3.JavaScript 能够改变页面中的所有CSS样式
4.JavaScript 能对页面中所有事件作出反应

简介

JavaScript是由美国网景通信公司开发的一种跨平台网页，面向对象object-oriented网页脚本语言

JavaScript代码可以直接嵌入HTML文件中，随着网页一起传送到客户端浏览器，然后通过浏览器来解释执行

JS是前端开发的的核心语言，基于事件和驱动的解释性，松散型语言

JS的解释性，松散型理解？

1. 解释性：边执行边解释，在浏览器环境下运行
2. 松散型：定义变量的时候，不需要强类型，直接弱类型，定义的变量不需要声明类型

特点

1. 脚本编写语言
2. 基于对象
    可以被看作是一种面向对象的语言，这意味着JavaScript能运用其已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用
3. 跨平台性
4. 事件驱动
5. 简单弱类型
    JavaScript是一种基于Java基本语句和控制流之上的简单而紧凑的设计
    变量类型是采用弱类型，并未使用严格的数据类型
6. 解释性执行
    不像这些语言需要先编译，而是在程序运行过程中被逐行地解释

作用

1. 实现动态页面(将动态内容添加到页面中)
2. 数据验证
3. 响应事件
4. 可以检测浏览器

事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
onclick 单击事件

ondblclick 双击事件

onmouseout 鼠标移出

onmouseover 鼠标移入

onscroll 元素滚动事件

onmousewheel 鼠标轮滚动事件





语法

几种常见弹窗方式

alert(""); 提示框带确认按钮
输出方式: document.write("");
confirm("")弹出个确认框，待确认的取消按钮
prompt('显示信息内容'); 弹出个输入框, 让你输入东西

书写格式

1
var 自定义变量名 = document.getElementById("名字");
1
2
3
4
5
6
7
var //声明

document //文档内

function 方法名(){
    自定义变量名.属性名="属性值";
}
1
2
3
自定义变量名.事件名=function(){
    自定义变量名.属性名="";
}
1
getElementById //get 获取 Element 元素 Id 选择器

改HTML最简单的方法是使用innerHTML属性

1
2
3
4
5
6
7
标签的文字内容用innerHTML修改

document.getElementById("").innerHTML="内容";

输入框的值用value修改

document.getElementById("").value="内容";

改HTML样式使用

1
2
document.getElementByid("").style.属性="值";

变量

储存数据的容器

例：
var x = 1

后台输出

1
2
3
4
5
6
7
8
9

console.log(typeof)

typeof 查看变量类型

typeof:运算符  判断数据类型

声明未赋值 变量返回Underfind

获取变量值

1
2
3
4
5
变量名.value

b.onclick = function(){
    p.innerHTML = a.value;
}

检测类型

1
2
3
typef 变量名

方便用法：alert(typef 变量名)

元素属性和属性值在JS获取中运用（动态获取元素属性值）

1
2
3

.setProperty(属性,属性值)

全局变量

声明在函数之外的变量

声明变量时没有var关键字时就默认为全局变量

局部变量

声明在函数体内的变量
只能在当前函数体内访问

声明变量时没有var关键字时就默认为全局变量

JS基本数据类型

1. number 数值类型

    包括整数和浮点数

2. string  字符串类型

    用单引号或双引号括起来的零个或多个单一的字符所组成

3. boollean 布尔类型
    取值为true 和 false

4. underfined  未定义值

5. null 空类型

    null取值只有null

字符串转换数字

字符串汉字开头和字母开头不能转

1
2
parseInt()仅能返回整数
直接截取整数部分
1
2
parseFloat() 字符串转浮点型
只取到第一个小数点
1
Number() 转换数值包括整数和浮点数

数组的书写格式

1
2
3
4
5
6
7

var 数组名 = new Array(元素名,元素名,元素名,元素名)
// 完整

var 数组名 = [元素名,元素名,元素名,元素名]
// 简写

class搭配数组使用

1
2
3
4

var 变量名 = document.getElementsByClassName("类名")
    变量名[下标].属性 = "属性值"  // 不是重新设数组，看第几个class按下标走

循环

for循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//for 循环，遍历多个数组length长度

for(var 变量名 = 赋值 ; 变量名<数组名.length ; 变量名++){
    数组名[变量名].事件名 = function(){

    }
}

数组名  // 准备循环的数组名

变量名  //  循环定义的变量名

this.style.color //this 元素本身的意思

while循环—等待更新

1

判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if(判断条件){

} else{

}

------

if(){

}else if(){

} else{

}


运算符

算术运算符

1
2
3
4
5
6
7
8
9
+ // 加
- // 减
* // 乘
/ // 除
% // 取模取余
++ // 自增运算符

-- // 自减运算符

关系运算符

1
2
3
4
5
6
7
8
9
> //大于
< //小于
>= //大于等于
<= //小于等于
=  // 赋值
==  // 等于
!=  //不等于
===  //全等于
!==  //不全等

逻辑运算符

1
2
3
4
5
6
7
8
9

//多条件连接符

&& 逻辑与运算  //多条件全都满足才能输出

|| 逻辑与运算  // 所有条件满足其一，可以输出

! 逻辑非运算   //

赋值运算符

1
2
3
4
5
6
7
8
9
10
11
12
13

= 赋值

+=   //a = a+b  a += b

-=

*=

/=

%=

自增&自减

++在后例子：

1
2
3
4
5
6
7
变量设为i

var i = 1;
var a = i++;  //i先将自身的值赋值给变量a，然后再自增1
alert(a)  //输出1
alert(i)  //输出2
          // ++在后，先计算表达式，再给i自加1

++在前例子

1
2
3
4
5
6
7
8
变量设为i

var i = 1; 
var a = ++i; //i先将自身的值自增1，再将自增后的值赋值给变量a
alert(a)  //输出2
alert(i)  //输出2
          // ++在前，先给自身加1，再计算表达式

–在后例子：

1
2
3
4
5
6
7
变量设为i

var i = 4;
var a = i--;  //i先将自身的值赋值给变量a，然后再自减1
alert(a)  //输出4
alert(i)  //输出3
          // --在后，先计算表达式，再给i自减1

–在前例子：

1
2
3
4
5
6
7
变量设为i

var i = 4;
var a = --i;  //i先将自身的值自减1,再将自减后的值赋值给变量a
alert(a)  //输出3
alert(i)  //输出3
          // --在前，先给自身减1，再计算表达式

定时器

1
2
3
4

setInterval(变量名, 时间) //定时器
1000 = 1s

滚动事件

1
2
3
4
5
6
document.body.scrollTop  
//鼠标滚动到身体顶部

document.documentElement.scrollTop; 
 //鼠标滚动到所有元素顶部

保留两位小数

1
2
3

toFixed(2) //保留两位小数

过渡效果

1
2
transition:all 1s 过渡效果

功能效果实现

生成随机四位字符串

1
2
3
4
5
6

Math.random().toString(36).slice(-8)
    // Math.random()  生成随机数字
    // .toString(36)  转化成36进制
    // .slice(-4) 取最后四位