分类前端技术下的文章

2024-08-08

以下是一个使用jQuery UI Multiselect插件的基本示例代码：

首先，确保在HTML中包含jQuery和jQuery UI库以及multiselect插件的CSS和JavaScript文件：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery UI Multiselect Example</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://raw.githubusercontent.com/ehynds/jquery-ui-multiselect-widget/master/jquery.ui.multiselect.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://raw.githubusercontent.com/ehynds/jquery-ui-multiselect-widget/master/jquery.ui.multiselect.js"></script>
</head>
<body>
 
<select id="example" multiple="multiple">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
</select>
 
<script>
$(function() {
    $("#example").multiselect();
});
</script>
 
</body>
</html>

这段代码创建了一个带有多个选项的<select>元素，并通过调用$("#example").multiselect();来初始化多选插件。用户可以点击选择框来展开多选列表，并通过点击选项来进行多选。

- 阅读更多 -

Vue在表单校验中trigger属性指定何时触发校验规则

System

2024-08-08

所有,vue.js

在Vue中，使用表单验证时，通常会用到v-model来绑定输入数据，并用rules属性来指定验证规则。trigger属性用于指定触发验证的时机，可以是blur（输入框失去焦点时）或change（输入框内容变化时）。

以下是一个简单的例子，展示如何使用trigger属性：




<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item prop="username" :rules="usernameRules">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-button @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          username: ''
        },
        usernameRules: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      };
    },
    methods: {
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('验证通过');
          } else {
            console.log('验证失败');
            return false;
          }
        });
      }
    }
  };
</script>

在这个例子中，el-form-item组件的prop属性指定了要验证的数据字段，rules属性定义了用于该字段的验证规则，trigger属性指定了触发验证的时机是输入框失去焦点时（blur）。当点击提交按钮时，会触发表单验证。如果输入的用户名不符合规则，则会显示相应的错误信息。

- 阅读更多 -

JavaScript和jQuery的各标签选取方式？

System

2024-08-08

所有,jquery

在JavaScript和jQuery中，选取HTML标签通常使用以下方法：

JavaScript原生方法：
- document.getElementById('id')：通过元素ID获取一个元素。
- document.getElementsByClassName('class')：通过元素类名获取元素集合。
- document.getElementsByTagName('tagname')：通过元素标签名获取元素集合。
- document.querySelector('#id')：通过CSS选择器获取第一个匹配的元素。
- document.querySelectorAll('.class')：通过CSS选择器获取所有匹配的元素集合。
jQuery方法：
- $('#id')：通过ID选取元素。
- '.class'：通过类名选取元素。
- 'tagname'：通过标签名选取元素。
- $('selector')：通过CSS选择器选取元素。

示例代码：




// JavaScript原生方法
var elementById = document.getElementById('myId');
var elementsByClassName = document.getElementsByClassName('myClass');
var elementsByTagName = document.getElementsByTagName('div');
var firstElementByQuery = document.querySelector('div.myClass');
var allElementsByQuery = document.querySelectorAll('p');
 
// jQuery方法
var jqueryElementById = $('#myId');
var jqueryElementByClass = $('.myClass');
var jqueryElementByTag = $('div');
var jqueryElementBySelector = $('p.myClass');

- 阅读更多 -

jQueryMobile Web 开发基础知识

System

2024-08-08

所有,jquery




<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile 基础示例</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="home">
    <div data-role="header">
        <h1>首页</h1>
    </div>
    <div data-role="content">
        <p>这是首页的内容。</p>
        <a href="#profile" data-role="button" data-theme="b" data-transition="slide">查看个人资料</a>
    </div>
    <div data-role="footer">
        <h4>首页底部</h4>
    </div>
</div>
 
<div data-role="page" id="profile">
    <div data-role="header">
        <h1>个人资料</h1>
    </div>
    <div data-role="content">
        <p>这是个人资料的内容。</p>
        <a href="#home" data-role="button" data-theme="b" data-transition="slide">返回首页</a>
    </div>
    <div data-role="footer">
        <h4>个人资料底部</h4>
    </div>
</div>
 
</body>
</html>

这个代码示例展示了如何使用jQuery Mobile创建一个简单的移动网站，其中包含两个页面：首页和个人资料页。每个页面都有头部、内容区域和底部。在内容区域中，使用了按钮来在不同页面间进行跳转。这个示例演示了如何使用data-role="page"来定义页面，以及如何使用data-role="header"、data-role="content"和data-role="footer"来组织页面布局。同时，展示了如何使用data-transition="slide"来设定页面跳转时的动画效果。

- 阅读更多 -

jQuery实现电梯导航

System

2024-08-08

所有,jquery

以下是一个简单的jQuery电梯导航示例，它使用滚动事件监听器来更新导航的激活状态：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电梯导航示例</title>
<style>
  body, html {
    height: 2000px;
  }
  #navbar {
    position: fixed;
    top: 20px;
    right: 20px;
  }
  .nav-link {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
    color: #333;
  }
  .nav-link.active {
    color: #000;
    font-weight: bold;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="navbar">
  <a class="nav-link" href="#section1">Section 1</a>
  <a class="nav-link" href="#section2">Section 2</a>
  <a class="nav-link" href="#section3">Section 3</a>
  <a class="nav-link" href="#section4">Section 4</a>
</div>
 
<div id="section1">Content for Section 1</div>
<div id="section2">Content for Section 2</div>
<div id="section3">Content for Section 3</div>
<div id="section4">Content for Section 4</div>
 
<script>
$(document).ready(function(){
  // 定义所有导航链接
  var navLinks = $('#navbar a');
 
  // 定义一个函数来更新导航激活状态
  function updateNav() {
    var scrollPos = $(window).scrollTop();
 
    navLinks.each(function() {
      var id = $(this).attr('href');
      var offsetTop = $(id).offset().top - 70;
      if (scrollPos >= offsetTop) {
        navLinks.removeClass('active');
        $(this).addClass('active');
      }
    });
  }
 
  // 初始化导航激活状态
  updateNav();
 
  // 监听滚动事件来更新导航激活状态
  $(window).scroll(function() {
    updateNav();
  });
});
</script>
 
</body>
</html>

这段代码中，我们定义了一个名为updateNav的函数，该函数遍历所有导航链接并检查它们对应的区域是否在视口内。如果是，该导航链接被赋予.active类，表示它是当前激活的部分。此外，我们还为window对象添加了一个滚动事件监听器，以便在用户滚动时更新激活的导航项。

- 阅读更多 -

JQuery高级（回调函数 clearInterval 插件）

System

2024-08-08

所有,jquery




// 定义一个简单的插件，用于停止指定间隔调用
;(function($){
    $.fn.stopInterval = function(){
        return this.each(function(){
            var elem = $(this);
            if(elem.data('intervalId')){
                clearInterval(elem.data('intervalId'));
                elem.removeData('intervalId');
            }
        });
    };
})(jQuery);
 
// 使用插件
$(document).ready(function(){
    var intervalId = setInterval(function(){
        console.log('这个会持续打印，直到调用 stopInterval 方法。');
    }, 1000);
 
    // 将 intervalId 存储在元素上
    $('#myElement').data('intervalId', intervalId);
 
    // 假设在某个时间点，我们想停止间隔调用
    $('#myElement').stopInterval();
});

这段代码定义了一个简单的jQuery插件，用于停止先前设置的setInterval调用。它首先检查元素是否有intervalId数据属性，如果有，则使用clearInterval停止对应的间隔调用，并移除该数据属性。这样，该插件可以被用来管理和控制间隔调用的生命周期。

- 阅读更多 -

jquery的blockUI遮罩层的使用，web开发文档

System

2024-08-08

所有,jquery




// 引入jQuery和jQuery.blockUI插件
// <script src="path/to/jquery.min.js"></script>
// <script src="path/to/jquery.blockUI.min.js"></script>
 
$(document).ready(function() {
    // 显示遮罩层
    $.blockUI({
        message: '<h1>正在处理，请稍候...</h1>', // 遮罩层中显示的消息
        css: {
            border: 'none',
            padding: '15px',
            backgroundColor: 'rgba(0,0,0,0.5)', // 遮罩层的背景颜色
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5, // 透明度
            color: '#fff' // 文本颜色
        }
    });
 
    // 模拟一段异步处理的代码，比如Ajax请求
    setTimeout(function() {
        // 异步处理完毕后，取消遮罩层
        $.unblockUI();
    }, 2000); // 假设处理需要2秒钟
});

这段代码展示了如何使用jQuery的blockUI插件来显示一个简单的加载提示。在异步操作（如Ajax请求）开始前显示遮罩层，操作完成后取消遮罩层。这是一个常见的用户体验改善手段，可以避免用户在等待服务器响应时进行其他操作。

- 阅读更多 -

JQuery前端如何操作JSON

System

2024-08-08

所有,jquery

在前端使用jQuery操作JSON对象，通常是指解析JSON字符串为JavaScript对象，或者将JavaScript对象转换为JSON字符串。以下是两个基本操作的示例代码：

将JSON字符串解析为JavaScript对象：




var jsonString = '{"name": "John", "age": 30}';
var jsonObj = $.parseJSON(jsonString); // 使用$.parseJSON解析JSON字符串
console.log(jsonObj.name); // 输出: John

将JavaScript对象转换为JSON字符串：




var jsObj = {name: "Jane", age: 25};
var jsonString = JSON.stringify(jsObj); // 使用JSON.stringify转换为JSON字符串
console.log(jsonString); // 输出: '{"name":"Jane","age":25}'

请注意，从jQuery 3.0开始，官方推荐使用原生的JSON.parse()和JSON.stringify()方法来解析和序列化JSON，而不是使用$.parseJSON()。上述第一个操作中的代码可以简化为：




var jsonObj = JSON.parse(jsonString); // 使用原生的JSON.parse解析JSON字符串

System

2024-08-08

所有,jquery




<!DOCTYPE html>
<html>
<head>
    <title>Flask流输出示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div id="output"></div>
 
    <script>
        function streamOutput() {
            var source = new EventSource('/stream');
            source.onmessage = function (event) {
                $('#output').append(event.data + '<br>');
            };
        }
 
        $(document).ready(function() {
            streamOutput();
        });
    </script>
</body>
</html>

在这个例子中，我们使用了jQuery库来简化DOM操作，并通过EventSource API实现了服务器端的信息流的前端接收。当页面加载完成后，streamOutput函数会被调用，建立与服务器的连接，并将接收到的信息逐行追加到页面的<div id="output"></div>元素中。服务器端的路由/stream需要支持服务器发送事件(SSE)，以便能够向客户端发送信息流。

- 阅读更多 -

echart图表之highcharts

System

2024-08-08

所有,jquery

ECharts 和 Highcharts 都是常用的图表库，它们各有特色，但在许多方面，它们的功能是相似的。以下是一个简单的比较：

开源许可证：ECharts 使用 Apache-2.0 许可证开源，Highcharts 使用 MIT 许可证。
大小：Highcharts 库比较大，包含所有图表类型和功能，而 ECharts 更轻量级，可以按需加载模块。
支持的图表类型：两者都支持常见的图表类型，如柱状图、折线图、饼图等，但 Highcharts 可能支持一些更特殊或新兴的图表类型。
社区支持：两者都有活跃的社区和文档支持。
商业版本：Highcharts 提供有费用的商业支持和扩展，而 ECharts 在这方面可能没有直接的商业支持。
更新频率：两者都在持续更新以提供新功能和修复漏洞。

如果你需要一个更轻量级、按需加载的图表库，并且更注重中国式报表和图表，那么 ECharts 可能是更好的选择。如果你需要更多的专业图表类型和更成熟的商业支持，那么 Highcharts 可能是更好的选择。

以下是一个简单的 ECharts 和 Highcharts 柱状图的示例代码：

ECharts 示例代码：




// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
 
// 指定图表的配置项和数据
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};
 
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

Highcharts 示例代码：




Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul'
        ]
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 13

- 阅读更多 -