标签 jquery 下的文章

2024-08-17




$(document).ready(function() {
    // 表单提交事件
    $('form').on('submit', function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
 
        // 清除之前的错误提示
        $('.form-group').removeClass('has-error');
        $('.help-block').empty();
 
        // 检查用户名和密码
        var username = $('#username').val();
        var password = $('#password').val();
 
        if (username.trim() === '') {
            $('#username-group').addClass('has-error');
            $('#username-help').text('用户名不能为空');
        }
        if (password.trim() === '') {
            $('#password-group').addClass('has-error');
            $('#password-help').text('密码不能为空');
        }
 
        // 如果没有错误，则允许提交
        if ($('.form-group.has-error').length === 0) {
            $(this).off('submit').submit(); // 移除事件监听并允许提交
        }
    });
});

这段代码在表单提交时阻止默认行为，并检查用户名和密码是否为空。如果为空，则向对应的表单组添加错误类并显示错误信息；只有当没有错误时，才允许表单提交。

System

2024-08-17

所有,jquery

【漏洞复现-jquery-文件上传】vulfocus/CVE-2018-9207

环境准备：

Docker：确保您的机器上安装了Docker。
Docker Compose：安装Docker Compose以便于运行多容器Docker应用。

步骤：

克隆vulfocus仓库：




git clone https://github.com/vulfocus/vulfocus.git

进入CVE-2018-9207相关目录：
```
cd vulfocus/CVE-2018-9207/
```
使用Docker Compose启动环境：
```
docker-compose up -d
```
访问http://your-ip:8080，你将看到一个带有文件上传表单的网页。

使用Docker命令进入容器内部：




docker exec -it cve-2018-9207_jquery_1 bash

在容器内部，你可以尝试上传恶意文件，例如一个bash脚本。
当环境不再需要时，可以使用以下命令清理环境：
```
docker-compose down
```

注意：请将your-ip替换为你的实际IP地址或localhost，如果你在本地运行环境。

- 阅读更多 -

探索jQuery.validity：简化Web表单验证的神器

System

2024-08-17

所有,jquery




// 引入jQuery库和jQuery.validity插件
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.validity.min.js"></script>
 
// 页面加载完成后绑定验证事件
$(document).ready(function() {
    // 为具有data-validate属性的表单元素启用验证功能
    $('input, select, textarea').validity();
 
    // 为具有特定ID的表单启用验证功能
    $('#myForm').validity();
 
    // 监听验证状态变化事件
    $(document).on('validity.js.fail', function(e, field) {
        console.log(field.element.id + ' is invalid.');
    }).on('validity.js.pass', function(e, field) {
        console.log(field.element.id + ' is valid.');
    });
});

这段代码演示了如何在页面加载完成后，使用jQuery.validity插件为特定的表单元素启用验证功能，并监听验证状态的变化。当表单字段验证失败时，它会打印一条错误信息；当验证通过时，它会打印一条成功信息。这样可以帮助开发者了解表单的验证状态，并根据需要进行相应的操作。

- 阅读更多 -

推荐项目：jQuery.Gantt - 现代化的Gantt图表插件

System

2024-08-17

所有,jquery




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery.Gantt 示例</title>
    <link rel="stylesheet" href="path/to/jquery.gantt.css"/>
    <script src="path/to/jquery.js"></script>
    <script src="path/to/jquery.gantt.js"></script>
</head>
<body>
    <div id="gantt"></div>
    <script>
        $(function() {
            "use strict";
            $("#gantt").gantt({
                source: [
                    {
                        name: "任务1",
                        desc: "任务描述",
                        values: [
                            {
                                from: "/Date(2023,0,1)/",
                                to: "/Date(2023,0,10)/",
                                label: "开发",
                                customClass: "ganttRed"
                            }
                        ]
                    }
                    // ... 可以添加更多任务
                ],
                scale: "days",
                minScale: "hours",
                maxScale: "months",
                onItemClick: function(data) {
                    console.log("点击了任务:", data.item);
                },
                onAddClick: function(dt, rowId) {
                    console.log("添加任务的点击事件:", dt, rowId);
                },
                // ... 更多配置项
            });
        });
    </script>
</body>
</html>

这个示例展示了如何在HTML页面中嵌入一个基本的Gantt图表，并配置了一个简单的任务。用户可以通过调整配置项来进一步定制图表。

- 阅读更多 -

jquery datatable 修改单元格数据

System

2024-08-17

所有,jquery

在jQuery DataTables中，您可以使用cell()和data()方法来修改单元格的数据。以下是一个简单的例子，展示了如何修改特定单元格的数据：




// 假设您已经初始化了DataTable，并且您想要修改第二行第三列的数据
var table = $('#example').DataTable(); // 确保使用正确的表格ID
 
// 获取单元格对象
var cell = table.cell(1, 2); // 行索引从0开始，列索引从1开始
 
// 修改单元格数据
cell.data('新的数据').draw();

确保在调用cell()方法时使用正确的行和列索引。draw()方法会更新表格显示，以反映更改后的数据。

注意：如果您的表格配置了服务器模式（即serverSide选项设置为true），您需要在服务器端处理数据更新，因为客户端DataTable不会与服务器同步数据。

- 阅读更多 -

JQuery实现异步同时取多个URL的json

System

2024-08-17

所有,jquery

使用jQuery的$.when()方法可以同步获取多个URL的JSON数据。以下是一个简单的示例代码：




$.when(
  $.getJSON('/url1'),
  $.getJSON('/url2'),
  $.getJSON('/url3')
).done(function(response1, response2, response3) {
  // 处理获取到的数据
  var data1 = response1[0];
  var data2 = response2[0];
  var data3 = response3[0];
  
  // 使用数据进行操作
  console.log(data1);
  console.log(data2);
  console.log(data3);
}).fail(function(error) {
  // 处理错误情况
  console.error('An error occurred:', error);
});

在这个例子中，$.getJSON被调用三次以发出三个异步请求。$.when()接收这三个请求作为参数，并在所有请求都完成时调用done回调函数。每个响应都作为参数传递给done函数，你可以通过它们的索引或者直接访问属性来处理每个响应。如果任何一个请求失败，fail回调函数会被调用。

- 阅读更多 -

jQuery为input标签实现下拉选项筛选和选中功能

System

2024-08-17

所有,jquery




<!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>
</head>
<body>
    <input type="text" id="myInput" placeholder="输入名称筛选...">
    <ul id="myUL">
        <li data-value="Alice">Alice</li>
        <li data-value="Bob">Bob</li>
        <li data-value="Charlie">Charlie</li>
        <!-- 更多列表项 -->
    </ul>
 
    <script>
        $(document).ready(function(){
            $("#myInput").on("keyup", function() {
                var searchTerm = $(this).val().toLowerCase();
                $("#myUL li").each(function(){
                    var lineStr = $(this).text().toLowerCase();
                    if(lineStr.indexOf(searchTerm) == -1){
                        $(this).hide();
                    }
                    else{
                        $(this).show();
                    }
                });
            });
        });
    </script>
</body>
</html>

这段代码实现了一个简单的下拉筛选功能，用户可以在输入框中输入文本来过滤<ul>标签内的列表项。jQuery用于处理文本输入事件，并根据用户的输入显示或隐藏相应的列表项。

- 阅读更多 -

JQuery+Ajax实现动态数据分页

System

2024-08-17

所有,ajax

以下是一个使用jQuery和Ajax实现的简单的动态数据分页示例。假设我们有一个服务器端API，可以接受分页参数（如页码和每页项目数）并返回相应的数据。

HTML 部分：




<div id="data-container">
  <!-- 数据加载中... -->
</div>
<button id="load-more">加载更多</button>

JavaScript 部分（使用jQuery和Ajax）：




$(document).ready(function() {
  var page = 1; // 当前页码
  var pageSize = 10; // 每页项目数
 
  $('#load-more').click(function() {
    $.ajax({
      url: 'your-api-endpoint', // 替换为你的API端点
      type: 'GET',
      data: {
        page: page,
        pageSize: pageSize
      },
      dataType: 'json',
      success: function(data) {
        // 假设返回的数据格式为 { items: [], hasMore: true }
        if (data.items.length > 0) {
          var html = '';
          $.each(data.items, function(index, item) {
            // 生成显示数据的HTML
            html += '<div>' + item.title + '</div>';
          });
          $('#data-container').append(html);
          if (!data.hasMore) {
            $('#load-more').hide(); // 如果没有更多数据了，隐藏加载按钮
          }
          page++; // 更新页码
        }
      },
      error: function(error) {
        console.error('Error fetching data: ', error);
      }
    });
  });
});

确保替换 'your-api-endpoint' 为你的实际API URL，并且根据你的数据格式调整 success 函数中的处理逻辑。这个示例假设API返回一个对象，其中 items 是数据数组，hasMore 是一个布尔值，表示是否还有更多页的数据。

- 阅读更多 -

jQuery中的ajax通信技术的讲解

System

2024-08-17

所有,ajax

在jQuery中，可以使用$.ajax()方法进行AJAX通信。这是一个强大的方法，可以用来执行GET、POST等HTTP请求。

以下是一个使用$.ajax()方法的例子：




$.ajax({
    url: 'your-endpoint.php', // 请求的URL
    method: 'GET', // 请求方法，可以是GET、POST、PUT、DELETE等
    data: {
        key1: 'value1',
        key2: 'value2'
    },
    success: function(response) {
        // 请求成功时的回调函数
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error(error);
    }
});

对于简单的GET请求，还可以使用$.get()方法：




$.get('your-endpoint.php', { key1: 'value1', key2: 'value2' }, function(response) {
    // 请求成功时的回调函数
    console.log(response);
});

对于简单的POST请求，可以使用$.post()方法：




$.post('your-endpoint.php', { key1: 'value1', key2: 'value2' }, function(response) {
    // 请求成功时的回调函数
    console.log(response);
});

这些方法都是基于$.ajax()的封装，适用于不同的场景。简单请求可以用更简单的方法，复杂请求则需要使用$.ajax()以利用其全部功能。

- 阅读更多 -

推荐开源项目：jQuery Mousewheel - 精准控制滚动事件

System

2024-08-17

所有,jquery

jQuery Mousewheel 插件是一个用于处理鼠标滚轮事件的轻量级 jQuery 插件。它可以精确地获取鼠标滚轮的方向和滚动量，并允许你绑定事件处理程序来响应这些滚动事件。

以下是如何使用 jQuery Mousewheel 插件的示例代码：

首先，确保你的页面已经加载了 jQuery 库和 jQuery Mousewheel 插件。




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

然后，你可以使用 .mousewheel() 方法来绑定一个事件处理程序：




$(document).mousewheel(function(event) {
    // 判断滚动方向
    if (event.deltaY > 0) {
        console.log('向上滚动');
    } else {
        console.log('向下滚动');
    }
 
    // 判断滚动量
    console.log('滚动量:', event.deltaY);
 
    // 阻止默认的滚动行为
    return false;
});

这段代码会监听整个文档的鼠标滚轮事件，并在控制台输出滚动的方向和滚动量。如果你想要阻止默认的滚动行为（例如滚动页面），可以返回 false。

- 阅读更多 -