Tech Blog

2024-08-15

解释：

在使用jQuery设置或获取自定义属性时，如果使用data-*前缀的属性，应当使用.data()方法而不是.attr()方法。.data()方法会将数据存储在jQuery的缓存中，而.attr()方法会直接操作DOM元素的属性。如果在.attr()方法中使用data-*属性，可能会遇到设置无效或获取不正确的问题。

解决方法：

确保在设置或获取data-*属性时，统一使用.data()方法。

设置自定义属性data-elem的值：




$('#yourElementId').data('elem', 'value');

获取自定义属性data-elem的值：




var elemValue = $('#yourElementId').data('elem');

如果你必须使用.attr()方法来操作data-*属性，请确保符合以下格式：

设置属性：




$('#yourElementId').attr('data-elem', 'value');

获取属性：




var elemValue = $('#yourElementId').attr('data-elem');

总结：

使用.data()方法操作data-*属性可以保证数据的一致性和正确性。
如果需要通过DOM操作真实的属性，应当使用.attr()方法。

System

2024-08-15

所有,javascript




// ArrayBuffer转字符串
function ab2str(buf) {
  return new TextDecoder().decode(buf);
}
 
// 字符串转ArrayBuffer
function str2ab(str) {
  return new TextEncoder().encode(str);
}
 
// ArrayBuffer转十六进制字符串
function ab2hex(buf) {
  return Array.prototype.map.call(new Uint8Array(buf), x => ('00' + x.toString(16)).slice(-2)).join('');
}
 
// 十六进制字符串转ArrayBuffer
function hex2ab(hexString) {
  if (!hexString.match(/^[0-9a-fA-F]+$/)) {
    throw new Error('The input string is not a valid hex string');
  }
  var bytes = new Uint8Array(hexString.length / 2);
  for (var i = 0; i < bytes.length; i++) {
    bytes[i] = parseInt(hexString.substr(i * 2, 2), 16);
  }
  return bytes.buffer;
}
 
// 示例使用
var str = "Hello, ArrayBuffer!";
var buffer = str2ab(str);
var hexStr = ab2hex(buffer);
var bufferFromHex = hex2ab(hexStr);
var strFromBuffer = ab2str(bufferFromHex);
 
console.log(strFromBuffer === str); // true

以上代码提供了ArrayBuffer与字符串之间相互转换的函数，以及ArrayBuffer与十六进制字符串之间转换的函数。这些函数可以用于处理需要在ArrayBuffer和其他数据格式之间转换的场景。

- 阅读更多 -

HTML使用jQuery完成一个简单的扫雷游戏

System

2024-08-15

所有,jquery

以下是一个简单的HTML和jQuery代码示例，用于创建一个扫雷游戏的框架。这个示例不包括完整的游戏逻辑，只是提供了基本的界面和事件绑定。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mine Sweeper</title>
    <style>
        .minefield {
            margin: 10px;
            width: 300px;
            height: 300px;
            background-color: #CCC;
            float: left;
        }
        .tile {
            width: 10px;
            height: 10px;
            float: left;
            border: 1px solid #000;
            line-height: 10px;
            text-align: center;
        }
        .hidden {
            background-color: #FFF;
        }
        .revealed {
            background-color: #EEE;
        }
        .mine {
            background-color: #F00;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var rows = 10;
            var cols = 10;
            var numMines = 10;
 
            var gameField = $('.minefield');
 
            // 初始化游戏地图
            for (var i = 0; i < rows; i++) {
                for (var j = 0; j < cols; j++) {
                    var tile = $('<div class="tile hidden"></div>').css({
                        'position': 'absolute',
                        'top': i * 10,
                        'left': j * 10
                    }).data('row', i).data('col', j);
                    gameField.append(tile);
                }
            }
 
            // 点击方块事件
            $('.tile').on('click', function() {
                // 游戏逻辑来了
                // 例如，判断是否为地雷，然后显示相应的数字或标记
                // 这里只是简单地将点击的方块变为显示状态
                $(this).removeClass('hidden').addClass('revealed');
            });
        });
    </script>
</head>
<body>
    <div class="minefield"></div>
</body>
</html>

这段代码创建了一个300x300像素的游戏界面，并初始化了一个10x10的游戏地图。每个方块代表游戏中的一个格子，并绑定了点击事件，当玩家点击方块时，方块会变为显示状态。游戏逻辑需要进一步完善，比如判断地雷、计算周围地雷数量等。

- 阅读更多 -

jQuery最方便的前端验证方式2种(非空验证与比较验证)

System

2024-08-15

所有,jquery




$(document).ready(function() {
    // 非空验证
    $('#input1').on('blur', function() {
        if ($(this).val() === '') {
            alert('输入不能为空！');
        }
    });
 
    // 比较验证
    $('#input2').on('blur', function() {
        if ($(this).val() < 100) {
            alert('输入值必须大于等于100！');
        }
    });
});

这段代码使用jQuery为两个输入框添加了失去焦点(blur)事件的监听器。当输入框#input1失去焦点时，如果其值为空，则弹出警告框提示用户输入不能为空。当输入框#input2失去焦点时，如果其值小于100，则弹出警告框提示用户输入值必须大于等于100。这是前端验证的常见需求，jQuery 使得这种操作变得简单而高效。

System

2024-08-15

所有,jquery

该项目是一个简化的Java项目，使用了Spring Boot框架，结合了JQuery、HTML和JSP技术，并连接了MySQL数据库。以下是一些核心代码片段，展示了如何定义一个控制器和处理用户请求。




// 导入Spring Boot相关依赖
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
 
// 定义控制器
@Controller
public class UserController {
 
    // 展示登录页面
    @GetMapping("/login")
    public String loginPage() {
        return "login";
    }
 
    // 处理登录请求
    @PostMapping("/login")
    public @ResponseBody String loginUser(
        @RequestParam String username, 
        @RequestParam String password) {
        // 这里应该添加逻辑来验证用户名和密码
        // 如果验证通过，返回"success"，否则返回"error"
        return "success";
    }
 
    // 其他控制器方法...
}

这段代码展示了如何在Spring Boot中创建一个控制器，以及如何使用@GetMapping和@PostMapping注解来映射HTTP请求到特定的处理方法。loginPage方法响应GET请求，返回登录页面的视图名称。loginUser方法处理POST请求，接收用户名和密码，并返回一个简单的响应。

在实际的项目中，你需要实现具体的数据库验证逻辑，以及错误处理等功能。这只是一个展示如何开始的简单例子。

- 阅读更多 -

jQuery 文件上传，面试高频题目

System

2024-08-15

所有,jquery

在使用jQuery进行文件上传时，可以利用$.ajax方法来异步上传文件。以下是一个简单的例子：

HTML部分：




<form id="fileUploadForm" method="post" enctype="multipart/form-data">
    <input type="file" id="fileInput" name="file" />
    <button type="submit" id="uploadButton">上传</button>
</form>

jQuery和JavaScript部分：




$(document).ready(function() {
    $('#fileUploadForm').submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
        var formData = new FormData($(this)[0]); // 创建FormData对象
 
        $.ajax({
            url: 'your-server-upload-script.php', // 服务器上传脚本的URL
            type: 'POST',
            data: formData,
            contentType: false, // 不设置内容类型
            processData: false, // 不处理发送的数据
            success: function(response) {
                console.log('File successfully uploaded: ', response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('File upload failed: ', textStatus);
            }
        });
    });
});

在这个例子中，当用户选择文件并点击上传按钮后，表单数据不会被提交到服务器，而是通过$.ajax方法异步上传到服务器。服务器端需要有相应的处理脚本来处理上传的文件。

- 阅读更多 -

Vue element-plus 导航栏 [el-menu]

System

2024-08-15

所有,vue.js

在Vue中使用element-plus创建一个简单的导航栏可以通过<el-menu>组件实现。以下是一个基本的例子：




<template>
  <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-menu-item index="2">订单管理</el-menu-item>
    <el-menu-item index="3">配置中心</el-menu-item>
    <el-menu-item index="4">日志管理</el-menu-item>
  </el-menu>
</template>
 
<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log('选中的菜单项：', key, keyPath);
    },
  },
};
</script>

在这个例子中，我们创建了一个水平模式的导航栏，其中包含了四个菜单项。:default-active绑定用于设置默认激活的菜单项，@select用于监听菜单项的点击事件。当用户点击一个菜单项时，handleSelect方法会被调用，并输出被点击的菜单项的键和路径。

- 阅读更多 -

推荐一款创新的jQuery对话框插件：`jquery-confirm`

System

2024-08-15

所有,jquery

jquery-confirm 是一个基于 jQuery 的插件，用于创建模态对话框。以下是如何使用 jquery-confirm 创建一个简单的确认对话框的示例代码：

首先，确保在页面中引入了 jQuery 和 jquery-confirm 的 CSS 和 JavaScript 文件：




<link rel="stylesheet" href="path/to/jquery-confirm.min.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery-confirm.min.js"></script>

然后，你可以使用以下代码创建一个确认对话框：




$.confirm({
    title: '确认操作',
    content: '您确定要执行这个操作吗？',
    buttons: {
        confirm: function() {
            // 用户点击确认
            // 执行操作
            console.log('操作确认');
        },
        cancel: function() {
            // 用户点击取消
            console.log('操作取消');
        }
    }
});

这段代码会创建一个带有标题和内容的对话框，并且有确认和取消按钮供用户选择。当用户点击确认或取消时，会在控制台输出相应的日志信息。

- 阅读更多 -

速盾：jquery是用cdn快，还是保存本地快？

System

2024-08-15

所有,jquery

使用CDN（内容分发网络）加载jQuery通常更快，因为用户访问网站时，如果CDN缓存了jQuery的副本，那么这个副本就会被提供给用户，从而避免了从源站点重新下载。如果你将jQuery保存到本地服务器上，用户每次从你的服务器加载jQuery，即使该文件被缓存，这可能会稍微慢一点，因为数据需要在服务器和用户的浏览器之间跨网络传输。

因此，一般建议使用CDN链接来加载jQuery库，这样用户多数情况下会从CDN服务器加载已缓存的jQuery文件，从而加快页面加载速度。

以下是使用CDN加载jQuery的示例代码：




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

在这个例子中，我们使用了Google的CDN来加载版本3.5.1的jQuery库。你可以根据需要替换版本号以获取其他版本的jQuery。

- 阅读更多 -

使用vue3+jQuery实现滑动验证码的前端部分

System

2024-08-15

所有,jquery

在Vue 3中使用jQuery实现滑动验证码的前端部分，可以通过以下步骤完成：

创建Vue组件。
引入jQuery和jQuery插件。
在组件的mounted钩子函数中初始化滑动验证码。
绑定验证码的验证事件。

以下是一个简单的示例代码：




<template>
  <div>
    <div id="captcha"></div>
    <button @click="validate">验证</button>
  </div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import $ from 'jquery';
import 'jquery-captcha-plugin'; // 假设你有这样的插件
 
export default {
  setup() {
    const captchaInstance = ref(null);
 
    onMounted(() => {
      captchaInstance.value = $('#captcha').captcha({
        // 插件初始化配置
      });
    });
 
    const validate = () => {
      const isValid = captchaInstance.value.validate();
      alert(`验证结果: ${isValid ? '成功' : '失败'}`);
    };
 
    return {
      validate,
    };
  },
};
</script>
 
<style>
/* 添加你的样式 */
</style>

在这个例子中，我们假设有一个名为jquery-captcha-plugin的jQuery插件，它提供了创建和验证滑动验证码的功能。在Vue组件中，我们通过onMounted钩子函数在组件挂载后初始化了滑动验证码。验证按钮绑定了一个点击事件，调用validate方法来验证用户的滑动操作是否正确。

请注意，实际使用时需要根据你的jQuery滑动验证码插件的具体API来调整初始化和验证逻辑。

- 阅读更多 -