前端学习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 插件 | 菜鸟教程

html 复制代码
<!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文件

javascript 复制代码
//一、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文件

javascript 复制代码
[
    {"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对象根据配置生效

html 复制代码
<!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>
相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
zhuyixiangyyds5 小时前
day21和day22学习Pandas库
笔记·学习·pandas
每次的天空5 小时前
Android学习总结之算法篇四(字符串)
android·学习·算法