前端学习7——自学习梳理

jQuery 教程 | 菜鸟教程jQuery 教程 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。本章节的每一篇都包含了在线实例通过本站的在线编辑器，你可以在线运行修改后的代码，并查看运行结果。实例 [mycode3 type='javascript'] $(document).ready(function(){ $('phttps://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>

前端学习7——自学习梳理

相关资讯

热文排行

最新新闻

推荐新闻

热搜词