本文共 5038 字，大约阅读时间需要 16 分钟。

一、JavaScript基础

1. 概述

   JavaScript简称JS, 是一种运行在浏览器的脚本语言。

   主要负责页面动态效果, 简单来说, 就是负责让页面动起来。

2. 组成

   JavaScript = ECMAScript + BOM + DOM;

   //ECMAScript:JS的基本语法
   //BOM :浏览器对象模型(Browser Object Model),包含了JS中操作浏览器的相关对象.
   //DOM :文档对象模型(Document Object Model),包含了JS中操作HTML页面的相关对象.

3. 引入方式

3.1 概述

JS是一门脚本语言,所以,理论上来说, JS是不能独立运行的. 他必须书写在html中才能正常运行.所以, 所谓的引入, 其实就是如何在html中书写js.ps: 现在js也可以独立运行了. 而node就是js的运行平台, 类似于java的jre. 运行语法是: node js文件名.js

3.2 内部引入JS

3.3 引入外部JS

3.4 注意事项

1.

4 JS基本语法(与Java不同之处)

4.1 输入输出语句

//弹出警告框alert("提示内容"); //控制台输出 console.log("显示内容"); //页面内容输出 document.write("显示内容");

4.2 变量和常量

//定义变量var 变量名 = 值;	//JS5及其以前let 变量名 = 值;	//JS6及其以后//定义常量const 常量名 = 值;

4.3 运算符

==		//"数值"是否相等===		//"数值"和"类型"都完全相同,才是true

4.4 数组

定义格式

let 数组名 = [元素1,元素2,…];

操作数组

//复制数组let 新数组 = [...旧数组];//合并数组let  新数组 = [...数组1, ...数组2];

注意事项

JS中的数组, 其元素的数据类型和数组的长度没有限制

4.5 函数/方法

定义格式

//方式1function 方法名(参数列表) {    方法体;     return 返回值; }//方式2let 变量名 = function(参数列表) {    方法体; }

注意事项

1.方法调用的格式和Java中的语法一样2.JS中没有方法重载的概念,如果方法名重复,则后定义的方法会覆盖前边定义的方法3.方式2中,等号后边的部分,也称之为"匿名函数"

4.6 可变参数

function 方法名(…参数名) {    方法体;     return 返回值; }

5 DOM

5.1 概述

DOM全称: Document Object Model, 翻译过来叫做"文档对象模型"简单来说, 就是专门用来对HTML文档进行增删改查操作的语法

5.2 获取元素

//根据id属性值获取元素对象let 单个元素 = document.getElementById("id属性值");//根据元素名称获取元素对象们，返回数组let 元素数组 = document.getElementsByTagName("元素名称");//根据class属性值获取元素对象们，返回数组let 元素数组 = document.getElementsByClassName("class属性值");//根据name属性值获取元素对象们，返回数组let 元素数组 = document.getElementsByName("name属性值");// 获取指定元素的父元素let 元素 = 指定元素.parentElement;

5.3 增删改操作

// 创建新的元素let 新元素 = document.createElement("元素标签名");// 将新元素添加到指定元素指定元素.appendChild(新元素);// 删除父元素中的指定子元素父元素.removeChild(指定子元素);// 把父元素中的指定旧子元素替换为新子元素父元素.replaceChild(新子元素,旧子元素);

5.4 操作属性

// 添加属性元素.setAttribute("属性名","属性值");// "设置/修改"class属性元素.className = "class属性值";// 获取属性let 属性值 = 元素.getAttribute("属性名");// 删除属性元素.removeAttribute("属性名");

5.5 操作样式

// 添加样式元素.style.样式名 = "样式值";// 获取样式let 样式值 = 元素.style.样式名;

5.6 操作文本

// 添加文本内容，不解析标签元素.innerText = "文本内容";// 获取文本内容, 只获取文本不获取标签let 文本 = 元素.innerText;// 添加文本内容，解析标签元素.innerHTML = "文本内容";// 获取标签体的所有内容,包含标签let 标签体 = 元素.innerHTML;

6 事件

6.1 事件监听机制

事件监听机制指的就是: 当某些组件发生了某件事之后，会执行对应的某些代码

6.2 绑定事件

方式一

通过标签中的事件属性进行绑定。

方式二

通过 DOM 元素属性绑定。

//当执行元素被单击时,执行对应的方法Dom元素.onclick = 方法;

案例

    
               
    
       上一张    下一张

6.3 常用事件

onload			//页面加载完成onsubmit		//表单提交时onclick			//被单击时ondblclick		//被双击时onblur			//失去焦点时onfocus			//获取焦点时onchange		//内容被改变时

二、JavaScript面向对象

1. 面向对象

1.1 定义对象

let 对象名 = {    属性名 : "属性值",    属性名 : "属性值",        方法名 : 方法};

1.2 使用对象

对象名.属性对象名.方法名()

2 内置对象

2.1 Number

parseFloat()  	//将传入的字符串浮点数转为浮点数parseInt()    	//将传入的字符串整数转为整数isNaN()  		//判断某个东西是否是  非数字

2.2 Math

ceil(x) 	//向上取整floor(x)	//向下取整round(x)	//把数四舍五入为最接近的整数    random()	//随机数,返回的是0.0-1.0之间范围(含头不含尾)    pow(x,y)	//幂运算 x的y次方

2.3 Date

//构造方法Date()  	//根据当前时间创建对象Date(year,month,[day,hours,minutes,seconds,milliseconds]) //根据指定字段创建对象(月份是0~11)//成员方法getFullYear() //获取年份   getMonth() //获取月份 (0-11:代表1-12月)getDate() //获取天数toLocaleString() //返回本地日期格式的字符串

2.4 String

//属性length   //获取字符串的长度//成员方法charAt(index)     	//获取指定索引处的字符indexOf(value)    	//获取指定字符串出现的索引位置substring(start,end)//根据指定索引范围截取字符串(含头不含尾)split(value)   		//根据指定规则切割字符串，返回数组replace(old,new)   	//使用新字符串替换老字符串

2.5 RegExp

正则表达式

概述:		正则表达式是一种对字符串进行匹配的规则规则:			单个字符:[]		如：[a] [ab] [a-zA-Z0-9_]		* 特殊符号代表特殊含义的单个字符:			\d:单个数字字符 [0-9]			\w:单个单词字符[a-zA-Z_0-9]	量词符号：		?		//表示出现0次或1次		*		//表示出现0次或多次		+		//出现1次或多次		{m,n}:	//表示最小m次,最多n次			* m如果缺省： {,n}:最多n次			* n如果缺省：{m,} 最少m次	其他:		^:开始		$:结束

使用步骤

//1.创建正则表达式对象	var reg = /正则表达式/;//2.使用正则表达式	reg.test(字符串); //验证指定的"字符串"是否符合"正则表达式的指定规则"

2.6 Array

push(元素)		//添加元素到数组的末尾   pop()			 //删除数组末尾的元素    shift()			 //删除数组最前面的元素 includes(元素)	//判断数组中是否包含指定的元素 reverse()      	 //反转数组元素sort()           //对数组元素排序join("分隔符")	   //使用分隔符对数组元素进行拼接,返回拼接后的字符串

2.7 Set

// 创建集合对象    let s = new Set();    // 方法add(元素)   	//添加元素delete(元素) 	//删除指定元素// 遍历let st = s.keys();    for(let i = 0; i < s.size; i++){            document.write(st.next().value + "
");    }

2.8 Map

// 创建Map集合对象    let map = new Map();    // 方法 set(key,value)  //添加元素get(key)     	//根据key获取valuedelete(key)  	//根据key删除键值对 // 遍历let et = map.entries();for(let i = 0; i < map.size; i++){    document.write(et.next().value + "
");}

2.9 Json

//1.将对象转换为JSON格式的字符串let str = JSON.stringify(对象);//2.将JSON格式字符串解析成JS对象let obj = JSON.parse(JSON格式字符串);

3 BOM

3.1 BOM概述

BOM全称 : Browser Object Model, 翻译过来叫做"浏览器对象模型"。

简单来说, BOM就是提前定义好的一些可以操作浏览器的一些内置对象

Window		//代表浏览器窗口Navigator	//包含有关浏览器本身的信息Screen		//包含有关客户端显示屏幕的信息History		//包含用户浏览记录相关信息Location	//代表浏览器的地址栏的相关信息

3.2 window对象

① JS定时器

设置定时器:	let 定时器id = window.setTimeout(函数,时间);	//设置一次性的定时器,时间单位毫秒	let 定时器id = window.setInterval(函数,时间);	//设置循环的定时器(一直循环执行下去),时间单位毫秒取消定时器:	window.clearTimeout(定时器id);	window.clearInterval(定时器id);

② 加载事件

window.onload = function(){    //在页面加载完毕后,自动执行该代码}

③ 注意

//在使用window对象的功能时, window本身可以省略, 也就是说://定时器	let 定时器id = setTimeout(函数,时间);//加载事件    onload = function(){        //在页面加载完毕后,自动执行该代码    }

3.2 Location对象

// 获取浏览器地址栏中的内容let url = location.href;// 设置/修改地址栏中的地址location.href = "目标地址";

转载地址：http://vrezi.baihongyu.com/