分类 jquery 下的文章

2024-08-19

在jQuery中，选择器用于选取DOM元素，而自带函数则用于对选取的元素执行操作。

选择器

$(selector)：基本选择器，可以选取任何元素。
$(.class)：类选择器，选取所有指定类的元素。
$(#id)：ID选择器，选取指定ID的元素。
$(*)：选取所有元素。
$(selector1 selector2)：群组选择器，选取多个选择器选取的所有元素。
$(selector:first)：选取第一个匹配的元素。
$(selector:last)：选取最后一个匹配的元素。
$(selector:even)：选取索引为偶数的元素。
$(selector:odd)：选取索引为奇数的元素。
$(selector:eq(index))：选取指定索引的元素。
$(selector:gt(index))：选取大于指定索引的元素。
$(selector:lt(index))：选取小于指定索引的元素。
$(selector:not(selector))：选取不匹配指定选择器的元素。
$(selector:header)：选取所有标题元素，如h1, h2等。
$(selector:animated)：选取正在执行动画的元素。

自带函数

.each(function(index, element))：遍历选取的元素集合。
.show()：显示被选取的元素。
.hide()：隐藏被选取的元素。
.toggle()：切换元素的可见状态。
.text()：获取或设置元素的文本内容。
.html()：获取或设置元素的HTML内容。
.val()：获取或设置表单元素的值。
.attr(name)：获取元素的属性值。
.css(name)：获取元素的样式属性值。
.addClass(className)：为元素添加一个或多个类。
.removeClass(className)：从元素移除一个或多个类。
.toggleClass(className)：对元素进行切换类操作。
.append(content)：在被选元素内部的末尾插入内容。
.prepend(content)：在被选元素内部的开头插入内容。
.after(content)：在被选元素之后插入内容。
.before(content)：在被选元素之前插入内容。
.remove()：从DOM中移除元素。
.empty()：从被选元素中移除子元素。
.click(function)：为元素的点击事件绑定处理函数。
.change(function)：为元素的内容改变事件绑定处理函数。
.submit(function)：为表单的提交事件绑定处理函数。
.ajaxStart(function)：在Ajax请求开始时执行函数。
.ajaxStop(function)：在Ajax请求结束时执行函数。

以上是jQuery中的选择器和自带函数的一些常用示例。实际应用中，可以根据需要选择合适的选择器和函数来操作DOM元素。

jQuery Tree Multiselect - 美观易用的多选树形控件

2024-08-19




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Tree Multiselect Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tree-multiselect/0.2.10/jquery.tree-multiselect.min.css">
    <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.tree-multiselect/0.2.10/jquery.tree-multiselect.min.js"></script>
</head>
<body>
 
<div id="tree"></div>
 
<script>
$(function() {
    $('#tree').treeMultiselect({
        // 配置选项
        enableCollapsible: true, // 允许折叠
        enableCheckboxToggle: true, // 允许复选框切换
        checkboxInitialState: true, // 初始状态为选中
        collapse: function() {
            // 折叠时的回调函数
            console.log('节点被折叠了');
        },
        expand: function() {
            // 展开时的回调函数
            console.log('节点被展开了');
        }
    });
 
    // 初始化树
    $('#tree').treeMultiselect({
        data: [
            {
                label: '节点1',
                children: [
                    {
                        label: '子节点1.1',
                        attributes: {
                            some_custom_attribute: 'some value'
                        }
                    },
                    {
                        label: '子节点1.2',
                        children: [
                            {
                                label: '子节点1.2.1'
                            }
                        ]
                    }
                ]
            },
            {
                label: '节点2',
                state: {
                    checked: true, // 初始状态为选中
                    disabled: true, // 初始状态为禁用
                    expanded: true // 初始状态为展开
                }
            }
        ]
    });
});
</script>
 
</body>
</html>

这个代码示例展示了如何使用jQuery Tree Multiselect插件来创建一个多选树形控件，并提供了一些基本的配置选项和事件处理函数。同时，它也展示了如何初始化树形结构，并为每个节点设置自定义属性和初始状态。

创建json数组与json数组渲染到HTML

2024-08-17

创建JSON数组并将其渲染到HTML的基本步骤如下：

创建一个JSON数组。
使用JavaScript遍历JSON数组。
使用DOM操作将数据插入到HTML中。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Array Rendering</title>
</head>
<body>
 
<div id="json-container"></div>
 
<script>
// 创建JSON数组
var jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 22 }
];
 
// 获取要插入数据的容器
var container = document.getElementById('json-container');
 
// 遍历JSON数组并创建列表项
jsonArray.forEach(function(item) {
    var listItem = document.createElement('li');
    listItem.textContent = 'Name: ' + item.name + ', Age: ' + item.age;
    container.appendChild(listItem);
});
</script>
 
</body>
</html>

在这个例子中，我们创建了一个包含三个对象的JSON数组。然后使用forEach方法遍历数组，并为每个对象创建一个新的li元素，将对象的数据作为文本内容插入到这个元素中，最后将这个元素添加到页面上的<div>容器中。

使用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(); // 移除事件监听并允许提交
        }
    });
});

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

前端使用highlight.js代码高亮显示(服务端返回前端代码的字符串格式)

2024-08-17

要在前端使用highlight.js来高亮显示从服务端返回的代码字符串，你需要按照以下步骤操作：

引入highlight.js库及相关语言高亮样式。
在页面中准备一个用于显示代码的元素。
使用highlight.js提供的API将返回的代码字符串进行高亮渲染。

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

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highlight Code Example</title>
    <!-- 引入 highlight.js 样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
    <!-- 引入 highlight.js 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
</head>
<body>
    <pre><code id="code-container"></code></pre>
 
    <script>
        // 假设这是从服务端获取的代码字符串
        var codeString = "console.log('Hello, World!');";
 
        // 高亮渲染代码
        hljs.highlightAuto(codeString).value;
 
        // 将高亮后的代码设置到页面上的元素中
        document.getElementById('code-container').innerHTML = hljs.highlightAuto(codeString).value;
    </script>
</body>
</html>

在这个例子中，我们假设codeString是从服务端接收到的代码字符串。highlightAuto函数自动检测代码语言并应用相应的高亮样式。然后，我们将高亮后的代码字符串设置到页面上的<code>元素内。

请确保服务器返回的内容类型是正确的（如application/json），以便正确处理从服务端接收到的字符串。如果服务端返回的内容是HTML格式，你可能需要对返回的代码字符串进行HTML实体编码，以避免XSS攻击。

2024-08-17

【漏洞复现-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表单验证的神器

2024-08-17




// 引入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图表插件

2024-08-17




<!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图表，并配置了一个简单的任务。用户可以通过调整配置项来进一步定制图表。

js判断元素是否在可视区域内

2024-08-17

以下是几种不同的方法来判断一个元素是否在可视区域内：

方法一：使用getBoundingClientRect()方法




function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  const isVisible = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
  return isVisible;
}

方法二：使用window.scrollY和window.innerHeight属性




function isInViewport(element) {
  const elementTop = element.offsetTop;
  const elementBottom = elementTop + element.offsetHeight;
  const scrollTop = window.scrollY;
  const scrollBottom = scrollTop + window.innerHeight;
  const isVisible = (elementTop >= scrollTop) && (elementBottom <= scrollBottom);
  return isVisible;
}

方法三：使用Element.getBoundingClientRect()方法和window.pageYOffset属性




function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  const isVisible = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
  const scrollTop = window.pageYOffset;
  const scrollBottom = scrollTop + window.innerHeight;
  const isPositionVisible = (rect.top >= scrollTop) && (rect.bottom <= scrollBottom);
  return isVisible && isPositionVisible;
}

这些方法都可以判断一个元素是否在可视区域内，它们的实现方式略有不同，但都能达到相同的效果。

jquery datatable 修改单元格数据

2024-08-17

在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不会与服务器同步数据。