前端学习7——自学习梳理
https://www.runoob.com/jquery/jquery-tutorial.html包括学习JQuery、Json以及cookie的一些芝士
注：cookie(主要学习的是JQuery提供的，当然JavaScript也有自己的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文件
[
{"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的开源可视化图表库
简单使用：
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>原文地址：https://blog.csdn.net/qq_63125992/article/details/140682269
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！