修改线性渐变色方式 1color: new echarts.graphic.LinearGradient( //
(x1,y2) 点到点 (x2,y2) 之间进行渐变 0, 0, 0, 1, [ { offset: 0,
color: ‘#00fffb’ }, // 0 起始颜色 { offset: 1, color: ‘#0061ce’ }
// 1 结束颜色 ] ),
// 修改线性渐变色方式 2color: { type: ‘linear’, x: 0, y: 0, x2: 0,
y2: 1, colorStops: [{ offset: 0, color: ‘red’ // 0% 处的颜色
}, { offset: 1, color: ‘blue’ // 100% 处的颜色 }],
globalCoord: false // 缺省为 false},
以上为渐变线性可CV代码块
前端重要知识点汇总
01 html
1.1 标签类型
- 块级元素
特性：独占一行，可以设置宽高
举例：div、p、ul、h1~h6 - 行内元素
特性：一行显示多个，不能设置宽高，只能依靠内容撑开元素
举例：span、em、strong - 行内块元素
特性：具备块级和内联的优势，一行显示多个，可以设置宽高，默认由内容撑开
举例：button、input
3.11 函数
3.11.1 概念
把一个做好的事情包装起来，随时拿出来反复调用
3.11.2 申明
function 函数名() {
//函数体代码
}
var 函数名 = function (){
//函数体代码
}
备注：两者基本等价
3.11.3 调用
函数名()
备注： （）可以调用函数 ，函数不调用不执行
3.11.4 参数
函数的参数分为形参和实参，实参是实际的内容，真实的诉求，而形参是函数内用来接收实参的一个变量
function 函数名(形参1,形参2) {// 可以定义任意多的参数，用逗号分隔 var 形参1 = 实参1 ...
//函数体代码
}
// 带参数的函数调用
函数名(实参1,实参2)
备注：
1.在函数体内 相当于 var 形参1 = 实参1 …
2.实参和形参个数尽量做到一一匹配
3.11.5 arguments
arguments 相当于函数的实参集合
function 函数名(形参1, 形参2 , 形参3...) {
// 函数体
arguments // 实参集合，是一个伪数组 相当于 var arguments = [形参1, 形参2 , 形参3,...]
}
函数名(实参1, 实参2, 实参3...);
3.11.6 return
-
返回数据
将函数 return后的内容 返回到函数调用处，方便其他地方使用
function 函数名(){
…
return 需要返回的值；
}
console.log(函数名());
备注：需要返回的值可以是函数运行最终的结果，也可以是任意的内容 -
停止函数
终止函数后续代码的运行
function 函数名(){
执行代码1
return
不执行代码2
}
备注：执行代码1 ，但不执行代码2
3.12 内置对象
3.12.1 常用数学对象
属性、方法名 功能
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() 绝对值
Math.max()/Math.min() 求最大和最小值
Math.random() 获取范围在[0,1)内的随机值
3.12.2 常用日期对象
使用Date实例化日期对象
-
获取时间对象
var now = new Date();
-
设置时间对象
var future = new Date(‘2020/6/1’);
var future = new Date(‘2020-07-01 12:12:12’); -
获取对应时间日期
属性、方法名 功能 特殊情况
date.getFullYear() 返回年
data.getMonth() 返回月 0-11 — 0代表1月
data.getDate() 返回日
data.getDay() 返回星期 0-6 — 0代表周日 — 6代表周6
data.getHours() 返回时
data.getMinutes() 返回分
data.getSeconds() 返回秒
备注：date是new Date()来的实例对象
3.12.3 常用数组方法
方法名 功能 说明
push(num） 添加数据 把num添加至数组的最后
join(‘,’) 拼接（数组转字符串） 把数组拼接成一个字符串，中间用 ‘,’ 号连接
indexOf(‘num’) 获取索引 获取num内容对应的索引，如果不存在返回 -1
slice(start,end) 截取 从数组的索引start位开始截取，截取至end位(但取不到end位)
3.12.4 常用字符串方法
方法名 功能 返回值
replace(old,new) 替换字符串 返回新的字符串
slice(start,end) 截取 从字符串的索引start位开始截取，截取至end位(但取不到end位)
split(’-’) 切割（字符串转数组） 返回新的数组
04 jsApi
4.1 获取元素
- 获取单个元素
var el = document.querySelector(‘选择器’)
备注：获取的是单个元素，可直接使用 - 获取多个元素
var els = document.querySelectorAll(‘选择器’)
备注：获取的是多个元素的集合（伪数组），不能直接使用，需要通过数组方式获取出里面的元素
4.2 操作元素内容
- 获取元素内容
var html = el.innerHTML - 设置或修改元素内容
el.innerHTML = ‘标题
’;
备注：innerHTML可以设置页面内容，并且把html文本变成页面结构
4.3 操作元素属性
- 获取元素属性
var attr = el.src
var attr = el.href
var attr = el.checked
备注：获取元素属性分为普通属性和表单属性，把元素当作对象使用，所以获取方式一致 - 设置元素属性
el.src = ‘./1.img’;
el.href = ‘./1.html’;
el.checked = true;
type：类型、value：表单值、checked单选复选被选中状态、selected下拉被选中状态、disabled禁用
4.4 操作元素自定义属性
- 获取元素自定义属性
var attr = 对象.getAttribute(‘属性名’);
var attr = el.getAttribute(‘data-id’);
备注：html5标准要求在写自定义属性的时候前面加上data-，方便区分普通属性和自定义属性 - 设置元素自定义属性
var attr = 对象.setAttribute(‘属性名’,‘属性值’);
var attr = el.setAttribute(‘data-id’,‘myid’);
4.5 操作元素行内样式
- 获取元素行内样式
语法：元素.style.样式属性
var style = el.style.width
var style = el.style.backgroundImage - 设置元素行内样式
语法：元素.style.样式属性 = ‘样式属性值’
el.style.width = ‘100px’
el.style.backgroundImage = ‘./1.img’
备注：
1.通过el.style.样式的方法，设置的为行内样式
2.设置的css属性过长，请使用驼峰命名
4.6 操作元素类名
- 获取元素类名
语法：元素.className
var myclass = el.className; - 设置元素类名
语法：元素.style.样式属性 = ‘样式属性值’;
el.className = ‘class1’;
el.className = ‘class1 class2’;
备注：
1.class是关键字，所以不能直接使用class来设置类名
2.设置类名的时候，会覆盖之前元素身上的类名
4.7 操作元素节点
- 获取父元素
var el = el.parentNode - 获取所有子元素
var els = el.children - 获取第1个子元素
var el = el.firstElementChild
备注：也可以采用el.children[index]对元素进行获取，el.children[0]用于获取第一个子级元素节点 - 获取最后1个子元素
var el = el.lastElementChild
备注：也可以采用el.children[index]对元素进行获取，el.children[children.length-1]用于获取最后一个子级元素节点 - 获取上一个兄弟元素
var el = el.previouElementSibling - 获取下一个兄弟元素
var el = el.nextElementSibling - 创建元素
var divNode = document.createElement(‘div’); - 添加节点(后面)
el.appendChild(divNode)
备注：把divNode这个元素放在el元素内部的最后 - 添加节点(指定位置)
el.insertBefore(divNode,targetNode)
备注：把divNode这个元素放在el元素内部并且是targetNode元素的前面 - 删除元素
el.removeChild(child);
备注：必须要先找到被删除元素的父级，再在父级元素内删掉里面的子元素 - 克隆元素
var cloneNode = el.cloneNode(Boolean);
备注：
1.如果Boolean为false（默认）,则为浅拷贝，只拷贝最外层的标签元素
2.如果Boolean为true,则为深拷贝，拷贝元素并且拷贝元素内的所有后代元素
4.8 主要事件
鼠标事件类型 单词 备注
鼠标点击 onclick
鼠标移入 onmouseover/onmouseenter onmouseenter 没有冒泡问题
鼠标移动 onmousemove
鼠标移出 onmouseout/onmouseleave onmouseleave 没有冒泡问题
键盘按下 onkeydown 识别功能键
键盘按下 onkeypress 识别大小写
键盘弹起 onkeyup
获取焦点 onfocus
失去焦点 onblur
表单内容改变 onchange
页面加载 onload
页面尺寸改变 onresize
页面滚动 onscroll
jQuery
5.1入口函数
$(function () {
... // 此处是页面 DOM 加载完成的入口
})
5.2 获取元素
语法
var jq元素集合 = $('选择器');
举例
var dom = $('div'); //通过标签选择
var dom = $('.class');//通过类名选择
var dom = $('#id'); //通过id选择
var dom = $('ul li'); //通过后代选择
5.3 获取元素（筛选方法）
- 获取父级
var el = $(dom).parent() - 获取祖先中的某一个元素
var el = $(dom).parents(‘选择器’) - 获取子级
var el = $(dom).children() - 获取子孙后代中的某一个
var el = $(dom).find(‘选择器’) - 获取上一个兄弟
var el = $(dom).prev() - 获取之前所有兄弟
var el = $(dom).prevAll() - 获取下一个兄弟
var el = $(dom).next() - 获取之后所有兄弟
var el = $(dom).nextAll() - 获取所有兄弟
var el = $(dom).siblings() - 获取集合中第N个
$(“dom”).eq(N)
5.4 操作样式
5.4.1 操作行内样式
5.4.1.1 获取单个行内样式
var width = $(dom).css('width');
5.4.1.2 设置单个行内样式
$(dom).css('width','300px');
5.4.2 操作行内样式
5.4.2.1 设置多个行内样式
$(dom).css({ 以对象方式作为集合css样式的书写方式
'width':'300px',
'height':'300px',
'backgroundColor':'red'
});
5.5 操作类名
5.5.1 新增类名
$(dom).addClass('myclass');
$(dom).addClass('myclass1 myclass2');
备注：不会覆盖之前的class，只做新增
5.5.1 删除类名
$(dom).removeClass('myclass');
5.5.1 切换类名
$(dom).toggleClass('myclass');
5.6 操作页面
5.6.1 获取标签内容
var html = $(dom).html();
5.6.2 设置标签内容
$(dom).html('<p>标签</p>');
5.6.3 获取表单内容
var html = $(dom).val();
5.6.4 设置表单内容
$(dom).val('内容');
5.6 操作元素属性
5.6.1 获取固有属性
var prop = $(dom).prop('type');
5.6.2 设置固有属性
$(dom).prop(‘type’,'text');
5.6.3 获取自定义属性
var prop = $(dom).attr('data-index');
5.6.4 设置自定义属性
$(dom).attr('data-index','999');
5.7 页面效果
5.7.1 显示元素
$(dom).show();
5.7.2 隐藏元素
$(dom).hide();
5.8 操作元素
5.8.1 创建
var html = $('<h1>新标签</h1>'); 需写全html标签
5.8.2 添加
- 元素内部后面添加
$(dom).append(html); - 元素内部前面添加
$(dom).prepend(html);
5.8.3 删除
$(dom).remove();
备注：找到dom元素，一起删除掉
5.9 遍历
$(dom).each(function(i,el){ 在所有js里最特殊的，索引在前，元素在后！其他的都是调转过来的！
i 索引
el 元素
});
备注：类似于for循环，找到所有dom元素，依次循环
5.10 元素尺寸、位置、卷去距离
5.10.1 获取元素宽度
$(dom).width();
5.10.2 设置元素宽度
$(dom).width(300);
5.10.3 获取元素高度
$(dom).height();
5.10.4 设置元素高度
$(dom).height(300);
5.10.5 获取元素到文档顶部的位置
$(dom).offset().top
5.10.6 设置元素到文档顶部的位置
$(dom).offset({ 使用offset设置位置元素时，必须使用对象书写形式！
top:300
})
5.10.7 获取元素到文档左侧的位置
$(dom).offset().left
5.10.8 设置元素到文档左侧的位置
$(dom).offset({ 使用offset设置位置元素时，必须使用对象书写形式！
left:300
})
5.10.9 获取元素被卷去的距离（顶部）
$(dom).scrollTop()
5.10.10 设置元素被卷去的距离（顶部）
$(dom).scrollTop(300)
5.11 绑定事件
5.11.1 普通事件绑定
$(dom).click(function(){}) 鼠标点击触发
$(dom).mouseenter(function(){}) 鼠标经过触发
$(dom).focus(function(){}) 获得焦点
5.11.2 on方法绑定事件
$(dom).on('click',function(){})
$(dom).on('mouseenter',function(){})
$(dom).on('mouseenter mouseleave',function(){}) 鼠标经过，离开触发函数function
备注：给dom元素绑定一个click 事件
5.11.3 on方法给动态添加的元素绑定事件
$(dom).on('click','.mybox',function(){})
备注：给dom元素下面，类名叫mybox的元素绑定点击事件 （mybox这个元素可以是通过js动态添加进页面的内容）
06 js高级
6.1 类
概念
泛指一种类型，对象特指某一个东西
类和构造函数功能一样，类的本质就是构造函数，但比构造函数好用（继承），是构造函数的语法糖，都可以用来批量创建对象。
使用
举例：
class Father {
constructor(name) {
// 类的属性
this.name = name;
// this.car()
}
car() {
// 类的方法
console.log(this.name + '要开车')
}
}
var y = new Father('yj')
var yb = new Father('yjbaba')
y.car() //yj要开车
yb.car() //yjbaba要开车
6.2 继承
概念
自己没有的方法和属性，可以使用别人的
使用
举例：
class Father {
constructor(name) {
// 类的属性
this.name = name;
// this.car // 调用方法
}
car() {
// 类的方法
console.log(this.name + '要开车')
}
}
class Son extends Father {
constructor(name) {
super(name)
// this.study() // 调用方法
}
study() {
console.log(this.name + '要学习')
}
}
var s = new Son('yj')
s.study() //yj要学习
s.car() //yj要开车
备注：
1.继承的好处：自己没有的可以找别人、爸爸要，爸爸有，就可以直接用，依次类推
2.super() 相当于调用了父类，而且super()必须放到this的前面，不然会报错
3.构造函数也能实现属性和方法的继承，但是麻烦很多，所以优先使用类
6.3 原型
概念
- 原型也叫原型对象
- 每一个构造函数都默认存在一个原型(实例对象也可以访问到原型)
- 原型可以共享方法，让代码性能更佳
使用-构造函数访问原型
构造函数.prototype 可以访问到原型对象
// 普通写法：
function Star(){
this.run = function(){}
}
// 优化写法：
Star.prototype.run = function(){}
区别：
1.普通写法：每个通过new Star() 创建实例对象后都有一个独立的run函数
2.优化写法：所有通过new Star() 创建的实例对象都共享同一个run函数
注意：使用类的话，无论什么写法都等同于优化后的写法
使用-实例对象访问原型
实例对象.proto 也可以访问到原型
function Star(){
this.run = function(){}
}
var yj = new Star()
yj.__proto__ === Star.prototype //true
注意：proto 是浏览器提供的，非标准的
6.4 constructor
概念
constructor就是类或者构造函数的构造器
作用
constructor能够让我们知道当前的实例对象，到底指向谁，谁是创造者
6.5 构造函数三角关系
构造函数--------.prototype--------------原型对象
new __proto__
实例对象
6.6 原形链
概念
原形链其实就是实例对象找爸爸的过程，每一个实例对象在调用方法的时候，优先自身，如果自身没有就都会通过__proto__去找到原型对象身上的方法。而原型对象也有自己的原型对象（原型对象又是其他构造函数的实例），这样一来，会不断的顺着__proto__向上访问，直到null为止，这个找方法的过程就是原形链
使用
实现继承后，就能调用祖辈的方法和属性
作用
- 增加实例对象的方法
- 减少重复代码的开发，提高效率
注意：原形链的查找规则，就近原则，先看自己，再看原形，再顺着原形链继续向上找
6.7 es5新增循环方法
forEach
可以遍历数组、类数组(伪数组)
arr.forEach(function (value, index, array) {
console.log("每个数组元素" + value);
console.log("每个数组元素的索引号" + index);
console.log("数组本身" + array);
});
filter
数组方法，遍历数组（过滤数组），去除不需要的项，并且返回新数组
var newArr = arr.filter(function (value, index, array) {
console.log("每个数组元素" + value);
console.log("每个数组元素的索引号" + index);
console.log("数组本身" + array);
return value % 2 === 0;//满足条件的返回
});
map
数组方法，遍历数组（加工数组），可以给数组的每一项进行加工，并且返回新数组
var newArr = arr.map(function (value, index, array) {
console.log("每个数组元素" + value);
console.log("每个数组元素的索引号" + index);
console.log("数组本身" + array);
return value+'yj为你打call！！！';//加工每一项
});
some
数组方法，遍历数组（判断是否存在符合条件的项），并且返回是否成功的状态
var flag = arr.some(function (value, index, array) {
console.log("每个数组元素" + value);
console.log("每个数组元素的索引号" + index);
console.log("数组本身" + array);
return value < 3;
});
every
数组方法，遍历数组（判断每一项都是否存在符合条件），并且返回是否成功的状态
6.15 模板字符串
概念
避免了字符串之间+号的拼接问题以及不需要再担心单引双引的问题
使用
反引号把内容括起来，里面的可以放变量和表达式用${}表示
let name = ‘吴彦祖’;
let age = 17;
let fn = ()=>‘我唱歌贼溜’
let str = 我是叫吴彦祖${name}，今年${age+1}岁，${fn()},请访问我的个人博客"www.baidu.com";
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
