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

​​​​​​jQuery 教程 | 菜鸟教程jQuery 教程 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 本章节的每一篇都包含了在线实例 通过本站的在线编辑器,你可以在线运行修改后的代码,并查看运行结果。 实例 [mycode3 type='javascript'] $(document).ready(function(){ $('picon-default.png?t=N7T8https://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']..icon-default.png?t=N7T8https://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的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。icon-default.png?t=N7T8https://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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/383613.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python正则表达式】:文本解析与模式匹配

文章目录 1.正则表达式2. re模块3.修饰符3.元字符3-1 字符匹配元字符3-2 重复次数限定元字符3-3 字符集合匹配元字符3-4 分组元字符3-5 边界匹配元字符3-6 字符类别匹配元字符 4.技巧4-1 贪婪与非贪婪 5.案例 1.正则表达式 正则表达式面向什么样的问题&#xff1f; 1、判断一个…

uniapp引入自定义图标

目录 一、选择图标&#xff0c;加入购物车 二、下载到本地 三、导入项目 四、修改字体引用路径 五、开始使用 这里以扩展iconfont图标为例 官网&#xff1a;iconfont-阿里巴巴矢量图标库 一、选择图标&#xff0c;加入购物车 二、下载到本地 直接点击下载素材&#xff0…

2019数字经济公测大赛-VMware逃逸

文章目录 环境搭建漏洞点exp 环境搭建 ubuntu :18.04.01vmware: VMware-Workstation-Full-15.5.0-14665864.x86_64.bundle 这里环境搭不成功。。patch过后就报错&#xff0c;不知道咋搞 发现可能是IDA加载后的patch似乎不行对原来的patch可能有影响&#xff0c;重新下了patch&…

【Kettle实现神通(数据库)MPP增量、全量数据ETL,同步任务Linux运行(通用)】

1、背景介绍 具体Kettle操作步骤不做过多介绍&#xff0c;主要技术方案说明&#xff0c;Kettle8.2版本放在底部链接提取&#xff0c;本次采用Kettle实现源端&#xff1a;神通数据通用库、目标端&#xff1a;神通MPP增量数据同步&#xff0c;并在服务器端运行Job。 2、windows…

鸿蒙OpenHarmony Native API【支持的标准库+Node_API】

Native API中支持的标准库 简介 表1 OpenHarmony支持的标准库 名称简介标准C库[libc、libm、libdl]组合实现C11标准C库。标准C库[libc]是C标准库的一种实现。OpenSL ES[OpenSL ES]是一个嵌入式跨平台的音频处理库。zlib[Zlib]是基于C/C语言实现的一个通用的数据压缩库。EGL[…

VMare centos 7 设置固定ip

第一步获取网关 查看虚拟机的网关-》编辑-》虚拟网络编辑器 NAT模式-》NAT设置 获取网关IP 192.168.70.2 第二步获取主机dns1 在本地主机获取dns1&#xff0c;本地主机调出cmd输入ipconfig dns1为192.168.31.1 用管理员权限的账号进入需要设置固定ip的虚拟机&#xff0c;在t…

零基础学习Python(四)

1. __getitem__、__setitem__、__iter__、__next__魔法方法 __index__方法是对象被作为索引访问时调用的魔法方法&#xff0c;那么当对象要进行索引访问时&#xff0c;调用什么魔法方法呢&#xff1f;答案是__getitem__魔法方法。 class C:def __getitem__(self, index):prin…

vscode回退不显示了,不方便操作

一、后退前进按钮 顶部显示&#xff0c;方便调试 <—— ——> 文件-> 首选项 -> 设置->commandcenter->勾选 Window: Title Bar Style->custom 将native —>custom

MongoDB教程(二十二):MongoDB固定集合

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、固定集…

单片机学习历程

学习单片机的过程可以分为几个主要阶段&#xff0c;每个阶段都涉及不同的学习内容和技能提升。下面我将以一个典型的学习历程为例进行介绍&#xff1a; 初学阶段 1.入门理论学习&#xff1a; 开始接触单片机的基础知识&#xff0c;学习其工作原理、体系结构和常见的芯片类型…

昇思25天学习打卡营第20天|CV-ResNet50图像分类

打卡 目录 打卡 图像分类 ResNet网络介绍 数据集准备与加载 可视化部分数据集 残差网络构建 Building Block 结构 代码实现 Bottleneck结构 代码实现 构建ResNet50网络 代码定义 模型训练与评估 可视化模型预测 重点&#xff1a;通过网络层数加深&#xff0c;感知…

vue3前端开发-小兔鲜项目-路由拦截器增加token的携带

vue3前端开发-小兔鲜项目-路由拦截器增加token的携带&#xff01;实际开发中&#xff0c;很多业务接口的请求&#xff0c;都要求必须是登录状态&#xff01;为此&#xff0c;这个token信息就会频繁的被加入到了请求头部信息中。request请求头内既然需要频繁的携带这个token.我们…

STM32烧录的时候报错:Error :Flash Download failed -“Cortex-M3“

点击图中标号1&#xff0c;按顺序点击进入设置 按图中标序&#xff0c;进入添加页面 添加图中所选&#xff0c;然后一直确定退出即可&#xff0c;若没有图中所示选项&#xff0c;可能软件没下载对&#xff0c;文章已附带 添加后&#xff0c;即可烧录成功。

《JavaEE篇》--多线程(2)

《JavaEE篇》--多线程(1) 线程安全 线程不安全 我们先来观察一个线程不安全的案例&#xff1a; public class Demo {private static int count 0;public static void main(String[] args) throws InterruptedException {Thread t1 new Thread(() -> {//让count自增5W次…

【Android】碎片—动态添加、创建Fragment生命周期、通信

简单用法 在一个活动中添加两个碎片&#xff0c;并让这两个碎片平分活动空间 先新建一个左侧碎片布局和一个右侧碎片布局 左侧碎片 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/…

场外期权如何报价?名义本金是什么?

今天带你了解场外期权如何报价&#xff1f;名义本金是什么&#xff1f;投资者首先需要挑选自己想要进行期权交易的沪深上市公司股票。选出股票后&#xff0c;需要将股票信息、预期的操作时间&#xff08;如期限&#xff09;、看涨或看跌的选择以及预计的交易金额等信息报给场外…

java-selenium 截取界面验证码图片并对图片文本进行识别

参考链接 1、需要下载Tesseract工具并配置环境变量&#xff0c;步骤如下 Tesseract-OCR 下载安装和使用_tesseract-ocr下载-CSDN博客 2、需要在IDEA中导入tess4j 包&#xff1b;在pom.xml文件中输入如下内容 <!--导入Tesseract 用于识别验证码--><dependency>&l…

跟代码执行流程,读Megatron源码(四)megatron初始化脚本initialize.py之initialize_megatron()分布式环境初始化

在前文中&#xff0c;我们讲述了pretrain函数的执行流程&#xff0c;其首要步骤是megatron分组的初始化与环境的配置。本文将深入initialize_megatron函数源码&#xff0c;剖析其初始化分布式训练环境的内部机制。 注&#xff1a;在此假设读者具备3D并行相关知识 一. initiali…

Linux - 进程的概念、状态、僵尸进程、孤儿进程及进程优先级

目录 进程基本概念 描述进程-PCB task_struct-PCB的一种 task_struct内容分类 查看进程 通过系统目录查看 通过ps命令查看 通过系统调用获取进程的PID和PPID 通过系统调用创建进程- fork初始 fork函数创建子进程 使用if进行分流 Linux进程状态 运行状态-R 浅度睡眠状态-S…

AV1技术学习:Constrained Directional Enhancement Filter

CDEF允许编解码器沿某些(可能是倾斜的)方向应用非线性消阶滤波器。它以88为单位进行。如下图所示&#xff0c;通过旋转和反射所示的三个模板来定义八个预设方向。 Templates of preset directions and their associated directions. The templates correspond to directions of…