html(js-day05)-day07

最新推荐文章于 2024-09-09 16:49:46 发布
最新推荐文章于 2024-09-09 16:49:46 发布
阅读量130 收藏
点赞数
分类专栏： JS html基础 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/B1501014/article/details/112452425
版权

文章目录

jQuery简介

1. 介绍

jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。

2. 使用

1）引入

先引入jquery文件，才能使用jquery语法

  1. CDN 有网（备用）
  2. 本地文件（常用）
2）工厂函数 - $()

"$()"函数用于获取元素节点，创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。
例如 :

 //$()获取元素节点,需传入字符串的选择器
 $("h1")
 $("#d1")
 $(".c1")
 $("body,h1,p")
 //选择器的特点，与样式选择器一致

<title>Document</title>
</head>
<body>
  <div id="header"></div>

  <!-- 一定要先引入文件 再使用jQuery操作 -->
  <script src="../js/jquery.min.js"></script>
  <script>
    var header = document.getElementById('header')
    // jquery
    // Uncaught ReferenceError: $ is not defined jQuery文件没有引入或引入失败
    console.log($);
    var $header = $('#header');
    // 原生JS对象 或 DOM对象
    // 原生JS对象可以使用document提供的方法和属性
    // 如： innerHTML   对象.className 
    // 对象.onclicke 
    // header.innerHTML = 'hello world';
    console.log(header);

    //jQuery对象 可以使用jQuery提供的方法和属性
    console.log($header);
    $header.html('hello world');//传递参数的方式，之前是属性赋值。

    // js对象-->jq对象
    console.log($(header));
    // jq对象-->js对象
    console.log($header[0]);

    // document.getElementById('header').innerHTML = 'hello world';

    // 定义一个函数 通过id查找元素
    // function $$(id){
    //   return document.getElementById(id);
    // }
    // $$('header').innerHTML = 'hello world';
  </script>
</body>
3）原生JavaScript对象与jQuery对象

原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :

  1. 原生JavaScript转换jQuery对象
    $(原生对象)，返回 jQuery 对象
  2. jQuery对象转换原生JavaScript对象
    • 方法一 : 根据下标取元素,取出即为原生对象
      var div = $(“div”)[0];
    • 方法二 : 使用jQuery的get(index)取原生对象
      var div2 = $(“div”).get(0);
4）jQuery获取元素

jQuery通过选择器获取元素，$(“选择器”)
选择器分类 :

  1. 基础选择器
标签选择器：$("div")
ID 选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")
  1. 层级选择器
后代选择器： $("div .c1")
子代选择器： $("div>span")
相邻兄弟选择器： $("h1+p")  匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器： $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素
  1. 过滤选择器，需要结合其他选择器使用。
:first
  匹配第一个元素 例:$("p:first")
:last
  匹配最后一个元素 例:$("p:last")
:odd
  匹配奇数下标对应的元素
:even
  匹配偶数下标对应的元素
:eq(index)
  匹配指定下标的元素
:lt(index)
  匹配下标小于index的元素
:gt(index)
  匹配下标大于index的元素
:not(选择器)
  否定筛选,除()中选择器外,其他元素

<title>查找页面元素</title>
</head>
<body>
  <h1>上面的兄弟 你们好吗？</h1>
  <ul id="list">
    <li >item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li >item4</li>
  </ul>
  <h1>hello world</h1>
  <p>中午吃啥？</p>

  <script src="../js/jquery.min.js"></script>
  <script>
    // $('li:last').css('color','red');
    //奇数索引值  第二个(1)   第四个(3)
    $('li:odd').css('color','red');
    $('li:even').css('color','blue');
    // eq(i) 匹配索引值等于i的元素
    // lt(i) 小于i
    // gt(i) 大于i
    $('li:eq(2)').css('font-size','30px');
    $('li:lt(2)').css('font-weight','bold');
    // 找全部li中除了最后一个li的其他元素
    $('li:not(li:last)').css('text-align','center');


    // $('#list').parents()//找父元素和祖先元素，可以传入选择器作参数精确查找某些祖先元素
    // $('#list').parent()//找父元素
    // $('#list').siblings() 查找全部的兄弟元素 ，可以传入选择器作参数精确查找某些兄弟元素
    // console.log($('#list').siblings('p'));


    // 选择器1+选择器2   相邻兄弟选择器
    // 找选择器1  后面的第一个  符合选择器2  的元素
    // $('#list+h1').css('color','red');//生效
    // $('#list+p').css('color','red');//不生效
    // console.log($('#list+p'));//空的jq对象

    // 选择器1~选择器2  通用兄弟选择器
    // 找选择器1 后面所有 符合选择器2 的元素
    // $('#list~p').css('color','blue');

    // list.style = 'list-style:none';
    // $('#list').css('list-style','none');
    // $('.item').css('color','red');
    // $('li').css('font-weight','bold');
  </script>
</body>
5）操作元素内容
html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val()  //设置或读取表单元素的值,等价于原生value属性
 <input type="text" id="key">
  <h1>xxx</h1>
  <script src="../js/jquery.min.js"></script>
  <script>
    // input.value  --> $('#key').val()
    // h1.innerHTML = 值
    // key.onchange = function(){}
    $('#key').change(function(){
      // 当值发生改变时  将文本框的值放入h1中显示
      // h1.innerHTML = input.value
      $('h1').html($('#key').val());
    });
  </script>
</body>
6）操作标签属性

  1. attr(“attrName”,“value”)
    设置或读取标签属性

  2. prop(“attrName”,“value”)
    设置或读取标签属性
    注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写

  3. removeAttr(“attrName”)
    移除指定属性

    <title>操作元素属性</title>
</head>
<body>
  <div class="red" id="div1">
    hello world
  </div>

  <div>
    <input type="text" placeholder="请输入用户名">
  </div>
  <div>
    <input type="checkbox" id="canSubmit">请阅读并同意协议
  </div>
  <button id="btn">提交</button>
  <script src="../js/jquery.min.js"></script>
  <script>
    // 当按钮被点击的时候 判断用户是否选中协议
    // btn.onclick = function(){}
    $('#btn').click(function(){
      // 如果用户选中协议 弹框提示提交成功
      // 如果用户没有选中协议 弹框提示 请勾选协议
      if($('#canSubmit').prop('checked')){
        alert('提交成功')
      }else{
        alert('请勾选协议')
      }



      // 通过checked属性判断按钮是否被选中
      // var res = $('#canSubmit').attr('checked')
      // var res2 = $('#canSubmit').prop('checked');
      // console.log($('#canSubmit'));
      // console.log('attr的结果'+res);
      // console.log('prop的结果'+res2);
    })

    // 获取元素属性的值
    // var res = $('#div1').attr('class');
    // console.log(res);
    // var res = $('#div1').prop('class');
    // console.log(res);
    // 修改/设置元素属性的值
    // $('#div1').attr('id','title');
    // $('#div1').prop('id','title');
  </script>
</body>
7）操作标签样式
  1. 为元素添加id/class属性,对应选择器样式
  2. 针对类选择器,提供操作class属性值的方法
addClass("className")	//添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加
 <title>通过class属性修改样式</title>
  <style>
    .red{
      color:red;
      /* font-size: 30px; */
      font-weight: bold;
     
    }
    .center{
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="center">hello world</div>
  <script src="../js/jquery.min.js"></script>
  <script>
    // $('div').addClass('red');
    // $('div').removeClass('center');
    // 切换样式
    // 当前有样式red  就移除样式red
    // 当前没有样式red  就添加样式red
    $('div').click(function(){
      $('div').toggleClass('red');
    })

    // 
    $('div').css('width','300px').css('height','300px').css('background-color','green');

    $('div').css({
      "width":"300px",
      "height":"300px",
      "background-color":"lightgreen",
    })
  </script>
</body>

//-------------------------------------------------------------------//
<title>导航条</title>
  <style>
    /* 清除默认样式 */
    a{
      color: #222;
      text-decoration: none;
    }
    ul{
      margin: 0;
      padding: 0;
      /* 清除列表样式 小圆点 */
      list-style: none;
      border: 1px solid red;
      /* 解决子元素浮动父元素没有高度的问题 */
      overflow: hidden;
    }
    /* 10:00~10:15 */
    li{
      float: left;
    }
    .first{
      color: #999;
      margin: 5px 0; 
    }
    .item{
      margin: 5px 10px;
      padding: 0 5px;
    }
    .active,.item:hover{
      background-color: red;
    }
    .active>a,.item:hover>a{
      color: #fff;
    }
  </style>
</head>
<body>
  <ul>
    <li class="first">难度：</li>
    <li class="item"><a href="#">全部</a></li>
    <li class="item"><a href="#">初级</a></li>
    <li class="item active">
      <a href="#">中级</a>
    </li>
    <li class="item"><a href="#">高级</a></li>
  </ul> 

  <script src="../js/jquery.min.js"></script>
  <script>
    // day07/nav.html
    // 14:48~15:05
    $('.item').click(function(){
      // 点击当前item时添加样式类active，兄弟们移除样式active
      $(this).addClass('active').siblings('.active').removeClass('active');

      // 查找所有的item移除class active
      // 为当前元素添加class active
      // this 是原生js对象 --> $(this)jq对象

      // $('.item').removeClass('active');
      // $(this).addClass('active');
    })

    // var items = document.getElementsByClassName('item');
    // console.log(items);
    // for(var i=0;i<items.length;i++){
    //   items[i].onclick = function(){
    //     for(var j=0;j<items.length;j++){
    //       items[j].className = 'item';
    //     }
    //     this.className = 'item active';
    //   }
    // }
  </script>
</body>
  1. 操作行内样式
css("属性名","属性值")  //设置行内样式
css(JavaScriptON对象)			 //设置一组CSS样式
/*
JavaScriptON对象:常用数据传输格式
语法 :
   {
    "width":"200px",
    "height":"200px",
    "color":"red"
   }
 */
8）元素的创建,添加,删除
  1. 创建：使用$(“标签语法”)，返回创建好的元素
var div = $("<div></div>");	//创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>");	//创建的同时设置内容，属性和样式
  1. 作为子元素添加
$obj.append(newObj);	//在$obj的末尾添加子元素newObj
$obj.prepend(newObj);	//作为第一个子元素添加至$obj中
  1. 作为兄弟元素添加
$obj.after(newObj);		//在$obj的后面添加兄弟元素
$obj.before(newObj);	//在$obj的前面添加兄弟元素
  1. 移除元素
$obj.remove();	//移除$obj

 <title>创建、添加、删除页面元素</title>
</head>
<body>


  <hr>
  
  <button id="add">创建并添加元素</button>
  <script src="../js/jquery.min.js"></script>
  <script>
    // 删除hr
    $('hr').remove();

    $('#add').click(function(){
      var html = $('<h1></h1>'); //接收的是字符串类型
      html.html('使用JQ创建的对象').css('text-align','center');
      // 作为body的子元素添加
      // $('body').prepend(html);
      // $('body').append(html);  最终只会添加一个，如果是新元素会不断添加

      // 作为兄弟元素添加
      // $('hr').before(html);
      // $('hr').after(html);
    }) 
  </script>
</body>
9）动画效果

  1. 显示和隐藏

     show(speed,callback)/hide(speed,callback)
    • speed 可选。规定元素从隐藏到完全可见的速度。默认为 “0”。
    • callback 可选。show 函数执行完之后，要执行的函数

  2. 通过使用滑动下拉和上推效果，显示隐藏的被选元素（ 只针对块元素 ）

     slideDown(speed,callback)/slideUp(speed,callback)

  3. 通过使用淡隐淡现方式显示效果，显示隐藏的被选元素

     fadeOut(speed,callback)/fadeIn(speed,callback)

  4. 动画函数，可以实现自定义动画 animate 函数

    animate(styles,speed,callback)

    • styles 必需。规定产生动画效果的 CSS 样式和值

    • speed 可选。规定动画的速度。默认是 “normal”

    • callback 可选。show 函数执行完之后，要执行的函数

       <title>动画</title>
  <style>
    button{
      font-size: 25px;
    }
  </style>
</head>
<body>
  <div id="target">
    <img src="../imgs/gm1-6.jpg" alt="">
  </div>
  <button id="btn">隐藏</button>
  <button id="btn2">上推</button>
  <button id="btn3">淡隐</button>
  <script src="../js/jquery.min.js"></script>
  <script>
    // 16:50~17:05
    // 当按钮为隐藏时 点击隐藏div后 将按钮改为显示
    // 当按钮为显示时 点击显示div后 将按钮改为隐藏
    $('#btn3').click(function(){
      var text = $('#btn3').html();
      if(text == '淡隐'){
        $('#target').fadeOut(3000,function(){
          $('#btn3').html('淡现');
        });
      }else{
        $('#target').fadeIn(3000,function(){
          $('#btn3').html('淡隐');
        });
      }
    })



    $('#btn2').click(function(){
      var text = $('#btn2').html();
      if(text == '上推'){
        $('#target').slideUp(3000,function(){
          $('#btn2').html('下拉');
        });
      }else{
        $('#target').slideDown(3000,function(){
          $('#btn2').html('上推');
        });
      }
    })

    $('#btn').click(function(){
      var text = $('#btn').html();
      if(text == '隐藏'){
        $('#target').hide(3000,function(){
          $('#btn').html('显示');
        });
      }else{
        $('#target').show(3000,function(){
          $('#btn').html('隐藏');
        });
      }
    })
  </script>

      <title>自定义动画</title>
  <style>
    #ball{
      width: 200px;
      height: 200px;
      background-color: orangered;
    }
  </style>
</head>
<body>
  <div id="ball"></div>
  <script src="../js/jquery.min.js"></script>
  <script>
    $('#ball').animate({
      "border-radius":"50%",
      "margin-left":"300px",
    },2000,function(){
      // 再次设置一个自定义动画
      $('#ball').animate({
        "margin-left":"0",
      },2000,function(){
        $('#ball').fadeOut(2000)
      })
    })
  </script>
10）数据与对象遍历

  1. $(selector).each() 方法规定为每个匹配元素规定运行的函数

    $(selector).each(function(index,element){})

    必需。为每个匹配元素规定运行的函数。

    • index - 选择器的 index 位置
    • element - 当前的元素

  2. $.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理

    $.each(Object, function(index, data){});

    必需。为每个匹配元素规定运行的函数。

    • index - 选择器的 index 位置

    • data- 当前的数据

       <title>遍历操作</title>

  <script src="../js/jquery.min.js"></script>
  <script>
    $(function () {
      $('div').each(function (i, o) {
        // 遍历元素之后要做的事情
        // 参数i,o是由each传递的  i表示当前的索引值 o表示当前的页面元素对象(原生JS对象)
        console.log(i, o);
      });
    })
    // 对数据的处理
    var arr = ['北京', '上海', '深圳', '沈阳'];
    // for(var i=0;i<arr.length;i++){}
    // for(var i in arr){}
    $.each(arr, function (i, e) {
      console.log(i, e);
    })
  </script>
</head>

<body>
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
  <div>div4</div>

  <script>
    // window.onload = function(){
    //   console.log('hhhh')
    // }

    $(function(){
      console.log('这是第二个$function')
    })
  </script>

</body>
11）jQuery事件处理
  1. 文档加载完毕
    原生JavaScript 方法：window.onload
    jQuery:
//语法一 
$(document).ready(function (){
  //文档加载完毕后执行
})
//语法二 
$().ready(function (){
  //文档加载完毕后执行
})
//语法三 
$(function(){
  //文档加载完毕后执行
})

区别：
原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行

  1. 事件绑定方式
    事件名称省略 on 前缀
  //on("事件名称"，function)
  $("div").on("click",function(){});//新版本使用的多些
  //bind("事件名称",function)
  $("div").bind("click",function(){});//1.6-1.8间的版本
  //事件名作为方法名
  $("div").click(function(){});
  1. this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。

3.实战

1. 页面效果

在这里插入图片描述

2. 代码分析

1. 页面元素

在这里插入图片描述

​

2. 初始代码

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XGQg0z3a-1610293070115)(assets\1565682366493.png)]

3. 绑定省份

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DpDHyooD-1610293070121)(assets\1565682409353.png)]

4. 绑定城市

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2iOmqPDX-1610293070121)(assets\1565682448560.png)]

B1501014
关注
专栏目录
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 4014
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
FE21-JS-DAY05-Vendula-Martin
03-10
【标题】"FE21-JS-DAY05-Vendula-Martin" 是一个与JavaScript相关的学习资源，可能是一个课程或者工作坊的第五天内容，由Vendula和Martin共同讲授。这个主题可能涵盖了JavaScript的进阶概念，因为通常在几天的学习...
jQuery
weixin_49862515的博客
09-17 93
jQuery jquery 的基本使用 jQuery 的入口函数 第一种： $(function(){ ... // 此处是页面DOM加载完成的入口 })； 第二种： $(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 }); 等着DOM结构渲染完毕即可执行，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。 相当于原生js 中的DOMCo
javascript学习-弹框
qq_43368682的博客
07-21 115
一个弹框的例子： html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <button type="button"
javascript-day01
m0_64370841的博客
09-09 372
01-js-12-运算符的应用。01-js-13-流程控制语句。
Js-day2
2203_75335776的博客
08-16 153
JS基础&实战--day05
weixin_56706590的博客
11-22 355
对象属性名和属性值基本和引用数据类型对象字面量函数函数的参数返回值return立即执行函数对象枚举对象中的属性作用域变量的提前声明函数作用域debug 对象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * JS中数据类型 * .
vue.js--day7
想搞全栈的前端
05-02 624
文章目录day7使用mui的`tab-top-webview-main`完成分类滑动栏兼容问题移除严格模式[vue-preview](https://github.com/LS1231/vue-preview) day7 使用mui的tab-top-webview-main完成分类滑动栏 兼容问题 和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容...
JavaScript-day04
2201_75449897的博客
07-20 306
【代码】JavaScript-day04。
vue.js---day8
想搞全栈的前端
05-02 607
文章目录day8使用mui的`tab-top-webview-main`完成分类滑动栏兼容问题移除严格模式[vue-preview](https://github.com/LS1231/vue-preview) day8 使用mui的tab-top-webview-main完成分类滑动栏 兼容问题 和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容...
HTML-Day06-Vue-简单案例
m0_73948849的博客
11-05 247
HTML基础入门-Day06-Vue-简单案例
js-day05培训内容_easyui1
08-08
【JavaScript EasyUI 省市区三级联动实现】 在JavaScript中，EasyUI是一个基于jQuery的UI框架，用于快速构建用户界面。在本培训内容中，我们将关注如何使用EasyUI组件实现省份-城市-区域的三级联动效果，特别是通过...
30-day-of-javascript-day-1
03-04
【标题】"30-day-of-javascript-day-1" 是一个关于JavaScript编程的学习计划，旨在帮助初学者在30天内逐步掌握JavaScript的基础知识。这个计划的第一天通常会涵盖JavaScript的入门概念，为后续的学习打下坚实的基础...
2024-05-12-mothers-day.zip
05-12
压缩包内的文件“2024-05-12-mothers-day”很可能是包含整个HTML文件以及相关资源的文件夹，如图片、CSS样式表、JavaScript脚本等。在解压后，我们可以看到完整的网页结构和内容，进一步分析其代码结构和设计思路。 ...
高级软件人才培训专家-day02-JavaScript-Vue
03-10
### 高级软件人才培训专家-day02-JavaScript-Vue #### 一、JavaScript简介 **JavaScript** 是一种广泛使用的脚本语言，用于增强网页的互动性。它由 Netscape 的 Brendan Eich 于 1995 年创建，并在同年被 Netscape...
【超强组合】基于淘金优化算法GRO-BP-Adaboost的数据分类预测算法Matlab实现.rar
最新发布
10-08
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
VMware Workstation Pro 和 VMware Fusion 安装与配置指南
10-08
内容概要：本文档详细指导了如何在不同的主机环境下，通过 VMWare 的两款产品——Workstation Pro 和 Fusion 进行新虚拟机的构建流程以及具体的操作要点说明。 适用人群：希望在单一机器上部署多操作系统的工作环境或学习测试场景的技术人员和学生。 使用场景及目标：旨在帮助初学者搭建属于自己的虚拟机实验平台，从而方便进行软件测试或者研究操作系统相关的新特性等任务，同时也有利于团队间的协作和资源调配。 注意事项：文中涉及的具体操作如下载源文件、配置网络参数时要注意版权合法性问题和技术安全防范。此外还需依据各自电脑的软硬件条件适当增减虚拟机的资源设定。
科研经费管理系统 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）.zip
10-08
科研经费管理系统 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS） 启动教程：https://www.bilibili.com/video/BV1GK1iYyE2B
使用Python Matplotlib进行图形输出与保存详解（包含详细的完整的程序和数据）
10-08
内容概要：本文详细介绍了使用 Python 的 Matplotlib 库来输出和保存图形的方法。不仅涉及了基本流程，如生成图表并将之导出成PNG、PDF和SVG等不同格式的内容，还包括高级话题如设置透明度、分辨率以及制作包含图形元素的HTML页面等。文章通过一个具体的示例代码讲解了各个环节的关键细节和技术要点。 适用人群：对数据可视化有兴趣的初学者及具有一定基础想要深入学习 Matplotlib 使用技巧的技术人员。 使用场景及目标：适用于需要掌握 Matplotlib 不同输出选项及其特点的应用场合，尤其是当需要生成用于打印或网页展示的高质量、可自定义外观的图形时。
moment-chinese-day插件如何安装
06-12
如果手动下载，可以在 GitHub 项目页面下载 `moment-chinese-day.js` 文件，并在 HTML 文件中引入： ```html <script src="moment.js"> <script src="moment-chinese-day.js"> ``` 需要注意的是，`moment-chinese-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值