jq项目笔记

常用事件

mouseenter && mouseleave 不会触发冒泡

防止冒泡 e.stopPropagation()

在项目中使用echarts

第一步：导入
    

第二步：创建容器

第三步配置参数，并调用

  //DOM挂载完毕
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ["product", "2015", "2016", "2017", "2018", "2019"],
          source: [
            {
              product: "6-2",
              "2015": 43.3,
              "2016": 85.8,
              "2017": 93.7,
              "2018": 85.8,
              "2019": 85.8
            },
            {
              product: "6-3",
              "2015": 43.3,
              "2016": 85.8,
              "2017": 93.7,
              "2018": 85.8,
              "2019": 85.8
            },
            {
              product: "6-4",
              "2015": 114,
              "2016": 65.2,
              "2017": 82.5,
              "2018": 85.8,
              "2019": 85.8
            },
            {
              product: "6-5",
              "2015": 72.4,
              "2016": 53.9,
              "2017": 39.1,
              "2018": 85.8,
              "2019": 85.8
            },
            {
              product: "6-6",
              "2015": 72.4,
              "2016": 53.9,
              "2017": 39.1,
              "2018": 85.8,
              "2019": 85.8
            }
          ]
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" }
        ]
      });
    }
  }

使用layui中的echarts

 <script src="__STATIC__/zgjr/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>

    <script src="__STATIC__/zgjr/js/lay-config.js?v=1.0.4" charset="utf-8"></script>

    <script type="text/javascript" src="__STATIC__/js/core/jquery.min.js"></script>
    <script type="text/javascript">
        layui.use(['layer', 'form', 'miniTab', 'echarts','element'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                miniTab = layui.miniTab,
                element = layui.element,
                echarts = layui.echarts;

            miniTab.listen();
            /**
                     * 报表功能
                     */
            var myChart = echarts.init(document.getElementById('echarts-records'));
            // 显示标题，图例和空的坐标轴 
            myChart.setOption({
                //color:"blue", 
                grid: { y: 50, y2: 70, x2: 20, x: 45 },
                title: {
                    text: '各省订阅份数分布图'
                },
                tooltip: {},
                legend: {
                    data: ['中国金融', '金融博览']
                },
                xAxis: {
                    data: [],
                    axisLabel: {
                        interval: 0,
                        rotate: 40,
                        axisLabel: {
                            fontSize: 10
                        }
                    }
                },
                yAxis: {},
                series: [{
                    name: '份数',
                    type: 'bar',
                    data: []
                }]
            });
            // 异步加载数据 
            $.get('return.php').done(function (data) {
                // 填入数据 
                myChart.setOption({
                    xAxis: {
                        data: ['北京市', '天津市', '河北省', '山西省', '内蒙古', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏', '陕西省', '甘肃省', '青海省', '宁夏', '新疆', '大连市', '宁波市', '青岛市', '深圳市',]
                    },
                    series: [{
                        name: '中国金融',
                        type: 'bar',
                        data: [174, 511, 6069, 2682, 1732, 766, 2451, 3639, 250, 12839, 3278, 2728, 3203, 2053, 3307, 9857, 4797, 2905, 4496, 3435, 311, 3668, 5979, 1080, 4114, 45, 2857, 3265, 144, 448, 826, 128, 451, 912, 30,]
                    },
                    {
                        name: '金融博览',
                        type: 'bar',
                        data: [91, 211, 5835, 2564, 1167, 452, 1776, 1523, 250, 3045, 1639, 1582, 1952, 1822, 1067, 2324, 2218, 1646, 2685, 857, 218, 1534, 3309, 433, 2131, , 1379, 1851, 45, 396, 357, 66, 249, 422, 1,],
                    },]
                });
            });
        })
    </script>

在项目中使用animate.css

1.导入cdn
 

2.使用
2.1在jq中使用

$(function () {
  $("body > div.bannerbox > div.pox.flex > p:nth-child(1)").addClass("animate__animated animate__zoomInDown").css({
    "animation-duration": "2000ms"
  })
})  

//也可以直接作为类添加

返回顶部

  $(".fhdb").on("click",function(){
    $('html ,body').animate({scrollTop: 0}, 400);
  })

判断一个节点是否有一个类

($('.register_content_item').eq(i).hasClass(className))

清空一个节点下的元素

$(".footer1_right_scroll ul").empty()

鼠标事件

mouseover // 不会触发父级
mouseleave // 不会触发父级

jq制作导航栏

pc禁止滚动

```js
 //禁止滚动条滚动
    function unScroll() {
        var top = $(document).scrollTop();$(document).on(‘scroll.unable’, function (e) {
            KaTeX parse error: Expected 'EOF', got '}' at position 36: …(top);         }̲)     }     //移…(document).unbind(“scroll.unable”);
    }

### mob 静止滚动
 ```js
  var mo = function (e) { e.preventDefault(); };
    function unScroll() {
        // console.log("页面禁止滚动出发了")
        document.body.style.overflow = 'hidden';
        document.addEventListener("touchmove", mo, { passive: false });//禁止页面滑动
    }

    /***取消滑动限制***/
    function removeUnScroll() {
        // console.log("页面取消了禁止滚动出发了")
        document.body.style.overflow = '';//出现滚动条
        document.removeEventListener("touchmove", mo, { passive: false });
    }

导航栏制作

//默认首页
    $(".headerLeft>.listitem").eq(0)	//导航栏
        .addClass("active")
        .siblings().removeClass("active")

    $('.navlist .navitem').eq(0).show();		//默认导航栏对应的下方内容显示，隐藏
$('.navlist .navitem').eq(0).siblings().hide();

//带有鼠标滑动效果的导航栏
$(function () {
  //导航栏默认首页
  $(".navlist .center_1200 li").eq(0) //导航栏
    .addClass("active1")
    .siblings().removeClass("active1")
  var index = null
  //给导航绑定点击
  $(".navlist .center_1200 li").on("click", function () { //点击导航栏 
    index = $(this).index() //获取导航栏的下标      
    $(this).addClass("active1")
    $(this).siblings().removeClass("active1") //siblings筛选兄弟元素
  })

  //给导航栏绑定鼠标划入事件
  $(".navlist .center_1200 li").on("mouseenter", function () { //点击导航栏 
    let index = $(this).index() //获取导航栏的下标     
    $(this).addClass("active1")
    $(this).siblings().removeClass("active1") //siblings筛选兄弟元素
  })
  $(".navlist .center_1200 li").on("mouseleave", function () { //点击导航栏 
    $(".navlist .center_1200 li").eq(index).addClass("active1").siblings().removeClass("active1")
  })
})

//导航栏点击事件
    $(".headerLeft>.listitem").click(function () {  //点击导航栏 
        var index = $(this).index()  //获取导航栏的下标      
        $(this).addClass("active")
        $(this).siblings().removeClass("active")//siblings筛选兄弟元素
		//控制下方正确的数据显示
        $('.navlist .navitem').eq(index).show();
        $('.navlist .navitem').eq(index).siblings().hide();   
})

//find方法获取子类
$(".contentList .item").click(function(){
    $(this).addClass("active1")
    $(this).find("p").addClass("active2")
    $(this).siblings().find("p").removeClass("active2")
    $(this).siblings().removeClass("active1")
})

//手机端控制导航条显示和隐藏
    $("header>.right").click(function (e) {
        $(".muenlist").css({
            "display": "block"
        })
        e.stopPropagation();
    })
    $("body").click(function (e) {
        $(".muenlist").hide()
        e.stopPropagation();
    })

jq监听屏幕滚动

  //监听页面滚动，设置对应动效
    $(window).scroll(function () {
        var scroH = $(window).scrollTop();  //滚动高度
        // var viewH = $(window).height();  //可见高度 
        // var contentH = $(document).height();  //内容高度
        if (scroH > 20) {  //距离顶部大于100px时
            $(".imglist").css({
                "transform": "rotate3d(0,1,0,180deg)",
                "transition": "all 2s"
            })
}
})

返回顶部

 $("body,html").animate(
            {
              scrollTop: 0,
            },
            500
          );

监听回车事件

```js
   document.onkeydown = function (e) { //对整个页面监听  
        var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值  
        //判断如果用户按下了回车键（keycody=13）  
        if (keyNum == 13) {
            $("#submit1").trigger(“click”);
        }
}

KaTeX parse error: Expected '}', got 'EOF' at end of input: … {             ("#submit").trigger(“click”);
        }
    });

## 手机端布局，适配
**方式一**
```js
  <style>
        html{
            font-size: 26.666667vw;  //	100vw/3.75
        }
        body{
            font-size: 16px;
        }
    </style>

方式二

//以320为例子
let fontSize = document.documentElement.clientWidth / 3.20
document.documentElement.style.fontSize = fontSize + "px"

 body{
            font-size: 16px;
        }

通过媒体查询来引入不同的css

<link rel="stylesheet" href="./index.css" media="all and (min-width:750px)">

all也可以换成 横/竖屏来区别
(arientation:portrait)
(arientation:landscape)

制作响应式页面

先写正常的css，在css后添加媒体查询，覆盖之前的样式

@media screen and (min-width: 500px) and (max-width: 800px) {
//body 必须有

  body {
                background-color: red;
            }
        }

pc端简单适配

html {
  font-size: 6.53595vw;
  color: #333;
}

body {
  font-size: 16px;
}

FTP与vscode

账号：
zd.zhengding.org.cn
wei_zhengding
NkFcLFaHJMGRfiSP

1.快捷键 ctrl+shift+p

2.输入 sftp:config

3.具体配置项
{
    “name”: “征订后台管理publish”,
    “host”: “zd.zhengding.org.cn”,
    “protocol”: “ftp”,
    “port”: 21,
    “username”: “wei_zhengding”,
    “password”: “NkFcLFaHJMGRfiSP”,
    “remotePath”: “/template/admin_style/zhengding/zhengding/publish/”,
    “uploadOnSave”: true,
    “ignore”: [
        “.vscode”,
        “.git”,
        “cmf/data/config/databse.php”
    ]
}

4.在ftp上下载对应文件，在本地创建一个文件夹，该文件夹不会被上传，只会上传文件夹下的文件