这篇博客深入探讨了JavaScript的基础，包括ECMAScript语法、DOM（文档对象模型）和BOM（浏览器对象模型）。详细介绍了正则表达式、CSS样式获取、事件处理、数组操作、对象、函数以及数据类型转换。还涵盖了DOM操作、事件监听、BOM中的window对象、location对象以及定时器。最后，提到了ECharts图表库的配置选项，展示了如何设置标题、图例和坐标轴。
关于js(javascript)
注意：分号结尾
扩展：
new RegExp（“正则表达式或字符串或字符”）：该对象用于检索字符串中是否包含正则表达式内的结果
//也可以之间对变量进行 正则表达式赋值 区别只是写法不同
var patt=/a{3，6}/
window.getComputedStyle（已知可以为“标签名”，null）：获取内部样式对象
var box1 = window.getComputedStyle(box, null); //获取内部样式对象
console.log（“字符串”）：控制台输出，支持用加号+连接字符串
confirm（“字符串”）：确认取消 提示窗口 //有返回值，可用在if语句中的条件里
标签内可以设置的“onload”事件：该事件是打开页面后自动触发的事件
静态写法示例：<body οnlοad="alert("这是一个提示窗口")"></body>
动态写法示例：Window.οnlοad=function（）{
alert（“这是onload事件的动态写法”）；
}
或使用函数的形式：
window.onload（
alert("onload事件的动态写法");
）
in运算符：判断一个对象的某个成员是否存在
例： “属性” in 对象 //判断该对象内是否存在指定属性
关于js（javascript）的组成部分：
ECMAScript：Javascript语法
Dom（页面文档对象模型）：html元素，样式，属性
文档：一个页面
元素：所有标签都是元素
节点：文档内所有的内容都是节点（对象）
注（理解）:节点是文档内的最基本单元，标签是节点的同时也是元素
BOM（浏览器对象模型）：bom=dom+地址栏
注意：DOM和BOM都属于Web API
关于button标签中的disabled属性：
.disabled属性：是否禁用按钮
this.disabled=true；//当为true时，按钮会禁用，默认值为false
onclick：点击事件
onmouseover：鼠标滑过事件
onmouseout：鼠标离开事件
document.body.onclick：事件
值进行深拷贝，引用浅拷贝
关于解构赋值：
格式：[a,b]=[1,2];
将右侧挨个赋值给左侧变量
用JS输出文本：
docoment.write("文本");
在JS内部对HTML文本进行修改：
docoment.getElememtById("元素ID").innerHTML="要修改的文本";
button标签内部onclick属性：意思是鼠标单击，后面可跟函数，例 οnclick="function()"
js代码的引入：
内部引入：
js代码必须放在script标签内部，而script标签可以放在body或head标签内部
外部引入：
script标签引入，使用src属性引入外部js文件
可多次引入，可任意位置
注意：如果使用外部引入，那么在script标签内不可以在自定义js代码。不可以内外部混合使用
注意：外部脚本不能包含script标签
js中的注释：
JS单行注释： //
JS多行注释：/* */
关于变量：支持字符、数字、下划线、￥，但不可以数组打头
var：声明一个变量
示例：
var a=10；
一条语句可以声明多个变量，变量与变量之间用逗号隔开，声明时可横跨多行，但是多个变量不可以同时赋同一个值
重新声明同一个变量，该变量的值不会丢失
关于js常见数据类型：
number：整型和浮点型
string：字符和字符串类型
boolean：true/false
undefined：未定义
null：Undefined和Null等价
Object：对象类型
function：函数类型
for....in.... 遍历数组或对象的属性
const 关键字 声明一个常量(在JS当中)
delete 数组【下标】：删除数组元素
alert（“文本”）：消息弹窗
prompt（‘提示信息’）：浏览器弹出输入框，用户可以输入内容，其返回值为string类型
console.log（‘文本’）：浏览器控制台输出信息
document.write("文本"); ：页面上打印输出
js中的数据类型划分：
基本数据类型：整数型、浮点型、布尔型、字符串型、未定义型（undefined）、定型（null）
String类型：
string类型底层是数组且具有length属性，支持下标，但下标不支持负数。例：str[下标]
数字型的特殊值：
【-】lnfinity：无穷大【无穷小】
NaN：非数值
关键字及常用方法：
str.toUpperCase（）：字符串大小写转换
isNaN（值）：当做静态方法即可，用来判断一个变量是否为数值，返回值为true的表示为非数字（疑似“12”判断成了数值）
typeof：进行数据类型检测。例：typeof “asda” （结果string） 或 typeof number==“奥德赛大” （结果false）
注意：返回值是字符串
数据类型之间的转换：
对象+“” ：转换成字符串
toString（）：转换成字符串
string（对象）：转换成字符串
parseInt（对象）：将字符串转换成整数型
parseFloat（对象）：将字符串转换成浮点型
Number（对象）：将字符串转换成数字型
-、*、/：也可用算术运算符来进行转换，只支持-、*、/。此方法不推荐。例：“12”- 1 （结果为11）
Boolean（值）：转换时值为空或者否的转换成false，其他的为true
算数运算符： + - * /
%：取余
递增递减运算符：
++i
i++
--i
i--
比较运算符：
常用的不做介绍
js内特殊的：
===：全等于，值以及数据类型都会做比较
！===：非全等
赋值运算符：
js特殊：
>>=：向右位移，并赋值
<<=：向左位移，并赋值
三元运算符：
条件表达式 ？ true的话执行该语句 ： false 的话执行该语句
switch语句：执行对应的case语句，注意使用break，不然会出现case穿透现象
switch（表达式或者变量）{
case 值
代码块；
case 值2
代码块；
case 值3
代码块；
default：（必然执行的，类似于else）
}
关于数组：
数组具有下标，从0开始
数组创建的两种方式：
1.new Array（）
2.以 [ ] 中括号的形式
遍历数组的方式：
1.for （var i=0；条件语句；i++） //正常遍历
2.for（var 变量名 in 数组名称）// 遍历数组元素的下标
3.for（var 变量名 of 数组名称）//
4.数组名.forEach（function（item）{ //item表示数组的元素内容
console.log（item）； //打印输入元素内容
}）
数组元素的添加和修改：
通过下标来进行元素的添加和修改
数组元素的删除：
delete 数组【下标】：删除数组元素
声明示例：
var arr=new Array(8);
var arr=[value....]
数组具有length属性：
length：数组的长度
函数的简单概括：
函数定义：
1.函数的声明
function 函数名(参数列表...){
函数主体代码
}
2.函数表达式：
var 函数名称=function（参数列表）{
主体代码
}
函数的调用：
1.直接使用函数名称调用
2.使用事件调用
关于函数：
声明格式：
function 函数名 （【参数。。。】，支持设置默认值【参数=“默认值”】，支持不定长参数【...参数】）{
方法体；
return ；
}
arguments：是一个函数内置对象，可以直接调用作用是获取函数调用是传递过来的所有实参，可以和数组一样使用索引访问元素，但不是数组
关于变量：
全局变量
局部变量
块级变量：用“let”关键字声明的变量，仅在 {} 内有效
关于函数表达式（匿名函数）：
拿一个函数赋值给变量（注意：可以没有函数名），通过变量完成函数的调用和参数的传递
示例：
var sum=function(num1,num2){
return num1+num2;
};
另一种调用方式：
（function（num1，num2）{
return num1+num2;
}）(2,3)
箭头函数（匿名函数的另一种表现形式）：
"_"表示没有参数（小括号和中括号可以省略）
格式：
（参数，【参数...】）=>{ 方法体}
参数【....】=>方法体
关于js对象：
注意：多个对象之间用“，”逗号隔开
对象的创建：
1.对象的声明与变量的声明大致相同，但是它的值（字面值）用{ }花括号来包裹对象的成员
2.可以用new关键字来创建对象
例： var obj=new Object（）；
对象包括“属性”和“方法”
属性和方法都是以“键对值”的方式（key：value）进行创建
其中 key ：表示的是 属性名 或 方法名
value ：表示对应的值
例：对象的声明
1. var object = {} //空对象 （字面量的方式创建）
2. var obj=new object（）；//创建一个空对象（new的方式）
例：属性与方法的声明
1. var object = {
name：“小明”，
age：18，
sumMax：function（可选参数）{ //方法
//方法名 方法声明 //方法体内的多个语句用“；”分号分隔}
}
2. var obj=new object（）；//创建一个空对象
//为对象添加成员
obj.属性=值； //属性以赋值的形式进行创建，属性不存在则自动创建
obj.方法名=function（【参数】）{方法体}；
注意：//支持 对象["属性名或方法名"] 的方式进行访问
关于对象中到的构造函数：
//有点像构造方法，但不是，像是一个模板，但更像是一个类和构造方法的结合体（无语子） //或者说方法名
例：function 函数名（参数）{ //可以通过参数传递来进行属性赋值
this.name=name； //支持this，this表示新创建的对象本身
this.方法名=function（）{方法体}；属性与方法都是以赋值的方式
}
关于已存在的Math对象：
直接当做 静态方法来进行调用
方法：
PI：π
abs（参数）：绝对值
max：最大值
min：最小值
pow（base，exponent）：指数幂
random：0.0~1.0的随机数
round（x）：返回四舍五入的整数值
floor（x）：向下取整
ceil（x）：向上取整
关于Date对象：
该对象需要创建一个对象 //实例化，才可以调用方法
new Date（）；// 可以传入参数
Date（年，月，日，时，分，秒）
Date（“2016-10-16 10:54:55”）//固定格式
方法：
getTime（）：获取从1970年1月1日开始到系统当前时间毫秒数
getMonth：获取月份
......略
支持instanceof关键字：数据类型检测
typeof 关键字：返回对象数据类型
数组类型检测：
有两种
1.instanceof关键字
对象 instanceof 数据类型
2.Array.isArray（）：方法，检测是否为数组（该方法为静态）
数组对象的添加删除：
注意：args，多个参数
.push（args）：在数组末尾添加元素，返回值是新数组长度
.unshift（args）：从数组头部添加，返回值是新数组长度
.pop（）：删除数组最后一个元素（有点像弹栈）
.shift（）：删除数组第一个元素
.reverse（）：倒序 ，返回值是 新数组，而不是数组长度
.sort（）：默认从小到大排序 ，返回值是数组长度
参数是 “一个比较函数”
function（a，b）{ return a-b；}//匿名函数
.indexOf（元素）：（从数组头部开始查找）查找元素索引，返回值是元素在该数组内的索引
.lastIndexOf（元素）：（从数组末尾开始查找）其作用与上相同，不存在返回 -1.
.splice（索引开始，个数）：删除从第一个参数开始，数量为第二个参数的元素
.slice（开始，结束）：（参数为索引）截取从第一个参数到第二个参数之间的元素
数组转换为字符串:
.toString()：将数组转换为字符串
.join（“分隔符”）：将数组内的元素用分隔符连接在一起，并以字符串的形式返回
.concat（数组对象）：两个数组进行合并
.fill（元素，索引后，前索引）：插入元素
可能会支持多个元素的插入
string类常用方法：
.length：返回字符串长度
.indexOf（x，【可选参数，从某个下标开始】）：返回该字符的下标（从头开始）
.lastIndexOf（x）：返回该字符的下标（从末尾开始）
.charAt（下标）：根据下标返回字符
.charCodeAt（下标）：根据下标返回该字符的哈希码（不确定）
prompt返回值对象方法：
toLowerCase（）：将所有字母转换为小写字母
toUpperCase（）：将所有字母转换为大写字母
DOM方法：
document貌似是文档页，可以使用 “ . 标签” 的方式来获取元素
document可以替换为 对象
element是元素
tag（元素）.innerHTML（）：获取标签内的文本，保持原样式（包括标签，空格）
element（元素）.innerText（）：获取标签内的文本，只返回纯文本（去掉空格）
element（元素）.textContent（）：获取文本，保持原样式（包括空格，但不包括标签）
document.getElementByld（“id”）：返回拥有指定ID的元素，如果没有返回null，找到多个返回undefined
document.getElementsByTagName（“标签名”）：通过标签名获取元素，返回的是一个伪数组
element.getElementsByTagName（“标签名”）：与上同意
document.getElementsByClassName（“类名”）：通过类名获取元素（标签），返回值是伪数组
document.querySelector(“css 例：.class #id”)：通过css来获取元素，参数也支持标签名（返回选择器指定的第一个对象）
document.querySelectorAll(“css或标签名”)：通过css来获取元素，返回多个元素，参数也支持标签名
css样式的操作修改：
元素.style.样式属性
（注意：css样式属性中有部分需要加“-”，而已当前方式修改则 去掉“-”并且-后字母的首字
母大写）
className：类名属性
.getAttribute（‘属性’）：通过属性获取属性值（支持获取自定义属性）
.setAttribute（‘属性’，属性值）：通过属性设置属性值（支持自定义属性）
支持添加多个样式，属性值之间通过空格隔开
示例：
setAttribute("class","样式名称1 样式名称2 .....")；这样的方式需要我们提前写好
.removeAttribute（‘属性’）：通过属性移除属性
.dataset：设置或获取自定义属性（自定义属性需声明需要‘data-属性’的方式来设置）
关于事件：
事件是指可以被Javascript侦测到的行为，是一种“触发-响应”的机制
事件三要素：
事件源：触发事件的元素
事件类型：如click单击事件（什么事件）
事件处理程序：事件触发后要执行的代码，也称事件处理函数
焦点事件：
onfocus：获取焦点
onblur：失去焦点
关于事件的两种处理方式：
（一）传统方式：
对象.事件=function（）{}
事件唯一性（事件过于单一）
（二）事件监听
******特点：可以给同一个对象添加多个事件处理
早期：
DOM对象.attachEvent（type，callback）
现在：
DOM对象.addEventListener（type，callback，【capture】）；
type：绑定的事件类型（注意：事件监听里的事件类型是不带“on”的）
click：单击
'contextmenu'：上下文菜单
selectstart：文字禁止选中
load：窗口完全加载事件
callback：事件处理程序
capture：ture或false
（三？？）标签属性：
<button οnclick="fn1()">点击触发函数</button>
//onclick属性：鼠标点击事件，点击后会触发js函数
事件删除：
（一）传统：
dom对象.事件=null；
（二）现在：
dom对象.removeEvent（type，callback）
获取事件对象：
btn.οnclick=function(e){ // e是事件对象
var event=e||window.event; //兼容性问题
}
e.target：返回触发事件的对象
e.preventDefault();阻止默认选择
鼠标事件常用方法：（更像是事件类型）
onclick：单击鼠标左键时触发
onfocus：获得鼠标指针焦点触发
onblur：失去鼠标指针焦点触发
onmouseover：鼠标指针经过时触发
onmouseout：鼠标指针离开时触发
onmousedown：当按下任意鼠标按键时触发
onmouseup：当释放任意鼠标按键时触发
onmousemove：在元素内当鼠标指针移动时持续触发
事件方法
page【X,Y】：鼠标在文档中的x，y坐标
client【X,Y】：鼠标在(浏览器??)中的x，y坐标
键盘事件：
类型：
keyup：键按下
keydown：键松开
略...
关于伪数组：
与数组一样可以通过下标来访问元素，
但不可以和数组一样通过plus来添加元素
关于html中自定义属性：
格式： data（表示这是一个自定义属性声明）
data-属性
关于js中的节点：
.aprentNode：获取最近的父节点
.childNodes：返回当前元素所有子节点的集合（支持索引）
.children：只返回子元素节点，其他节点不返回（支持索引）
.previousSibling：前一个节点
.nextSibling：后一个节点
节点方法：
document.write()：创建元素，调用时会导致页面重绘。
document.innerHTML：将内容写入节点
document.createElement(' ')：创建元素节点
document.createTextNode（‘文本’）：创建文本节点
document.createAttribute（‘属性’）：添加属性节点
属性节点.value=‘属性值’
node.setAttributeNode（属性节点）：添加属性节点
node.appendChild（）：在末尾添加节点
node.inserBefore（）：插入节点
node.removeChild（）：删除节点
node.cloneNode（）：对该节点进行拷贝
参数为 true：深拷贝 // 包括该节点的所有子节点
false：浅拷贝 //不包括所有节点，仅仅当前节点
关于BOM：
浏览器对象模型：与浏览器窗口进行交互的对象
核心对象是window（可以看做浏览器）
window：（代表浏览器窗口）
.onload：窗口（页面）加载事件，当文档内容完全加载完成会触发该事件
.onresize：窗口大小事件
.scroll：右侧滚动事件
定时器：
setTimeout（函数，毫秒）：定时器，仅执行一次
setInterval（函数，毫秒数）：定时器，周期性执行，返回值为定时器id
clearInterval（Interval（id））：取消定时器执行
location：
.search：属性，获取地址栏中问号？后面的内容
URL组成：
protocol：网络协议，常用的如http，fp，mailto等
host：服务器的主机名，如www.example.com
port：端口号，可选，省略时使用协议的默认端口，如http默认端口为80
path：路径，如“/web/index.html”
query：参数，键值对的形式，通过“&”符号分隔，如“a=3&b=4”
Echarts篇：以键值对的形式（值得类型为集合或列表）
title：标题
text：文本
x：‘right’ //标题在x轴所在的位置 left certer..
y： //标题在y轴所在的位置
backgroundColor：‘rgba（0,0,0,0,0）’ //背景颜色
borderColor：‘#666’ //边框颜色
borderWidth：数值 //边框粗度
textStyle：字体类型
fontSize：数值 //字体大小
color： //字体颜色
legend：图例项（注意：需要与series的name值保持一致）
data：[‘’文本‘’]
padding：数值 //内边距
itemWidth：数值 //图例项宽度
itemHeight：数值 //图例项高度
textStyle：{} //字体类型
color： //字体颜色
icon：‘circle’ //强制设置图形为圆
‘line’ //强制设置图形为线
xAxis：x轴
data：["x轴信息"]
type：
‘value’ //x轴为值
‘time’ //x轴为时间
name：名字
axisLine：{} //轴线
symbol：‘arrow’ //箭头
yAxis：y轴
type：
‘value’ //y轴为值
‘time’ //y轴为时间
name：名字
min：值 //最小值
max：值 //最大值
position：‘right’ //出现位置
axisLabel：{}
formatter：‘{value}℃’ //格式，设置后缀
series：[{ }] //设置系列列表（图标类型及详细信息）
name：名字
type：‘bar’ //柱形图
‘line’ //折线图
smooth：true //平滑，适用于折线图
data：...
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
