Tech Blog

2024-08-13

jQuery是一个快速、简洁的JavaScript框架，它使得HTML文档的遍历和操作、事件处理、动画和Ajax交互等变得更加简单，并且它对不同浏览器的兼容性好，使用广泛。

jQuery的主要特点：

快速获取文档元素，动态更改HTML元素、属性、CSS样式等。
事件处理，如click、hover、keypress等。
动画生成，包括自定义动画。
AJAX交互，简化了数据的获取和提交。
跨浏览器兼容性，专注于简化开发者的工作。
插件扩展开发，有丰富的插件供选择。
支持链式操作，即可以连续操作同一元素。
内置的JavaScript和DOM操作的优化。

jQuery的使用：

引入jQuery库，可以是本地文件或CDN链接。




<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

使用jQuery语法操作元素。




// 隐藏一个元素
$('#myElement').hide();
 
// 改变元素的文本
$('#myElement').text('新文本');
 
// 绑定点击事件
$('#myElement').click(function() {
  alert('元素被点击了！');
});
 
// AJAX请求
$.ajax({
  url: 'your-api-endpoint',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error(error);
  }
});

以上是jQuery的基本介绍和使用示例，实际应用中可以根据需要选择合适的方法和属性。

jQury基本知识

2024-08-13

jQuery是一个快速、简洁的JavaScript框架，它使得HTML文档的遍历和操作、事件处理、动画和Ajax等操作更加简单和易于使用。

选择器：jQuery的选择器可用于选取HTML元素，类似CSS选择器。




$("p") // 选取所有的p元素
$(".class") // 选取所有class为class的元素
$("#id") // 选取id为id的元素
$("ancestor descendant") // 选取ancestor元素里的所有descendant元素
$("parent > child") // 选取parent元素的所有child直接子元素
$("prev + next") // 选取紧跟prev元素的next元素
$("prev ~ siblings") // 选取prev元素之后的所有siblings元素

事件：jQuery提供了一套丰富的事件处理方法。




$("button").click(function(){
    // 当按钮被点击时执行的代码
});

样式：可以使用jQuery动态地修改CSS样式。




$("p").css("color", "red"); // 将所有p元素的文字颜色改为红色

内容：可以使用jQuery动态地修改HTML内容。




$("p").html("Hello, World!"); // 将所有p元素的内容改为Hello, World!

属性：可以使用jQuery动态地修改HTML属性。




$("img").attr("src", "image.jpg"); // 将所有img元素的src属性改为image.jpg

动画：jQuery提供了一系列的动画方法，可以实现元素的淡入淡出等效果。




$("p").hide(); // 将所有p元素隐藏
$("p").show(); // 将所有p元素显示
$("p").fadeIn(); // 将所有p元素淡入
$("p").fadeOut(); // 将所有p元素淡出

AJAX：jQuery提供了$.ajax()方法，可以方便地进行异步请求。




$.ajax({
    url: "test.html", // 请求的URL
    method: "GET", // 请求方法
    success: function(data){ // 请求成功后的回调函数
        // 处理返回的数据
    }
});

链式调用：jQuery允许你在一个选择器上连续调用多个方法。




$("p").css("color", "red").hide(); // 将p元素文字颜色改为红色后隐藏

jQuery对象和DOM对象转换：jQuery对象是通过jQuery包装DOM对象后产生的对象，可以通过.get()方法或者数组下标的方式转换回DOM对象。




var domObj = $("p").get(0); // 转换为DOM对象
var domObj = $("p")[0]; // 转换为DOM对象

jQuery版本兼容：jQuery兼容各种浏览器，包括IE6及以上。

以上是jQuery的一些基本知识，实际使用中还可以结合JavaScript进行更复杂的操作。

【教程】HTML用Jquery为pre标签代码块增加复制代码功能

2024-08-13




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Code Copy Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            // 为每个pre标签添加复制按钮
            $('pre').wrap('<div class="code-container"></div>');
            $('.code-container').append('<button class="copy-code-btn">复制代码</button>');
 
            // 点击按钮时复制代码文本到剪贴板
            $('.copy-code-btn').click(function(){
                var $pre = $(this).parent().find('pre');
                var codeText = $pre.text().trim(); // 获取代码文本并去除首尾空格
                navigator.clipboard.writeText(codeText).then(function() {
                    console.log('代码复制成功！');
                }).catch(function(error) {
                    console.error('复制代码失败', error);
                });
            });
        });
    </script>
    <style>
        .code-container {
            position: relative;
            overflow: hidden; /* 确保按钮在代码外部 */
        }
        .copy-code-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 10;
            background: #fff;
            border: 1px solid #ccc;
            padding: 5px;
            cursor: pointer;
            user-select: none; /* 防止按钮文本被选中 */
        }
    </style>
</head>
<body>
    <pre>
        // 这是一段示例代码
        console.log('Hello, world!');
    </pre>
</body>
</html>

这段代码使用jQuery为页面上的<pre>代码块添加了一个复制按钮，点击按钮时会把代码块的内容复制到用户的剪贴板中。这是一个简单的实现，但不考虑兼容性和错误处理。在实际应用中，你可能需要添加更多的错误处理和兼容性代码。

Jquery实现前端窗口得全屏/退出全屏得切换

2024-08-13

在现代浏览器中，可以使用全屏 API 来实现全屏模式的切换。以下是使用 jQuery 结合全屏 API 实现全屏切换的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏切换示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#toggleFullScreen').click(function() {
        if (!document.fullscreenElement) {
            // 进入全屏
            document.documentElement.requestFullscreen();
        } else {
            // 退出全屏
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
        }
    });
});
</script>
</head>
<body>
<button id="toggleFullScreen">切换全屏</button>
</body>
</html>

这段代码中，我们定义了一个按钮，当用户点击这个按钮时，会触发全屏模式的切换。通过检查 document.fullscreenElement 来判断当前是否已经是全屏状态，然后使用 requestFullscreen() 方法进入全屏，或者 exitFullscreen 方法退出全屏。

探索jQuery Flowchart：构建直观流程图的利器

2024-08-13




<!DOCTYPE html>
<html>
<head>
    <title>jQuery Flowchart 示例</title>
    <link rel="stylesheet" type="text/css" href="jquery.flowchart.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.flowchart.min.js"></script>
</head>
<body>
    <div id="flowchart-placeholder"></div>
    <script type="text/javascript">
        $(function() {
            var data = {
                "nodes": {
                    "start": {
                        "type": "start",
                        "id": "start",
                        "x": 390,
                        "y": 175,
                        "width": 32,
                        "height": 32
                    },
                    "end": {
                        "type": "end",
                        "id": "end",
                        "x": 390,
                        "y": 400,
                        "width": 32,
                        "height": 32
                    },
                    "condition": {
                        "type": "condition",
                        "id": "condition",
                        "x": 390,
                        "y": 275,
                        "width": 50,
                        "height": 50,
                        "properties": {
                            "decision": "Do you like it?"
                        }
                    }
                },
                "edges": {
                    "start_to_condition": {
                        "id": "start_to_condition",
                        "type": "smoothstep",
                        "source": "start",
                        "target": "condition"
                    },
                    "yes_to_end": {
                        "id": "yes_to_end",
                        "type": "smoothstep",
                        "source": "condition",
                        "target": "end",
                        "properties": {
                            "answer": "Yes"
                        }
                    },
                    "no_to_end": {
                        "id": "no_to_end",

探秘jQuery-i18n-properties：轻松实现Web应用国际化

2024-08-13




// 引入jQuery和jQuery i18n properties插件
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.i18n.properties.min.js"></script>
 
// 在页面加载完成后初始化国际化
$(document).ready(function() {
    // 设置基础名称和默认语言
    $.i18n.properties({
        name: 'Messages', // 不带.properties后缀的资源文件基础名
        path: 'path/to/language/', // 资源文件所在目录的路径
        mode: 'map', // 使用map模式，即所有资源键值对形式加载
        language: navigator.language, // 自动检测浏览器语言设置
        cache: false, // 禁用缓存，确保每次加载最新的语言资源
        callback: function() { // 加载完成后的回调函数
            // 使用i18n键来渲染页面
            $('#greeting').text($.i18n.prop('greeting'));
            $('#farewell').text($.i18n.prop('farewell'));
        }
    });
});

在这个例子中，我们首先引入了jQuery和jQuery i18n properties插件。在页面加载完成后，我们使用$.i18n.properties函数来初始化国际化资源的加载。我们设置了资源文件的基础名和路径，并指定了使用map模式加载资源，以便可以直接通过键名访问对应的值。我们还根据浏览器的语言设置自动选择语言，并禁用了缓存以确保能加载到最新的语言文件。最后，在回调函数中，我们使用从资源文件中解析出来的键值来更新页面元素的内容。这样，我们就实现了Web应用的国际化需求。

ajax实现增删查改

2024-08-13

所有,ajax

使用AJAX实现增删查改通常涉及到前端JavaScript和后端服务器的交互。以下是一个简单的示例，使用JavaScript的XMLHttpRequest对象与后端API进行交互。

后端API需要支持CRUD操作，例如：

创建（Create）: /items/create
读取（Read）: /items/get?id=xxx
更新（Update）: /items/update?id=xxx
删除（Delete）: /items/delete?id=xxx

前端JavaScript代码示例：




function ajaxGet(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send();
}
 
function ajaxPost(url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send(data);
}
 
function ajaxPut(url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("PUT", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send(data);
}
 
function ajaxDelete(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("DELETE", url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send();
}
 
// 使用示例
var createUrl = "/items/create";
var readUrl = "/items/get?id=1";
var updateUrl = "/items/update?id=1";
var deleteUrl = "/items/delete?id=1";
 
// 创建项目
ajaxPost(createUrl, "name=NewItem", function(response) {
  console.log("Create response:", response);
});
 
// 读取项目
ajaxGet(readUrl, function(response) {
  console.log("Read response:", response);
});
 
// 更新项目
ajaxPut(updateUrl, "name=UpdatedItem"

基于javaweb+jquery+axios前后端分离实现增删改查

2024-08-13

前后端分离的增删改查示例代码：

后端（Java Web）:




// 假设使用Spring Boot框架
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;
 
@RestController
@RequestMapping("/api/items")
public class ItemController {
 
    // 查询所有
    @GetMapping
    public Map<String, Object> queryAll() {
        // 实现查询逻辑...
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("message", "success");
        result.put("data", items); // items为查询到的数据列表
        return result;
    }
 
    // 查询单个
    @GetMapping("/{id}")
    public Map<String, Object> queryById(@PathVariable("id") Long id) {
        // 实现查询逻辑...
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("message", "success");
        result.put("data", item); // item为查询到的数据
        return result;
    }
 
    // 添加
    @PostMapping
    public Map<String, Object> add(@RequestBody Item item) {
        // 实现添加逻辑...
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("message", "success");
        return result;
    }
 
    // 修改
    @PutMapping("/{id}")
    public Map<String, Object> update(@PathVariable("id") Long id, @RequestBody Item item) {
        // 实现更新逻辑...
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("message", "success");
        return result;
    }
 
    // 删除
    @DeleteMapping("/{id}")
    public Map<String, Object> delete(@PathVariable("id") Long id) {
        // 实现删除逻辑...
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("message", "success");
        return result;
    }
}

前端（HTML + jQuery + Axios）:




<!-- 引入axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
<script>
$(document).ready(function() {
    // 查询所有
    axios.get('/api/items')
    .then(response => {
        // 处理响应数据
    })
    .catch(error => {
        // 处理错误
    });
 
    // 查询单个
    axios.get('/api/items/1')
    .then(response => {
        // 处理响应数据
    })
    .catch(error => {
        // 处理错误
    });
 
    // 添加
    axios.post('/api/items', itemData)
    .then(response => {
        // 处理响应数据
    })
    .catch(error => {
        // 处理错误
    });
 
    // 修改
    axios.put('/api/items/1', i

html+css+Jquery 实现文本域文字数量限制、根据输入字数自适应高度

2024-08-13

以下是实现文本域字数限制和高度自适应的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textarea Limit Example</title>
<style>
  #myTextarea {
    width: 300px;
    min-height: 50px;
    max-height: 200px;
    height: auto;
    overflow-y: hidden;
    resize: none;
  }
</style>
</head>
<body>
 
<textarea id="myTextarea" maxlength="250" placeholder="Enter text here..."></textarea>
<div id="charCount">0/250</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  var $textarea = $('#myTextarea');
  var $charCount = $('#charCount');
 
  $textarea.on('input', function() {
    var maxLength = $textarea.attr('maxlength');
    var currentLength = $textarea.val().length;
    var charCount = maxLength - currentLength;
 
    $charCount.text(currentLength + '/' + maxLength);
 
    // Auto-grow the textarea
    $textarea.css('height', 'auto').height($textarea[0].scrollHeight);
  }).trigger('input'); // Trigger the input event to initialize the textarea height
});
</script>
 
</body>
</html>

CSS:




#myTextarea {
  width: 300px;
  min-height: 50px;
  max-height: 200px;
  height: auto;
  overflow-y: hidden;
  resize: none;
}

jQuery:




$(document).ready(function() {
  var $textarea = $('#myTextarea');
  var $charCount = $('#charCount');
 
  $textarea.on('input', function() {
    var maxLength = $textarea.attr('maxlength');
    var currentLength = $textarea.val().length;
    var charCount = maxLength - currentLength;
 
    $charCount.text(currentLength + '/' + maxLength);
 
    // Auto-grow the textarea
    $textarea.css('height', 'auto').height($textarea[0].scrollHeight);
  }).trigger('input'); // Trigger the input event to initialize the textarea height
});

这段代码实现了以下功能：

文本域 #myTextarea 具有最大字符数限制（通过 maxlength 属性设置）。
在文本域下方有一个计数器 #charCount 显示当前字数和最大字数。
通过jQuery监听 input 事件以更新计数器和文本域的高度。
文本域高度会根据输入内容自动增长，直至达到 max-height。
使用了 .trigger('input') 来在文档准备就绪时立即处理一次输入事件，以便正确设置初始高度。

Jquery将表单数据转JSON数据

2024-08-13

要使用jQuery将表单数据转换为JSON，可以使用serializeArray()方法获取表单元素的值，然后使用$.param()将其转换为查询字符串格式，最后使用JSON.parse()将其转换为JSON对象。以下是一个示例代码：




<form id="myForm">
  <input type="text" name="name" value="John Doe">
  <input type="email" name="email" value="john@example.com">
  <input type="submit">
</form>




$(document).ready(function() {
  $('form').on('submit', function(e) {
    e.preventDefault(); // 阻止表单提交
    var formData = $(this).serializeArray(); // 序列化表单数据为数组
    var jsonFormData = {};
    $.each(formData, function() {
      jsonFormData[this.name] = this.value;
    });
    console.log(jsonFormData); // 输出JSON对象
  });
});

在上面的代码中，当表单被提交时，我们阻止了它的默认行为，获取表单数据，然后遍历数据，将其转换为一个对象，最后在控制台中打印出JSON对象。