jQuery学习ing

jQuery初学
- 入口函数
- jQuery对象和DOM对象
- - 区别
  - 转换
- 选择器 + 迭代
- - 基本选择器
  - 层级选择器
  - 隐式迭代
  - 筛选选择器
  - 链式编程
- 修改样式
- jQuery 效果
- - 显示隐藏效果
  - 滑动效果
  - 淡入淡出效果
  - 自定义效果
- 属性操作
- 内容文本值
- 元素操作
- jQuery 尺寸、位置操作
- - 尺寸
  - 位置
- 事件处理
- - on() 绑定事件
  - off() 绑定事件
  - 自动触发事件 trigger()
- 事件对象
- jQuery对象拷贝
- jQuery 多库共存
- jQuery 插件
- 数据可视化
- ECharts

jQuery初学

jQuery 是一个便利的JavaScript库，j为JavaScript，Query为查询；
作用：封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
优点：

轻量级，不影响页面加载速度；
跨浏览器兼容；
链式编程、隐式迭代；
对事件、样式、动画支持，大大简化了DOM操作；
支持插件拓展开发，有丰富的第三方插件；
免费、开源。

入口函数

等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
相当于原生JS中的DOMContentLoaded。
不同于原生JS中的load事件是等页面文档、外部的JS文件、CSS文件、图片加载完毕才执行内部代码。

顶级对象 $
$ 是jQuery的别称，在代码中可以使用jQuery代替 $ ，通常直接使用 $ 。
$ 是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用 $ 包装成jQuery对象，就可以调用jQuery的方法。

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery --><style>div {width: 100px;height: 100px;background: blanchedalmond;}</style>
</head>
<body><script>// answer one$(function() {$('div').hide();})// answer two$(document).ready(function() {$('div').hide();})</script><div></div>
</body>
</html>

jQuery对象和DOM对象

区别

用原生JS获取来的对象就是DOM对象，只能使用原生的JavaScript属性和方法；
jQuery方法获取的元素就是jQuery对象，只能使用jQuery方法。
jQuery对象本质是：利用 $ 对DOM对象包装后产生的对象（伪数组形式存储）。

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery --><style>div {width: 100px;height: 100px;background: blanchedalmond;}</style>
</head>
<body><div></div><script>// DOM对象let div = document.querySelector('div');console.dir(div);div.style.display = 'none';// jQuery对象console.log($('div'));$('div').hide();</script>
</body>
</html>

转换

DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

DOM对象转换为jQuery对象：$(DOM对象)

$('div');

jQuery对象转换为DOM对象

$('div')[index]; // 法 1
$('div').get(index); // 法 2
// index是索引号

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script> <!-- 引入jQuery --><style>video {width: 400px;height: 500px;}</style>
</head>
<body><video src="imag/lovely.mp4" muted></video> <!-- muted静音播放 --><script>// 1.DOM对象 转换为 jQuery 对象let _video = document.querySelector('video'); // DOM对象_video.play();$('_video'); // jQuery对象// 2. jQuery对象 转换为 DOM对象$('video')[0].play();$('video').get(0).play();</script>
</body>
</html>

选择器 + 迭代

原生JS获取元素方式很繁杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统标准。

基本选择器

$('选择器'); //里面选择器直接写CSS选择器即可，但是要加引号

层级选择器

隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程，叫做隐式迭代。给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

筛选选择器

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery --><style></style>
</head>
<body><div><li>one</li><li>two</li><li>three</li><li>four</li></div><ol><li>one</li><li class="item">two</li><li>three</li><li>four</li></ol><script>$(function() {console.log($('.item').parent()); // 查找亲父级$("div li").css('color', 'red'); // 选择div下的所有孩子，隐式迭代$('ol .item').siblings('li').css({"color":"red","font-size":"22px"});let index = 3;$('div li:eq(3)').css('color', 'green');$('ol li').eq(index).css('color', 'green');})</script>
</body>
</html>

链式编程

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<body><button>1</button><button>2</button><button>3</button><script>$(function() {$('button').click(function() { // 隐式迭代$(this).css('background', 'yellow');$(this).siblings('button').css('background', '');// 链式编程$(this).css('background', 'yellow').siblings('button').css('background', '');$(this).siblings().parent().css('background', 'yellow');})})</script>
</body>
</html>

修改样式

jQuery可以使用 css 方法来修改简单元素样式，也可以操作类，修改多个样式。

参数只写属性名，则是返回属性值；
参数是属性名，属性值，逗号分隔，是设置组样式，属性必须加引号，值若是数字，可以不用跟单位和引号；
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<body><div style="background: yellowgreen; width: 100px; height: 100px;"></div><script>$(function() {console.log($('div').css('background'));$('div').css('width', 200);$('div').css({backgroundColor: 'green',// 复合属性必须采用驼峰命名法, 且值不为数字时按'字符串'处理height: 200})})</script>
</body>
</html>

设置类样式方法：
类似classList，可以操作类样式，参数添加时不加.

jQuery 效果

jQuery API 速查表中文文档

显示隐藏效果

显示语法规范：

show([speed], [easing], [fn])
hide([speed], [easing], [fn])
toggle([speed], [easing], [fn])

隐藏参数
(1) 参数都可以省略，无动画直接显示。
(2) speed：三种预定速度之一的字符串( “slow” ，“normal” ， “fast” )或表示动画时长的毫秒数值(如：1000)。
(3) easing：(Optional)用来指定切换效果，默认是"swing" ，可用参数"linear”。
(4) fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<body><button>show</button><button>hide</button><button>toggle</button><div style="background: yellowgreen; width: 100px; height: 100px;"></div><script>$(function() {$('button').eq(0).click(function() {$('div').show('slow');})$('button').eq(1).click(function() {$('div').hide('formal', 'linear');})$('button').eq(2).click(function() {$('div').toggle('fast');}) // 一般不加这种效果，直接显示隐藏})</script>
</body>
</html>

滑动效果

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.top {margin: 100px;}.top>li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.top li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.top>li>a:hover {background-color: #eee;}.top ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.top ul li {border-bottom: 1px solid #FECC5B;}.top ul li a:hover {background-color: #FFF5DA;}
</style>
<body><ul class="top"><li><a href="#">MY</a><ul><li><a href="">私</a></li><li><a href="">论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微</a><ul><li><a href="">信</a></li><li><a href="">评</a></li><li><a href="">me</a></li></ul></li></ul><script>$(function() {// 一 ↓$('.top>li').mouseenter(function() {$(this).children('ul').slideDown();})$('.top>li').mouseleave(function() {$(this).children('ul').slideUp();})// 二 ↓$('.top>li').hover(function() {$(this).children('ul').slideDown();}, function() {$(this).children('ul').slideUp();})// 三$('.top>li').hover(function() {$(this).children('ul').stop().slideToggle();}) // stop停止动画排队})</script>
</body>
</html>

淡入淡出效果

fadeIn([speed], [easing], [fn])
fadeOut([speed], [easing], [fn])
fadeToggle([speed], [easing], [fn])
fadeTo([speed], opacity/*透明度取值0~1*/, [easing], [fn]) //opacity、speed必须填值

自定义效果

animate(params, [speed], [easing], [fn])

params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft，其余参数都可以省略。

<html> <!-- 手风琴ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<style>* {margin: 0;padding: 0;}div {position: relative;width: 800px;margin: auto; height: 80px; background: rgb(189, 184, 184);overflow: hidden;padding: 10px;}.big {display: none;position: relative;width: 150px;height: 80px;}.small {position: absolute;left: 0;top: 0;width: 80px;height: 80px;border-radius: 5px;}li {width: 80px;height: 80px; /* 宽高 */margin-right: 10px;list-style: none;float: left;position: relative;}
</style>
<body><div><li><a href="#"></a><img src="imag/pass.png" class="small"><img src="imag/back1.jpg" alt="" class="big"></li><li><a href="#"></a><img src="imag/wait.png" class="small"><img src="imag/back2.jpg" alt="" class="big"></li><li><a href="#"></a><img src="imag/wrong.png" class="small"><img src="imag/back3.jpg" alt="" class="big"></li><li><a href="#"></a><img src="imag/icon1.png" class="small"><img src="imag/back4.jpg" alt="" class="big"></li><li><a href="#"></a><img src="favicon.ico" class="small"><img src="imag/back1.jpg" alt="" class="big"></li></div><script>$(function() {$("li").mouseenter(function() {$(this).stop().animate({ // 记得排队width: 150 // 改宽}).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();}) // 小图显示，大图隐藏，↓同理$("li").mouseleave(function() {$(this).stop().animate({width: 80}).find('.big').stop().fadeOut().siblings('.small').stop().fadeIn();})})</script>
</body>
</html>

属性操作

设置获取元素（固有）属性值 prop
所谓元素固有属性，就是元素木身自带的属性，比如< a >元素中的href、< input >元素中的type。

prop('属性') // 设置属性语法
prop('属性', '属性值') // 获取属性语法

设置获取元素（自定义）属性值 attr
用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index = “1”。

attr('属性', '属性值') // 设置属性值
attr('属性') // 获取属性值

数据缓存 data
data()方法可以在指定的元素里存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。同时，还可以读取HTML5自定义属性data-index，得到的是数字型

data('name', 'value') // 设置数据
data('name') // 获取数据

内容文本值

主要针对元素的内容、表单的值进行获取设置操作。

普通元素内容 html（相当于原生innerHTML）

html()      //获取元素的内容
html("内容")  //设置元素的内容

普通元素文本内容 text（相当与原生innerText）

text()       //获取元素的文本内容
text("文本内容")    //设置元素的文本内容

表单的值 val（相当于原生value）

$("input").val() // 获取
$('input').val("123") // 设置表单的值

查找父级

$(this).parent().parent().parent() // 查找繁琐
$(this).parents('.first') // 找出类名为first的父级
$(this).parents() // 查出所有父级，为一个父级伪数组

保留n位小数

(sum).toFixed(n); // sum保留n位小数

遍历元素 each
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

$.each(object, function(index, element) {})

each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象。
里面的函数有两个参数：index是每个元素的索引号、element 遍历内容。

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<style>
</style>
<body><div>1</div><div>2</div><div>3</div><script>$(function() {let sum = 0;let a = ["red", "pink", "blue"];$('div').each(function(i, domEle) {// i 为节点索引号可自己设定，domEle为DOM元素对象可自己命名$(domEle).css("color", a[i]); // 不存在domEle.css需将DOM对象改为jQuery对象sum += parseInt($(domEle).text());console.log(sum);})})</script>
</body>
</html>

元素操作

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<style>
</style>
<body><ul><div>1</div><div>2</div><div>3</div></ul><script>$(function() {// 创建元素节点let div = $("<div> div's brother </div>");let ul = $("<ul> ul's brother </ul>");// 添加元素节点// 1. 内部添加$('ul').prepend(div); // 最前添加$('ul').append(div); // 最后添加// 2. 外部添加$("ul").before(ul); // ul前添加兄弟$("ul").after(ul); // ul后添加兄弟// 删除元素$('ul').remove(); // ul节点全部删除 ==> 自杀$("ul").empty(); // 清空ul的所有孩子 === $("ul").html("");})</script>
</body>
</html>

jQuery 尺寸、位置操作

尺寸

若参数为空，则是获取相应值，返回的是数字型；反之为设置相应值，无需带单位。

位置

offset() 设置或获取元素偏移

offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。该方法有2个属性left、top。

offset().top // 用于获取距离文档顶部的距离
offset().left // 用于获取距离文档左侧的距离。
offset({top: 10, left: 30 }); // 可以设置元素的偏移

position() 获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以html文档为准。只能获取，不能设置。

scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧

事件处理

单个事件处理函数：

$("div").click(function() {}); //

on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。

element.on(events, [selector] , fn);

events：一个或多个用空格分隔的事件类型，如 click 或 keydown。
selector：元素的子元素选择器。
fn：回调函数即绑定在元素身上的侦听函数。

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="imag/favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<style>div {width: 100px; height: 100px; background-color: beige;}.current {background-color: rgb(173, 117, 117);}
</style>
<body><div></div><script>$(function() {$("div").click(function() { // 单个事件绑定$(this).css({backgroundColor: "skyblue"})})$("div").on({ // 多个事件绑定mouseenter: function() { $(this).css({backgroundColor: "skyblue"})},mouseleave: function() {$(this).css({backgroundColor: "blue"});},click: function() {$(this).css({backgroundColor: "beige"})}})$("div").on("mouseenter mouseleave", function() {$(this).toggleClass('current'); // 绑定同一事件})})</script>
</body>
</html>

可以事件委派操作。事件委派的定义，就是把原来加给子元素身上的事件绑定在父元素身上，即把事件委派给父元素。
【注意】在此之前有bind、live、delegate等方法来处理事件绑定或者事件委派，最新版本用on。
可以给未来动态创建的元素绑定事件。

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="imag/favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<body><ul><li>111</li><li>222</li><li>333</li></ul><script>$(function() {$("ul li").click(function() { // 点击第4个被添加的li，无法触发事件alert("It's OK!");})// 子级li委派给父级ul$("ul").on("click", "li", function() { // 动态绑定元素alert("It's OK!");})$("ul").append($("<li>hello~</li>")); // 添加第4个li})</script>
</body>
</html>

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="imag/favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<style>li {list-style: none;display: none;}a {float: right;}
</style>
<body><div style="width: 400px; height: 400px; margin: auto;">weibo:<textarea name="" id="txt" cols="30" rows="10"></textarea><button>submit</button><ul></ul></div><script>$(function() { // 发布评论$("button").on("click", function() {let li = $("<li></li>");let long = $("#txt").val().replace(/(^\s*)|(\s*$)/g, ""); // 正则表达式去空格if(long != "") {li.html(long + "<a href='javascript:;'>delete</a>");$("ul").prepend(li);li.slideDown();}$("#txt").val(""); // 清空})$("ul").on("click", "a", function() {$(this).parent().slideUp(function() {$(this).remove(); // 移除li});})})</script>
</body>
</html>

off() 绑定事件

off() 方法可以移除 on() 方法添加的事件处理程序。

$("p").off(); // 解绑p元素所有事件处理程序
$("p").off("click") // 解绑p元素上面的点击事件, 后面的 foo 是侦听函数名
$("ul").off("click"，"li"); // 解绑事件委托

如果某事件只想触发一次，可以使用one()来绑定事件。

自动触发事件 trigger()

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click(); // 第一种简写形式
element.trigger("click"); // 第二种自动触发模式
element.triggerHandler("click"); // 第三种自动触发模式，不会触发元素的默认行为(例如光标不闪烁)

事件对象

事件被触发，就会有事件对象的产生。

element.on(events, [selector], function(event){})
event.preventDefault() == return false // 阻止默认行为
event.stopPropagation(); // 阻止冒泡

jQuery对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法
语法∶

$.extend([deep], target, object1, [objectN])

deep：如果设为true为深拷贝，默认为false浅拷贝
target：要拷贝的目标对象
objectN：待拷贝到第N个对象的对象（被拷贝）
浅拷贝，deep默认false，把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象，（被覆盖）。
深拷贝，deep为true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象。

<html> <!-- ex.html -->
<head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="imag/favicon.ico" type="image/x-icon"/><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<body><script>let originObj = { // 被拷贝对象sex: '女',name: 'susan',msg: {age: 18,telephone: 12345}},afterObj = { // 目标对象sex: '男',hobby: {first: 'play tennis',second: 'play chess'},msg: {age: 20,address: 'Hunan'}};$.extend(afterObj, originObj); // 浅拷贝console.log(afterObj); // 相同属性被覆盖，不同属性保留，但类似msg中的不同属性不保留$.extend(true, afterObj, originObj); // 深拷贝console.log(afterObj); // 相同属性被覆盖，不同属性保留，但类似msg中的不同属性保留</script>
</body>
</html>

jQuery 多库共存

jQuery使用 $ 作为标示符，随着jQuery的流行，其他JS库也会用这 $ 作为标识符，这样一起使用会引起冲突。jQuery解决方案让jQuery和其他JS库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery解决方案∶

把里面的 $ 符号统一改为jQuery。比如：jQuery("div")
jQuery变量规定新的名称：$.noConflict() 或 var xx = jQuery.noConflict();

jQuery 插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。
【注意】这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。
jQuery插件常用的网站：1.jQuery之家 2. jQuery插件库
jQuery插件使用步骤∶
1.引入相关文件。(jQuery文件和插件文件）
2.复制相关html、 css、js(调用插件)。

jQuery插件演示

瀑布流
图片懒加载（图片使用延迟加载在可提高网页下载速度，它也能帮助减轻服务器负载）当我们页面滑动到可视区域，再显示图片。【使用jquery插件库中的EasyLazyload】
【注意】此时的JS引入文件和JS调用必须写到DOM元素（图片）的最后面
全屏滚动 fullpage.js 中文翻译网站
Bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件。

数据可视化

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息，可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。
范围：通用报表、移动端图表、大屏可视化、图编辑及图分析、地理可视化。

HTML5 + CSS3布局
CSS3 动画、渐变
jQuery库 + 原生JavaScript
flex布局和 rem适配方案
图片边框 border-image
ES6模板字符
ECharts可视化库

ECharts

ECharts是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
使用步骤：
步骤1：下载并引入echarts.js文件
步骤2：准备一个具备大小的DOM容器
步骤3：初始化echarts实例对象
步骤4：指定配置项和数据(option)
步骤5：将配置项设置给echarts实例对象

<html>
<!-- ex.html --><head><meta charset="UTF-8"><title>JavaScript_Exercise</title><link rel="shortcut icon" href="imag/favicon.ico" type="image/x-icon" /><script src="JS/fastclick.js"></script><script src="JS/jQuery.min.js"></script><script src="JS/bootstrap.min.js"></script><script src="JS/echarts.min.js"></script> <!-- 步骤1 -->
</head>
<style>.box {width: 600px;height: 600px;/* 必须有宽高 */background: rgb(245, 239, 239);}
</style><body><div class="box"></div><!-- 步骤2 --><script>let myChart = echarts.init(document.querySelector('.box')); // 步骤 3let option = {// 步骤 4title: {text: 'Stacked Line' // 标题},tooltip: {trigger: 'axis' // 经过坐标轴时触发提示框组件},legend: {data: ['Video Ads', 'Direct', 'Search Engine']},grid: { // 网格 left: '3%', // 左边距占比right: '4%',bottom: '3%',containLabel: true // 是否显示刻度},toolbox: { // 工具栏组件feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false, // x轴刻度位置data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value' // 根据数据自动调整y轴},series: [{name: 'Video Ads',type: 'line',stack: 'Total1',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total2',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total3', // 总量逐步叠加data: [820, 932, 901, 934, 1290, 1330, 1320]}]};myChart.setOption(option);// 步骤 5</script>
</body></html>

基本使用：
选实例 ——>查文档 ——>看配置项手册（查阅功能）——>改配置
title：标题组件
tooltip：提示框组件
legend：图例组件
toolbox:工具栏
grid：直角坐标系内绘图网格
xAxis：直角坐标系 grid 中的x轴
yAxis：直角坐标系grid中的y轴
series：系列表，每个系列通过type决定自己的图表类型
color：调色盘颜色列表
series：系列列表
type：类型(什么类型的图表)比如line是折线bar柱形等name:系列名称，用于tooltip的显示，legend的图例筛选变化stack:数据堆叠。如果设置相同值，则会数据堆叠。
数据堆叠：第二个数据值 = 第一个数据值＋第二个数据值
第三个数据值 = 第二个数据值＋第三个数据值——依次叠加
如果给stack指定不同值或者去掉这个属性，则不会发生数据堆叠。

边框图片设计剪裁：

jQuery 学习笔记相关推荐

jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
jQuery学习笔记02：核心部分
jQuery学习笔记:核心部分一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素参数:expr(字符串,一个查询表达式或一段html字符串 ...
jQuery学习笔记01：初试jQuery
jQuery学习笔记01:初试jQuery 一.下载jQuery jQuery官网:https://jquery.com 二.案例演示--Welcome to jQuery World 1.在WebS ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
jquery学习笔记（-）
Jquery学习笔记(-) Jquery的简介 Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k),兼容各种浏览器(IE6.0+,FF1 ...
jQuery学习笔记开篇
开始学习人见人爱花见花开的jQuery. jQuery是一个轻量级,快速简洁的javascript框架.它的官方网址是(http://jquery.com/).jQuery的优点是它容量小巧,简洁和简 ...

jQuery 学习笔记