Tech Blog

2024-08-25

下面是一个简单的实现 H5 和 jQuery 实现滚动加载下一页和瀑布流布局的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Infinite Scroll and Masonry Layout</title>
<style>
  .grid-item {
    break-inside: avoid;
    padding: 10px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .grid-sizer {
    width: 32%;
  }
  .item-content {
    height: 100px;
    background-color: #f3f3f3;
    border-radius: 4px;
    text-align: center;
    line-height: 100px;
  }
</style>
</head>
<body>
 
<div id="content">
  <!-- Items will be added here -->
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
  $(document).ready(function() {
    var $container = $('#content');
    var page = 1;
    var hasMore = true;
 
    // Initialize Masonry after all images have loaded
    $container.imagesLoaded(function() {
      $container.masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer'
      });
    });
 
    // Infinite scroll
    $container.infinitescroll({
      navSelector: '#page-nav', // selector for the paged navigation
      nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)
      itemSelector: '.grid-item', // selector for all items you'll retrieve
      pixelsFromNavToBottom: 50,
      bufferPixels: 500,
      errorCallback: function() {
        hasMore = false;
      }
    },
    // Callback that handles new items
    function(newItems) {
      var $newItems = $(newItems).css({ opacity: 0 });
      $newItems.imagesLoaded(function() {
        // Appends new items to the container
        $newItems.appendTo($container);
        // Animates new items
        $newItems.animate({ opacity: 1 });
        // Layout Masonry after new items are appended
        $container.masonry('appended', $newItems);
 
        page++;
        if (!hasMore) {
          $('#page-nav').remove(); // Disable infinitescroll if there's no more pages
        }
      });
    });
 
    // Replace 'url-to-your-api' with your server-side script
    function fetchNewItems(page) {
      $.ajax({
        url: 'url-to-your-api?page=' + page,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          var html = '';
          $.each(data.items, function(index, item) {

- 阅读更多 -

jQuery分页

System

2024-08-25

所有,jquery

要实现jQuery分页，你可以使用一些流行的插件，例如pagination。以下是一个简单的例子，使用pagination插件实现分页功能：

首先，确保你的页面中引入了jQuery和pagination插件的JS文件。




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-pagination/2.2.2/jquery.pagination.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-pagination/2.2.2/jquery.pagination.min.css" />

接下来，在HTML中添加分页的容器：




<div id="pagination"></div>

最后，使用jQuery初始化pagination插件：




$(function() {
    var items = 100; // 假设总共有100项
    var itemsOnPage = 10; // 每页显示10项
    var pages = Math.ceil(items / itemsOnPage); // 计算总页数
 
    $('#pagination').pagination({
        items: items,
        itemsOnPage: itemsOnPage,
        cssStyle: 'light-theme',
        onPageClick: function(pageNumber) { // 页面点击事件
            // 在这里处理页面的数据加载，例如通过AJAX获取数据
            console.log('Page ' + pageNumber + ' selected!');
        }
    });
});

这个例子中，我们假设有100项数据，每页显示10项。插件会自动生成页码，并在用户点击页码时触发onPageClick事件。在这个事件处理函数中，你可以实现数据的加载逻辑。

请注意，这只是一个简单的示例。在实际应用中，你可能需要根据你的具体需求来调整分页逻辑和数据加载方式。

- 阅读更多 -

jquery通过Ajax请求api接口

System

2024-08-25

所有,jquery

在jQuery中，可以使用$.ajax()方法来发送请求到API接口。以下是一个简单的例子，展示了如何使用jQuery的Ajax方法来发送GET请求到一个API接口，并处理响应数据：




$.ajax({
    url: 'https://api.example.com/data', // 替换为你的API接口URL
    type: 'GET', // 请求类型，根据API文档可能需要'POST', 'PUT', 'DELETE'等
    dataType: 'json', // 期望从服务器返回的数据类型
    success: function(response) {
        // 请求成功时的回调函数
        // response 是从服务器返回的数据
        console.log('Success:', response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error('Error:', error);
    }
});

确保替换url属性为你要请求的API接口的实际URL。如果API需要传递参数，可以将它们添加到data属性中；如果需要发送数据，可以设置contentType和data属性来定义发送的内容类型和数据。

对于POST请求，可能还需要设置processData和contentType属性，并且可能需要在headers属性中设置认证令牌等：




$.ajax({
    url: 'https://api.example.com/data',
    type: 'POST',
    data: { key: 'value' }, // 发送到服务器的数据
    processData: false, // 不处理发送的数据，因为数据已经是序列化的形式
    contentType: 'application/json', // 发送信息至服务器时内容编码类型
    headers: {
        'Authorization': 'Bearer YOUR_TOKEN' // 如果需要的话，添加认证头部
    },
    success: function(response) {
        // 成功处理逻辑
    },
    error: function(xhr, status, error) {
        // 错误处理逻辑
    }
});

请确保你的API请求遵循任何API文档中提到的安全要求，比如认证方法和数据加密。

- 阅读更多 -

jQuery：将字符串转换为数组

System

2024-08-25

所有,jquery

在jQuery中，你可以使用$.map()函数将字符串转换为数组。这里是一个例子：




var str = "a,b,c,d,e";
var arr = $.map(str.split(','), function(value) {
    return value.trim(); // 使用trim()移除可能的空白字符
});
 
console.log(arr); // ["a", "b", "c", "d", "e"]

在这个例子中，我们首先使用split()方法将字符串分割成数组，然后使用$.map()遍历数组的每个元素，并使用一个函数来处理每个元素（在这个例子中是去除空白）。最终得到的arr就是处理过的数组。

- 阅读更多 -

jQuery 游戏开发基础

System

2024-08-25

所有,jquery




// 引入jQuery库
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
// 在HTML中添加canvas元素
<canvas id="gameCanvas" width="480" height="320" style="background-color: #000000;"></canvas>
 
// 初始化游戏
$(document).ready(function() {
    var canvas = $('#gameCanvas');
    var context = canvas.get(0).getContext('2d');
 
    // 游戏主循环
    function gameLoop() {
        // 清除画布
        context.clearRect(0, 0, canvas.width(), canvas.height());
 
        // 绘制游戏内容
        // 例如: 绘制一个红色的正方形
        context.fillStyle = '#FF0000'; // 设置填充颜色为红色
        context.fillRect(50, 50, 100, 100); // 绘制一个正方形
 
        // 继续请求下一个帧
        requestAnimationFrame(gameLoop);
    }
 
    // 开始游戏
    gameLoop();
});

这段代码展示了如何使用jQuery和HTML canvas元素来创建一个简单的游戏循环。它首先引入了jQuery库，并在文档加载完成后初始化游戏循环。游戏循环会在每一帧清除画布并绘制一个红色的正方形。这是一个基础示例，可以在此基础上进一步添加游戏逻辑。

- 阅读更多 -

jQuery weui 时间选择器datetimepicker只用年月日

System

2024-08-25

所有,jquery

要在jQuery WeUI的日期时间选择器（datetimepicker）中只使用年月日，你需要设置format选项为YYYY-MM-DD，并且确保startView至少是2（即月视图），以确保只能选择日期而不是时间。

以下是实现这一功能的示例代码：




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery WeUI Date Picker Example</title>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
</head>
<body>
 
<input id="datepicker" class="weui-input" type="text" value="">
 
<script>
$(function() {
    $('#datepicker').datetimePicker({
        title: '选择日期',
        format: 'YYYY-MM-DD',
        startView: 2,
        minView: 2,
        onSelect: function(date) {
            console.log('Selected Date: ' + date);
        }
    });
});
</script>
 
</body>
</html>

在这个例子中，datetimePicker被初始化为只允许选择年月日，并且在用户选择日期后，会在控制台打印出选择的日期。请确保你的页面中已经正确引入了jQuery WeUI的CSS和JS文件。

- 阅读更多 -

jQuery核心函数和静态方法，资料大全

System

2024-08-25

所有,jquery

jQuery是JavaScript的一个库，提供了许多便捷的方法来操作HTML文档、处理事件、动画和Ajax交互。以下是一些jQuery的核心函数和静态方法的简单介绍和使用示例：

$(): 这是jQuery的核心函数，用于创建jQuery对象。




$(selector).action();

例如:




$('#myId').hide(); // 隐藏ID为'myId'的元素
$('.myClass').show(); // 显示class为'myClass'的元素

$.ajax(): 这是一个静态方法，用于执行异步HTTP请求。




$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
    $(this).addClass("done");
});

$.trim(): 这是一个静态方法，用于去除字符串两端的空白字符。




var str = "  Hello, World!  ";
var trimmedStr = $.trim(str);

$.each(): 这是一个静态方法，用于遍历数组或者对象。




$.each([52, 97], function(index, value) {
    alert(index + ": " + value);
});

$.get() 和 $.post(): 这两个静态方法用于发起GET或POST请求。




$.get("test.php", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
});
 
$.post("test.php", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
});

$.noConflict(): 这是一个静态方法，用于释放jQuery对$的控制权，以防止与其他库的冲突。




jQuery.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 未被覆盖!");
  });
});

这些都是jQuery的核心功能，每个方法都有其特定的用途，可以根据需要进行选用。

System

2024-08-25

所有,jquery

由于提供的系统代码较为复杂且完整，以下是一个简化版本的核心功能代码示例，展示了如何使用JSP、Servlet和JDBC来实现图书借阅管理系统的查询功能。




// BookBorrowingServlet.java
@WebServlet("/book/borrow")
public class BookBorrowingServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String bookId = request.getParameter("bookId");
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
 
        try {
            conn = DatabaseConnection.getConnection();
            String sql = "SELECT * FROM books WHERE id = ?";
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, bookId);
            rs = pstmt.executeQuery();
 
            if (rs.next()) {
                // 设置请求属性，以便在JSP中使用
                request.setAttribute("book", new Book(rs.getInt("id"), rs.getString("title"), rs.getString("author")));
                // 请求转发到显示书籍详情的JSP页面
                request.getRequestDispatcher("/bookDetails.jsp").forward(request, response);
            } else {
                // 书籍未找到，设置错误消息并重定向到错误处理页面
                request.setAttribute("errorMessage", "书籍未找到！");
                request.getRequestDispatcher("/error.jsp").forward(request, response);
            }
        } catch (SQLException | ClassNotFoundException e) {
            e.printStackTrace();
            // 数据库操作失败，设置错误消息并重定向到错误处理页面
            request.setAttribute("errorMessage", "数据库操作失败！");
            request.getRequestDispatcher("/error.jsp").forward(request, response);
        } finally {
            DatabaseConnection.closeResources(conn, pstmt, rs);
        }
    }
}
 
// DatabaseConnection.java
public class DatabaseConnection {
    private static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";
    private static final String DATABASE_URL = "jdbc:mysql://localhost:3306/library_system";
    private static final String DATABASE_USER = "root";
    private static final String DATABASE_PASSWORD = "password";
 
    public static Connection getConnection() throws SQLException, ClassNotFoundException {
        Class.forName(JDBC_DRIVER);
        return DriverManager.getConnection(DATABASE_URL, DATABASE_USER, DATABASE_PASSWORD);
    }
 
    public static void closeResources(Connection conn, PreparedStatement pstmt, ResultSet rs) {
        t

- 阅读更多 -

JQuery操作DOM

System

2024-08-25

所有,jquery

在JQuery中，我们可以使用各种方法来操作DOM元素。以下是一些常用的JQuery操作DOM的方法：

查询和修改元素的文本内容：




// 获取元素的文本内容
var text = $('#element').text();
 
// 设置元素的文本内容
$('#element').text('新的文本内容');

查询和修改元素的HTML内容：




// 获取元素的HTML内容
var html = $('#element').html();
 
// 设置元素的HTML内容
$('#element').html('<strong>新的HTML内容</strong>');

查询和修改元素的属性：




// 获取元素的属性值
var attrValue = $('#element').attr('属性名');
 
// 设置元素的属性值
$('#element').attr('属性名', '新的属性值');

查询和修改元素的CSS样式：




// 获取元素的CSS样式
var cssValue = $('#element').css('属性名');
 
// 设置元素的CSS样式
$('#element').css('属性名', '新的样式值');

创建、插入和删除元素：




// 创建一个新元素
var newElement = $('<div>新的div元素</div>');
 
// 将新元素插入到DOM中
$('#element').append(newElement);
 
// 删除元素
$('#element').remove();

监听事件并作出响应：




// 为元素添加点击事件处理程序
$('#element').click(function() {
    alert('元素被点击了！');
});

这些是JQuery操作DOM的基本方法，可以根据需要进行组合和嵌套以完成更复杂的操作。

- 阅读更多 -

jquery的blockUI遮罩层的使用

System

2024-08-25

所有,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方法显示遮罩层
    $('#myButton').click(function() {
        $.blockUI({ 
            message: '<h1>正在处理...</h1>', 
            css: { 
                border: 'none', 
                padding: '15px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .5, 
                color: '#fff' 
            } 
        });
 
        // 模拟一个异步操作，比如Ajax请求
        setTimeout(function() {
            // 异步操作完成后，取消遮罩层
            $.unblockUI();
        }, 2000); // 假设异步操作耗时2秒
    });
});

这段代码展示了如何在点击按钮后使用jQuery的blockUI方法来显示一个自定义的遮罩层，并在2秒后取消遮罩层。这是实现简单的页面加载等待效果的一个基础例子。

- 阅读更多 -