修改线性渐变色方式 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"
;