jQuery 教程 | 菜鸟教程jQuery 教程 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 本章节的每一篇都包含了在线实例 通过本站的在线编辑器，你可以在线运行修改后的代码，并查看运行结果。 实例 [mycode3 type='javascript'] $(document).ready(function(){ $('p
https://www.runoob.com/jquery/jquery-tutorial.html学习JQuery & 了解使用Echarts图
包括学习JQuery、Json以及cookie的一些芝士
注：cookie(主要学习的是JQuery提供的，当然JavaScript也有自己的cookie)
jQuery Cookie 插件 | 菜鸟教程
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery.min.js"></script><script src="js/jquery.cookie.js"></script><script src="js/jquery补充.js" defer></script><style>div {width: 200px;height: 100px;background: pink;}</style>
</head><body><div>hello</div><input type="button" value="生成新元素" class="btn"><table border="1"><thead><tr><th>id</th><th>name</th><th>age</th><th>sex</th></tr></thead><tbody><!-- <tr><td>1</td><td>张三</td><td>20</td><td>男</td></tr><tr><td>1</td><td>张三</td><td>20</td><td>男</td></tr><tr><td>1</td><td>张三</td><td>20</td><td>男</td></tr> --></tbody></table></body></html>.js文件
//一、jquery绑定事件
// 1、直接调用事件函数
// $("div").click(function() {
// alert(1)
// })// 2、用on函数绑定事件 on(事件类型，回调函数) 可以绑定多个事件，事件之间空格隔开 绑定JavaScript原生方法
// var aa = "dblclick mouseenter"
// $("div").on(aa, function() {
// alert(1)
// })// 3、给未来元素（动态元素）绑事件 on(事件类型，目标元素，回调函数) 可以绑定多个事件，事件之间空格隔开 绑定JavaScript原生方法
// $("body").on("click", "div", function() {
// alert(1)
// })// $("input").on("click", function() {
// $("body").append("<h2>新生成的元素</h2>")
// })
// $("body").on("click", "h2", function() {
// alert(1)
// })//二、dom jdom
// dom-- - > javascript
// jdom-- - > jquery
// jdom dom转换
// dom-- > jdom $(dom)
// jdom-- > dom jdom[0]// $("input").click(function() {
// alert(1)
// })// $("input")[0].onclick = function() {
// alert(1)
// }// var aa = document.querySelector("input")
// $(aa).click(function() {
// alert(1)
// })// 三、ajax发起请求
// $.ajax({
// url: "", //请求路径
// type: "", //请求类型 get查找 post添加，删除，修改
// data: {
// account: "admin",
// password: "123456"
// }, //参数域
// async: true, //异步请求 true false
// success: function(value) { //成功的回调函数// },
// error: function() { //失败的回调函数// }
// })// $.ajax({
// url: "../json/test.json", //请求路径
// type: "get", //请求类型
// async: true, //异步请求 true false
// success: function(value) { //成功的回调函数
// console.log(value)
// for (var i = 0; i < value.length; i++) {
// console.log(value[i])
// $("tbody").append("<tr>" +
// "<td>" + value[i].id + "</td>" +
// "<td>" + value[i].name + "</td>" +
// "<td>" + value[i].age + "</td>" +
// "<td>" + value[i].sex + "</td>" +
// "</tr>")
// }
// },
// error: function() { //失败的回调函数// }
// })// http 无状态
// cookie
// 创建：$.cookie('name', 'value');
// 读取：console.log($.cookie('name'))
// 删除：$.removeCookie('name');Json教程
JSON 教程 | 菜鸟教程JSON 教程 JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法，类似 XML。 JSON 比 XML 更小、更快，更易解析。 JSON 易于人阅读和编写。 C、Python、C++、Java、PHP、Go 等编程语言都支持 JSON。 JSON 实例 [mycode3 type='javascript']..https://www.runoob.com/json/json-tutorial.html
.json文件
[{"id":1,"name":"张三","sex":"男","age":18},{"id":2,"name":"小白","sex":"男","age":30},{"id":3,"name":"小红","sex":"女","age":16},{"id":4,"name":"小明","sex":"男","age":23},{"id":5,"name":"小花","sex":"女","age":21}
]Echarts ：一个基于JavaScript的开源可视化图表库
Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html
简单使用：
1、下载并引入echarts.min.js文件
2、准备一个具备大小的dom容器，生成的图表会放入该容器
3、初始化echarts实例对象 echarts.init(dom)
4、指定配置项和数据
5、将配置项设置给echarts实例对象 让echarts对象根据配置生效
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/echarts.min.js"></script>
</head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据option = {// 标题组件title: {text: '图表',// textStyle:{// color:"red",// fontStyle:"italic",// fontWeight:"500",// fontSize :'50px'// },// left:"100px",// top:"20%"},//提示框组件tooltip: {//触发类型。trigger: 'axis'},//图例组件legend: {// data: ['测试', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],top: '50px'},//网格配置grid: {//配合left right top bottom 设置图表的大小left: '10%',right: '10%',bottom: '10%',//网格区域是否包含坐标轴的刻度标签 true:包含 false:不包含containLabel: true},//工具箱组件，可以有图片另存为等功能toolbox: {feature: {saveAsImage: {}}},//直角坐标系中的 x 轴xAxis: {//坐标轴类型type: 'category',//坐标轴两侧留白策略 true刻度只做分割线boundaryGap: true,data: ['周一', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},//坐标轴y轴yAxis: {type: 'value'},//系列列表,每个系列通过type决定自己的图表类型series: [{//name系列名称 用于图标提示的显示 series里有name属性时，图例组件legend里data属性可以省略name: '测试',type: 'line',//数据堆叠stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]}, {name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]}, {name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]}, {name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]}, {name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}],//调色板 color: ['red', 'blue', 'green', 'pink', 'yellow'],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);// 1、下载并引入echarts.min.js文件// 2、准备一个具备大小的dom容器，生成的图表会放入该容器// 3、初始化echarts实例对象 echarts.init(dom)// 4、指定配置项和数据// 5、将配置项设置给echarts实例对象 让echarts对象根据配置生效</script>
</body></html>
