Tech Blog

2024-08-15




$(document).ready(function() {
    var currentPage = 1; // 当前页面
    var pageSize = 10; // 每页显示数量
    var totalRecords = 0; // 总记录数
    var totalPages = 0; // 总页数
 
    // 获取数据
    function fetch_data(page) {
        $.ajax({
            url: "server.php", // 服务器端脚本
            method: "GET", // 请求方法
            data: { page: page, size: pageSize }, // 发送到服务器的数据
            dataType: "json", // 服务器响应的数据类型
            success: function(response) {
                // 更新页面上的数据
                $('#data-table tbody').empty();
                var tr;
                for (var i = 0; i < response.data.length; i++) {
                    tr = $('<tr/>');
                    tr.append($('<td/>', { html: response.data[i].id }));
                    tr.append($('<td/>', { html: response.data[i].name }));
                    $('#data-table tbody').append(tr);
                }
 
                // 更新分页信息
                totalRecords = response.totalRecords;
                totalPages = Math.ceil(totalRecords / pageSize);
                buildPagination(page);
            }
        });
    }
 
    // 构建分页
    function buildPagination(currentPage) {
        var pagination = $('#pagination');
        pagination.empty();
 
        // 构建上一页按钮
        if (currentPage > 1) {
            pagination.append($('<li/>').append($('<a/>', {
                href: 'javascript:void(0);',
                text: 'Prev',
                click: function() {
                    fetch_data(currentPage - 1);
                }
            })));
        }
 
        // 构建页码
        for (var i = 1; i <= totalPages; i++) {
            pagination.append($('<li/>').append($('<a/>', {
                href: 'javascript:void(0);',
                text: i,
                class: (i === currentPage) ? 'active' : '',
                click: function() {
                    fetch_data(i);
                }
            })));
        }
 
        // 构建下一页按钮
        if (currentPage < totalPages) {
            pagination.append($('<li/>').append($('<a/>', {
                href: 'javascript:void(0);',
                text: 'Next',
                click: function() {
                    fetch_data(currentPage + 1);
                }
            })));
        }
    }
 
    // 初始加载第一页数据
    fetch_data(currentPage);
 
    // 监听页码点击事件
    $(document).on('click', '#pagination li a', function(event) {
        var clickedPage

- 阅读更多 -

Js实现深拷贝的4种方式

System

2024-08-15

所有,jquery

JavaScript实现深拷贝的方法有很多种，以下是四种常见的方法：

使用JSON.parse和JSON.stringify：




function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

递归拷贝：




function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
 
    if (obj instanceof Date) {
        return new Date(obj.getTime());
    }
 
    if (obj instanceof Array) {
        return obj.reduce((arr, item, i) => {
            arr[i] = deepClone(item);
            return arr;
        }, []);
    }
 
    if (obj instanceof Object) {
        return Object.keys(obj).reduce((newObj, key) => {
            newObj[key] = deepClone(obj[key]);
            return newObj;
        }, {});
    }
}

使用lodash的cloneDeep方法：




const _ = require('lodash');
const clone = _.cloneDeep(value);

使用MessageChannel：




function deepClone(obj) {
    const { port1, port2 } = new MessageChannel();
    port1.postMessage(obj);
    return port2.getMessage();
}

这四种方法各有优缺点，选择哪种方法取决于具体的应用场景和需求。

- 阅读更多 -

HTML网页中导入jquery并执行代码

System

2024-08-15

所有,jquery

要在HTML页面中导入jQuery并执行代码，你需要首先在HTML文件的<head>部分或者<body>部分结束前通过<script>标签导入jQuery库。接着，你可以在另一个<script>标签中编写你的jQuery代码。

以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 导入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
    <!-- 你的页面内容 -->
 
    <script>
        // 使用jQuery编写的代码
        $(document).ready(function(){
            // 当DOM完全加载完成后执行的代码
            $('body').append('<p>jQuery 代码已执行。</p>');
        });
    </script>
</body>
</html>

在这个例子中，我们通过一个在线CDN链接导入了jQuery库。当DOM完全加载后，我们向<body>元素追加了一个新的段落，说明jQuery代码已经执行。确保你的网络连接可以访问上述的jQuery CDN链接，否则导入可能失败。

- 阅读更多 -

web开发软件，jquery模态窗口

System

2024-08-15

所有,jquery

在Web开发中，我们可以使用各种库和插件来创建模态窗口，其中jQuery是一种非常流行的库。以下是一个使用jQuery创建模态窗口的简单示例：

HTML部分：




<!-- 背景遮罩 -->
<div id="overlay"></div>
<!-- 模态窗口 -->
<div id="modal" style="display: none;">
  <p>这是一个模态窗口</p>
  <button id="close-modal">关闭</button>
</div>

CSS部分：




#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}
 
#modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}

jQuery部分：




$(document).ready(function() {
  // 打开模态窗口
  $('#open-modal').click(function() {
    $('#overlay').fadeIn();
    $('#modal').fadeIn();
  });
 
  // 关闭模态窗口
  $('#close-modal').click(function() {
    $('#overlay').fadeOut();
    $('#modal').fadeOut();
  });
});

这个示例中，我们有一个按钮用来打开模态窗口，模态窗口内有一个按钮用来关闭它。背景遮罩在模态窗口打开时显示，并且当用户点击关闭按钮时，遮罩和模态窗口都会消失。这是一个非常基础的模态窗口实现，你可以根据需要添加更多功能。

System

2024-08-15

所有,jquery

在Angular项目中使用jQuery以及依赖jQuery的第三方插件并不是一个推荐的实践，因为Angular有自己的数据绑定和DOM操作机制，这和jQuery的直接操作方式有所不同。Angular鼓励我们使用Angular的方法来处理这些问题。

然而，如果你有一个现有的项目需要使用某些jQuery插件，并且你决定还是要在Angular项目中使用jQuery，你可以按照以下步骤操作：

安装jQuery：




npm install jquery --save

在你的Angular组件中引入jQuery：




import * as $ from 'jquery';

在ngAfterViewInit生命周期钩子中初始化jQuery插件，确保DOM已经被渲染：




import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 
@Component({
  selector: 'app-example',
  template: `<div #jqueryElement>Content</div>`
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild('jqueryElement') jqueryElement: ElementRef;
 
  ngAfterViewInit(): void {
    // 确保jQuery插件只在视图初始化后应用于DOM元素
    $(this.jqueryElement.nativeElement).someJqueryPlugin();
  }
}

请注意，这种方法应该只在你无法使用纯Angular方式实现第三方插件的情况下使用。如果可能的话，尽量避免在Angular项目中使用jQuery和第三方jQuery插件，因为这会带来性能问题和可能的维护困难。

- 阅读更多 -

jquery之checkbox全选反选提交参数

System

2024-08-15

所有,jquery

以下是一个使用jQuery实现checkbox全选、反选并且在提交时附加额外参数的示例代码：

HTML部分：




<form id="myForm">
    <input type="checkbox" class="selectAll"> 全选<br>
    <input type="checkbox" name="items" value="1"> Item 1<br>
    <input type="checkbox" name="items" value="2"> Item 2<br>
    <input type="checkbox" name="items" value="3"> Item 3<br>
    <input type="submit" value="提交">
</form>

jQuery部分：




$(document).ready(function() {
    // 全选反选功能
    $('.selectAll').click(function() {
        $('input[name="items"]').prop('checked', this.checked);
    });
 
    // 提交表单时附加参数
    $('#myForm').submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交
 
        var formData = $(this).serialize(); // 序列化表单数据
        formData += '&additionalParam=value'; // 附加额外参数
 
        // 使用AJAX提交表单
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: formData,
            success: function(response) {
                // 处理响应
                console.log(response);
            },
            error: function() {
                // 处理错误
                console.log('Error submitting the form');
            }
        });
    });
});

在这个示例中，当用户点击“全选”复选框时，所有的商品选择框会相应地被全选或全不选。在表单提交时，我们通过serialize方法获取表单数据并附加额外的参数，然后通过AJAX方法异步提交数据到服务器。这样可以避免页面刷新，并允许你在提交时添加额外的参数。

- 阅读更多 -

jQuery 参考指南

System

2024-08-15

所有,jquery

以下是一个简化的jQuery代码示例，它展示了如何使用jQuery来动态更新HTML内容：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 当按钮被点击时，更新p元素的内容
            $('#myButton').click(function() {
                $('#myParagraph').text('这是更新后的文本内容。');
            });
        });
    </script>
</head>
<body>
 
<p id="myParagraph">这是一个段落。</p>
<button id="myButton">点击我更新段落文本</button>
 
</body>
</html>

这段代码在用户点击按钮后，会将id为myParagraph的<p>标签的文本内容更新为"这是更新后的文本内容。"。这是jQuery中一个非常基础且常用的操作，展示了如何利用选择器和事件处理器来进行DOM操作。

- 阅读更多 -

Jquery.dataTable表格控件源代码重点难点分析

System

2024-08-15

所有,jquery




// 假设我们已经有了一个基本的DataTable实例，并且我们想要添加一个自定义的过滤器来筛选数据。
 
// 定义一个函数，用于筛选数据
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
    // 获取过滤条件
    var min = parseInt($('#min').val(), 10);
    var max = parseInt($('#max').val(), 10);
    var age = parseFloat(data[3]) || 0; // 假设年龄在第4列
 
    if (age > min && age < max) {
        return true;
    }
    return false;
});
 
// 当输入字段变化时，触发DataTable的搜索
$('#min, #max').on('keyup', function() {
    table.draw();
});
 
// 注意：这里的'#min'和'#max'是假设的输入框ID，用于输入年龄的最小值和最大值。
// 数据的索引是基于0的，所以data[3]表示我们假设的第4列，即年龄列。

这个代码示例展示了如何在DataTable中添加一个自定义的过滤器，以便根据用户在输入框中输入的最小和最大年龄值来过滤表中的数据。当输入字段变化时，使用table.draw()方法重绘表格，应用新的过滤条件。这是一个很好的教学示例，展示了如何利用DataTable插件的扩展性来增强表格功能。

- 阅读更多 -

探索jQuery的精彩日历插件：Verbose Calendar

System

2024-08-15

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Verbose Calendar Example</title>
    <link rel="stylesheet" href="path/to/verbose-calendar.min.css">
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/verbose-calendar.min.js"></script>
</head>
<body>
    <div id="calendar"></div>
    <script>
        $(document).ready(function() {
            $('#calendar').verboseCalendar({
                eventData: [
                    {
                        "className": "event-important",
                        "date": "2023-04-01",
                        "title": "重要事件"
                    },
                    {
                        "date": "2023-04-15",
                        "title": "普通事件"
                    }
                ]
            });
        });
    </script>
</body>
</html>

这个HTML文件包含了Verbose Calendar插件的基本用法。在<head>标签中，我们包含了Verbose Calendar的CSS样式表和jQuery库。在<body>标签中，我们定义了一个用于显示日历的<div>，并在文档加载完成时初始化了日历插件，指定了一些事件数据。这个例子展示了如何将Verbose Calendar插件集成到一个简单的网页中，并添加了几个事件。

- 阅读更多 -

jQueryMobile Web 开发基础知识

System

2024-08-15

所有,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="#about" data-role="button" data-theme="b" data-transition="slide">关于我们</a>
    </div>
    <div data-role="footer">
        <h4>页脚信息</h4>
    </div>
</div>
 
<div data-role="page" id="about">
    <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-transition="slide"来设置滑动过渡效果。这个示例简单明了，适合作为学习jQuery Mobile的起点。

- 阅读更多 -