经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题
来源：cnblogs　　作者：潇洒今生　　时间：2018/12/24 10:31:46　　对本文有异议

 

环境介绍
Openlayers ol.js v5.3.0
Highcharts highcharts.js v7.0.1
jquery jquery-3.3.1.js v3.3.1

 

 

 

 

 

显示效果

地图放大缩小对统计图的大小无影响

以饼状图为例

1、添加地图，并渲染统计图所在的点位，

  1. vector是渲染feature需要用的图层，一定要保证在所有图层的最前方，否则渲染的feature会被遮盖，（地图量算时由于这个问题搞了一上午）
  1. sourceMeasure = new ol.source.Vector({ wrapX: false });
  2.  
  3.     vector = new ol.layer.Vector({
  4.         source: sourceMeasure,
  5.         style: new ol.style.Style({
  6.             fill: new ol.style.Fill({
  7.                 color: 'rgba(255, 255, 0, 0.2)'
  8.             }),
  9.             stroke: new ol.style.Stroke({
  10.                 color: '#ffcc33',
  11.                 width: 2
  12.             }),
  13.             image: new ol.style.Circle({
  14.                 radius: 7,
  15.                 fill: new ol.style.Fill({
  16.                     color: '#ffaa33'
  17.                 })
  18.             })
  19.         })
  20.     });
  21.  
  22.     map = new ol.Map({
  23.         controls: ol.control.defaults({
  24.             attribution: false
  25.         }),
  26.         target: 'map',
  27.         layers: [
  28.             new ol.layer.Tile({
  29.                 source: new ol.source.OSM()
  30.             }),
  31.             vector
  32.         ],
  33.         view: new ol.View({
  34.             projection: 'EPSG:3857',
  35.             center: ol.proj.transform([121, 37], 'EPSG:4326', 'EPSG:3857'),
  36.             //center: [121, 37],
  37.             zoom: 6
  38.         })
  39.     });
  40.  
  41.     DrawPoint();

2、画点的方法

  1. function DrawPoint() {
  2.     for (var i = 0; i < dataPie.length; i++) {
  3.         var d = dataPie[i];
  4.         var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  5.  
  6.         var point = new ol.geom.Point(pt);
  7.  
  8.         var feature = new ol.Feature(point);
  9.  
  10.         sourceMeasure.addFeature(feature);
  11.     }
  12. }

3、添加统计图

下面是原始的方法，可以显示统计图，但是初始位置不对，但是稍微拖动下地图，位置又跳到对的位置了，没找到问题，换成了后面的方法2

  1. //方法1
    //$("#addPieChart").on("click", function () {
  2. //    clearChartOverlay();
  3. //    for (var i = 0; i < dataPie.length; i++) {
  4. //        var d = dataPie[i];
  5. //        var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  6. //        var domid = "chart" + guid();
  7. //        $("#chart").append("<div id='" + domid + "'></div>");
  8. //        var chart = new ol.Overlay({
  9. //            id: domid,
  10. //            position: pt,
  11. //            positioning: "bottom-center",
  12. //            element: document.getElementById(domid),
  13. //            offset: [0, 18],
  14. //            stopEvent: false  //overlay也支持滚珠放大缩小
  15. //        });
  16. //        map.addOverlay(chart);
  17. //        addPieChart(domid, d, 100);
  18. //        overlayId.push(domid);
  19. //    }
  20. //});

可能是因为对Overlay的element做了设置解决的这个问题，比较玄学

  1. //方法2 
    $("#addPieChart").on("click", function () {
  2.         clearChartOverlay();
  3.         for (var i = 0; i < dataPie.length; i++) {
  4.             var d = dataPie[i];
  5.             var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  6.             var domid = "chart" + guid();
  7.             $("#chart").append("<div id='" + domid + "'></div>");
  8.  
  9.             addPieChart(domid, d, 100);
  10.  
  11.             var chart = new ol.Overlay({
  12.                 id: domid,
  13.                 element: document.getElementById(domid),
  14.                 positioning: "bottom-center", //统计图和渲染点位的位置关系
  15.                 offset: [0, 18],//如果统计图相对于点位又偏移，可以通过此属性将统计图移回来
  16.                 stopEvent: false  //overlay也支持滚珠放大缩小
  17.             });
  18.             map.addOverlay(chart);
  19.             
  20.             var element = chart.getElement();
  21.             chart.setPosition(pt);
  22.             //使用下面的方法显示Overlay，可避免初始位置不对，拖动一下地图跳动的问题
  23.             $(element).popover({
  24.                 placement: 'top',
  25.                 animation: false
  26.             });
  27.             $(element).popover('show');
  28.             
  29.             overlayId.push(domid);
  30.         }
  31.     });

　　移除所有用来显示统计图的Overlay，和饼图的方法，highcharts里很多，想要别的风格可以去看highcharts的api

  1. /**
  2.  * 移除统计图所使用的Overlay
  3.  * */
  4. function clearChartOverlay() {
  5.     for (var i = 0; i < overlayId.length; i++) {
  6.         map.removeOverlay(map.getOverlayById(overlayId[i]));
  7.     }
  8. }
  9.  
  10. function addPieChart(domid, data, size) {
  11.     $('#' + domid).highcharts({
  12.         chart: {
  13.             backgroundColor: 'rgba(255, 255, 255, 0)',
  14.             plotBorderColor: null,
  15.             plotBackgroundColor: null,
  16.             plotBackgroundImage: null,
  17.             plotBorderWidth: null,
  18.             plotShadow: false,
  19.             width: size,
  20.             height: size
  21.         },
  22.         tooltip: {
  23.             pointFormat: '<b>{point.percentage:.1f}%</b>'
  24.         },
  25.         credits: {
  26.             enabled: false
  27.         },
  28.         title: {
  29.             text: ''
  30.         },
  31.         plotOptions: {
  32.             pie: {
  33.                 dataLabels: {
  34.                     enabled: false
  35.                 }
  36.             }
  37.         },
  38.         series: [{
  39.             type: 'pie',
  40.             name: data.name,
  41.             data: data.data
  42.         }]
  43.     });
  44. }

　　4、差不多就这么多，线状图和柱状图都类似，下面是完成代码

html

  1. @{
  2.     ViewBag.Title = "StatisticalChart";
  3.     Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  5.  
  6. @Styles.Render("~/Content/openlayers")
  7.  
  8. <div id="map" class="map">
  9.  
  10. </div>
  11. <div class="tool">
  12.     <button id="addPieChart">添加饼图</button>
  13.     <button id="addLineChart">添加线状图</button>
  14.     <button id="addColumnChart">添加柱状图</button>
  15. </div>
  16. <div style="display: none;" id="chart">
  17. </div>
  18.  
  19. @Scripts.Render("~/bundles/openlayers")
  20. <script src="~/Scripts/openlayers/MapStatisticalChart.js"></script>
  21. <script src="~/Scripts/Highcharts/highcharts.js"></script>
  22. <script type="text/javascript">
  23.  
  24.     $(document).ready(function () {
  25.         init();
  26.     });
  27.  
  28. </script>

　　js

  1. /*
  2.  *地图上显示统计图
  3.  */
  4.  
  5. //地图渲染的两个对象
  6. var vector;
  7. var sourceMeasure;
  8.  
  9. //x,y表示渲染的位置，如果是点图层好说，如果是面或者线，需要获取中心点
  10. var overlayId = [];
  11. var dataPie = [{
  12.     name: "乌鲁木齐", x: 87.5758285931, y: 43.7822116460, data: [
  13.         {
  14.             name: '男',
  15.             y: 40.0,
  16.             color: "#5ab1ef"
  17.         }, {
  18.             name: '女',
  19.             y: 60.0,
  20.             color: "#d87a80"
  21.         }
  22.     ]
  23. },
  24. {
  25.     name: "拉萨", x: 91.1629975040, y: 29.7104204643, data: [
  26.         {
  27.             name: '男',
  28.             y: 45.0,
  29.             color: "#5ab1ef"
  30.         }, {
  31.             name: '女',
  32.             y: 55.0,
  33.             color: "#d87a80"
  34.         }
  35.     ]
  36. },
  37. {
  38.     name: "北京", x: 116.4575803581078, y: 40.04054437977018, data: [
  39.         {
  40.             name: '男',
  41.             y: 35.0,
  42.             color: "#5ab1ef"
  43.         }, {
  44.             name: '女',
  45.             y: 65.0,
  46.             color: "#d87a80"
  47.         }
  48.     ]
  49. },
  50. {
  51.     name: "兰州", x: 103.584297498, y: 36.1190864503, data: [
  52.         {
  53.             name: '男',
  54.             y: 44.0,
  55.             color: "#5ab1ef"
  56.         }, {
  57.             name: '女',
  58.             y: 56.0,
  59.             color: "#d87a80"
  60.         }
  61.     ]
  62. }];
  63. var map;
  64. function init() {
  65.     sourceMeasure = new ol.source.Vector({ wrapX: false });
  66.  
  67.     vector = new ol.layer.Vector({
  68.         source: sourceMeasure,
  69.         style: new ol.style.Style({
  70.             fill: new ol.style.Fill({
  71.                 color: 'rgba(255, 255, 0, 0.2)'
  72.             }),
  73.             stroke: new ol.style.Stroke({
  74.                 color: '#ffcc33',
  75.                 width: 2
  76.             }),
  77.             image: new ol.style.Circle({
  78.                 radius: 7,
  79.                 fill: new ol.style.Fill({
  80.                     color: '#ffaa33'
  81.                 })
  82.             })
  83.         })
  84.     });
  85.  
  86.     map = new ol.Map({
  87.         controls: ol.control.defaults({
  88.             attribution: false
  89.         }),
  90.         target: 'map',
  91.         layers: [
  92.             new ol.layer.Tile({
  93.                 source: new ol.source.OSM()
  94.             }),
  95.             vector
  96.         ],
  97.         view: new ol.View({
  98.             projection: 'EPSG:3857',
  99.             center: ol.proj.transform([121, 37], 'EPSG:4326', 'EPSG:3857'),
  100.             //center: [121, 37],
  101.             zoom: 6
  102.         })
  103.     });
  104.  
  105.     DrawPoint();
  106.  
  107.     $("#addPieChart").on("click", function () {
  108.         clearChartOverlay();
  109.         for (var i = 0; i < dataPie.length; i++) {
  110.             var d = dataPie[i];
  111.             var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  112.             var domid = "chart" + guid();
  113.             $("#chart").append("<div id='" + domid + "'></div>");
  114.  
  115.             addPieChart(domid, d, 100);
  116.  
  117.             var chart = new ol.Overlay({
  118.                 id: domid,
  119.                 element: document.getElementById(domid),
  120.                 positioning: "bottom-center",
  121.                 offset: [0, 18],
  122.                 stopEvent: false  //overlay也支持滚珠放大缩小
  123.             });
  124.             map.addOverlay(chart);
  125.             
  126.             var element = chart.getElement();
  127.             chart.setPosition(pt);
  128.             //使用下面的方法显示Overlay，可避免初始位置不对，拖动一下地图跳动的问题
  129.             $(element).popover({
  130.                 placement: 'top',
  131.                 animation: false
  132.             });
  133.             $(element).popover('show');
  134.             
  135.             overlayId.push(domid);
  136.         }
  137.     });
  138.  
  139.     $("#addLineChart").on("click", function () {
  140.         clearChartOverlay();
  141.         for (var i = 0; i < dataLine.length; i++) {
  142.             var d = dataLine[i];
  143.             var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  144.             var domid = "chart" + guid();
  145.             //$("#chart").append("<div id='" + domid + "'></div>");
  146.             //var chart = new ol.Overlay({
  147.             //    id: domid,
  148.             //    position: pt,
  149.             //    positioning: "bottom-center",
  150.             //    element: document.getElementById(domid),
  151.             //    stopEvent: false  //overlay也支持滚珠放大缩小
  152.             //});
  153.             //map.addOverlay(chart);
  154.             //addLineChart(domid, d.data, 200, 150);
  155.             //overlayId.push(domid);
  156.  
  157.             $("#chart").append("<div id='" + domid + "'></div>");
  158.             var chart = new ol.Overlay({
  159.                 id: domid,
  160.                 positioning: "bottom-center",
  161.                 element: document.getElementById(domid),
  162.                 stopEvent: false  //overlay也支持滚珠放大缩小
  163.             });
  164.             map.addOverlay(chart);
  165.             addLineChart(domid, d.data, 200, 150);
  166.             
  167.  
  168.             var element = chart.getElement();
  169.             chart.setPosition(pt);
  170.             //使用下面的方法显示Overlay，可避免初始位置不对，拖动一下地图跳动的问题
  171.             $(element).popover({
  172.                 placement: 'top',
  173.                 animation: false
  174.             });
  175.             $(element).popover('show');
  176.  
  177.             overlayId.push(domid);
  178.         }
  179.     });
  180.  
  181.     $("#addColumnChart").on("click", function () {
  182.         clearChartOverlay();
  183.         for (var i = 0; i < dataColumn.length; i++) {
  184.             var d = dataColumn[i];
  185.             var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  186.             var domid = "chart" + guid();
  187.             $("#chart").append("<div id='" + domid + "'></div>");
  188.             var chart = new ol.Overlay({
  189.                 id: domid,
  190.                 positioning: "bottom-center",
  191.                 element: document.getElementById(domid),
  192.                 offset: [0, 5],
  193.                 stopEvent: false  //overlay也支持滚珠放大缩小
  194.             });
  195.             map.addOverlay(chart);
  196.             addColumnChart(domid, d.data, 80, 80);
  197.  
  198.             var element = chart.getElement();
  199.             chart.setPosition(pt);
  200.             //使用下面的方法显示Overlay，可避免初始位置不对，拖动一下地图跳动的问题
  201.             $(element).popover({
  202.                 placement: 'top',
  203.                 animation: false
  204.             });
  205.             $(element).popover('show');
  206.             
  207.             overlayId.push(domid);
  208.         }
  209.     });
  210. }
  211. /**
  212.  * 移除统计图所使用的Overlay
  213.  * */
  214. function clearChartOverlay() {
  215.     for (var i = 0; i < overlayId.length; i++) {
  216.         map.removeOverlay(map.getOverlayById(overlayId[i]));
  217.     }
  218. }
  219.  
  220. function addPieChart(domid, data, size) {
  221.     $('#' + domid).highcharts({
  222.         chart: {
  223.             backgroundColor: 'rgba(255, 255, 255, 0)',
  224.             plotBorderColor: null,
  225.             plotBackgroundColor: null,
  226.             plotBackgroundImage: null,
  227.             plotBorderWidth: null,
  228.             plotShadow: false,
  229.             width: size,
  230.             height: size
  231.         },
  232.         tooltip: {
  233.             pointFormat: '<b>{point.percentage:.1f}%</b>'
  234.         },
  235.         credits: {
  236.             enabled: false
  237.         },
  238.         title: {
  239.             text: ''
  240.         },
  241.         plotOptions: {
  242.             pie: {
  243.                 dataLabels: {
  244.                     enabled: false
  245.                 }
  246.             }
  247.         },
  248.         series: [{
  249.             type: 'pie',
  250.             name: data.name,
  251.             data: data.data
  252.         }]
  253.     });
  254. }
  255.  
  256. var dataLine = [{
  257.     name: "乌鲁木齐", x: 87.5758285931, y: 43.7822116460, data: [
  258.         {
  259.             name: '安装，实施人员',
  260.             series: [
  261.                 { x: 2010, y: 1234 },
  262.                 { x: 2011, y: 1234 }
  263.             ],
  264.             color: "#5ab1ef"
  265.         }, {
  266.             name: '工人',
  267.             series: [
  268.                 { x: 2010, y: 245 },
  269.                 { x: 2011, y: 3454 }
  270.             ],
  271.             color: "#d87a80"
  272.         }
  273.     ]
  274. },
  275. {
  276.     name: "拉萨", x: 91.1629975040, y: 29.7104204643, data: [
  277.         {
  278.             name: '安装，实施人员',
  279.             series: [
  280.                 { x: 2010, y: 1234 },
  281.                 { x: 2011, y: 124 },
  282.                 { x: 2012, y: 0 }
  283.             ],
  284.             color: "#5ab1ef"
  285.         }, {
  286.             name: '工人',
  287.             series: [
  288.                 { x: 2010, y: 245 },
  289.                 { x: 2011, y: 0 },
  290.                 { x: 2012, y: 3454 }
  291.             ],
  292.             color: "#d87a80"
  293.         }
  294.     ]
  295. }];
  296.  
  297. function addLineChart(domid, data, width, height) {
  298.  
  299.     var categoriesX = [];
  300.     var seriesValue = [];
  301.     for (var i = 0; i < data.length; i++) {
  302.         var value = [];
  303.         for (var j = 0; j < data[i].series.length; j++) {
  304.             categoriesX.push(data[i].series[j].x);
  305.             value.push(data[i].series[j].y);
  306.         }
  307.  
  308.         seriesValue.push({ "name": data[i].name, "data": value });
  309.     }
  310.  
  311.     $('#' + domid).highcharts({
  312.         chart: {
  313.             backgroundColor: 'rgba(255, 255, 255, 0.8)',
  314.             borderRadius: 20,
  315.             plotBorderColor: null,
  316.             plotBackgroundColor: null,
  317.             plotBackgroundImage: null,
  318.             plotBorderWidth: null,
  319.             plotShadow: false,
  320.             width: width,
  321.             height: height
  322.         },
  323.         credits: {
  324.             enabled: false
  325.         },
  326.         title: {
  327.             text: ''
  328.         },
  329.         yAxis: {
  330.             visible: false,
  331.             title: {
  332.                 text: ''
  333.             }
  334.         },
  335.         xAxis: {
  336.             categories: categoriesX,
  337.             crosshair: true
  338.         },
  339.         legend: {
  340.             enabled: false
  341.         },
  342.         plotOptions: {
  343.             series: {
  344.                 label: {
  345.                     connectorAllowed: false
  346.                 }
  347.             },
  348.             line: {
  349.                 dataLabels: {
  350.                     enabled: true,
  351.                     formatter: function () {
  352.                         return '<b>' + this.point.y + '</b><br>';
  353.                     }
  354.                 }
  355.             }
  356.         },
  357.         series: seriesValue,
  358.         responsive: {
  359.             rules: [{
  360.                 condition: {
  361.                     maxWidth: 500
  362.                 },
  363.                 chartOptions: {
  364.                     legend: {
  365.                         layout: 'horizontal',
  366.                         align: 'center',
  367.                         verticalAlign: 'bottom'
  368.                     }
  369.                 }
  370.             }]
  371.         }
  372.     });
  373. }
  374.  
  375. var dataColumn = [{
  376.     name: "乌鲁木齐", x: 87.5758285931, y: 43.7822116460, data: [
  377.         {
  378.             name: '安装，实施人员',
  379.             series: [
  380.                 { x: 2011, y: 1234 }
  381.             ],
  382.             color: "#5ab1ef"
  383.         }, {
  384.             name: '工人',
  385.             series: [
  386.                 { x: 2011, y: 3454 }
  387.             ],
  388.             color: "#d87a80"
  389.         }
  390.     ]
  391. },
  392. {
  393.     name: "拉萨", x: 91.1629975040, y: 29.7104204643, data: [
  394.         {
  395.             name: '安装，实施人员',
  396.             series: [
  397.                 { x: 2012, y: 123 }
  398.             ],
  399.             color: "#5ab1ef"
  400.         }, {
  401.             name: '工人',
  402.             series: [
  403.                 { x: 2012, y: 3454 }
  404.             ],
  405.             color: "#d87a80"
  406.         }
  407.     ]
  408. }, {
  409.     name: "北京", x: 116.4575803581078, y: 40.04054437977018, data: [
  410.         {
  411.             name: '安装，实施人员',
  412.             series: [
  413.                 { x: 2014, y: 252 }
  414.             ],
  415.             color: "#5ab1ef"
  416.         }, {
  417.             name: '工人',
  418.             series: [
  419.                 { x: 2014, y: 324 }
  420.             ],
  421.             color: "#d87a80"
  422.         }
  423.     ]
  424. },
  425. {
  426.     name: "兰州", x: 103.584297498, y: 36.1190864503, data: [
  427.         {
  428.             name: '安装，实施人员',
  429.             series: [
  430.                 { x: 2013, y: 2341 }
  431.             ],
  432.             color: "#5ab1ef"
  433.         }, {
  434.             name: '工人',
  435.             series: [
  436.                 { x: 2013, y: 2341 }
  437.             ],
  438.             color: "#d87a80"
  439.         }
  440.     ]
  441. }];
  442.  
  443. function addColumnChart(domid, data, width, height) {
  444.  
  445.     var categoriesX = [];
  446.     var seriesValue = [];
  447.     for (var i = 0; i < data.length; i++) {
  448.         var value = [];
  449.         for (var j = 0; j < data[i].series.length; j++) {
  450.             categoriesX.push(data[i].series[j].x);
  451.             value.push(data[i].series[j].y);
  452.         }
  453.  
  454.         seriesValue.push({ "name": data[i].name, "data": value });
  455.     }
  456.  
  457.     $('#' + domid).highcharts({
  458.         chart: {
  459.             backgroundColor: 'rgba(255, 255, 255, 0)',
  460.             borderRadius: 20,
  461.             plotBorderColor: null,
  462.             plotBackgroundColor: null,
  463.             plotBackgroundImage: null,
  464.             plotBorderWidth: null,
  465.             plotShadow: false,
  466.             width: width,
  467.             height: height,
  468.             type: 'column'
  469.         },
  470.         credits: {
  471.             enabled: false
  472.         },
  473.         title: {
  474.             text: ''
  475.         },
  476.         yAxis: {
  477.             visible: false,
  478.             title: {
  479.                 text: ''
  480.             }
  481.         },
  482.         xAxis: {
  483.             visible: false,
  484.             categories: categoriesX,
  485.             crosshair: true
  486.         },
  487.         legend: {
  488.             enabled: false
  489.         },
  490.         plotOptions: {
  491.             series: {
  492.                 label: {
  493.                     connectorAllowed: false
  494.                 }
  495.             },
  496.             line: {
  497.                 dataLabels: {
  498.                     enabled: true,
  499.                     formatter: function () {
  500.                         return '<b>' + this.point.y + '</b><br>';
  501.                     }
  502.                 }
  503.             }
  504.         },
  505.         series: seriesValue,
  506.         responsive: {
  507.             rules: [{
  508.                 condition: {
  509.                     maxWidth: 500
  510.                 },
  511.                 chartOptions: {
  512.                     legend: {
  513.                         layout: 'horizontal',
  514.                         align: 'center',
  515.                         verticalAlign: 'bottom'
  516.                     }
  517.                 }
  518.             }]
  519.         }
  520.     });
  521. }
  522.  
  523. function DrawPoint() {
  524.     for (var i = 0; i < dataPie.length; i++) {
  525.         var d = dataPie[i];
  526.         var pt = ol.proj.transform([d.x, d.y], 'EPSG:4326', 'EPSG:3857');
  527.  
  528.         var point = new ol.geom.Point(pt);
  529.  
  530.         var feature = new ol.Feature(point);
  531.  
  532.         sourceMeasure.addFeature(feature);
  533.     }
  534. }

　　引用的资料包括：https://blog.csdn.net/gisshixisheng/article/details/50926948，https://blog.csdn.net/henrystern/article/details/81149015

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号