前端学习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>
相关推荐
NightCyberpunk13 分钟前
HTML、CSS
前端·css·html
xcLeigh23 分钟前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
zhenryx25 分钟前
前端-react(class组件和Hooks)
前端·react.js·前端框架
ZwaterZ27 分钟前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
Hacker_Oldv1 小时前
网络安全的学习路线
学习·安全·web安全
蒟蒻的贤1 小时前
vue学习11.21
javascript·vue.js·学习
高 朗1 小时前
【GO基础学习】基础语法(2)切片slice
开发语言·学习·golang·slice
码上有前1 小时前
解析后端框架学习:从单体应用到微服务架构的进阶之路
学习·微服务·架构
岳不谢2 小时前
VPN技术-VPN简介学习笔记
网络·笔记·学习·华为
海害嗨2 小时前
阿里巴巴官方「SpringCloudAlibaba全彩学习手册」限时开源!
学习·开源