关于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:...