分类 jquery 下的文章

2024-08-17

要使用jQuery插件实现数字滚动，可以使用jquery-countup库。以下是如何使用jquery-countup的简单示例：

首先，确保你已经在你的项目中包含了jQuery库和jquery.countup.js。你可以通过CDN引入它们：




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>

在HTML中，为想要滚动显示数字的元素添加一个带有data-countup属性的元素：




<div id="number">8425</div>

使用jQuery初始化countUp：




$(document).ready(function() {
  var options = {
    useEasing: true,
    useGrouping: true,
    separator: ',',
    decimal: '.',
  };
  
  var demo = new countUp.CountUp('number', 0, 8425, 0, 2.5, options);
  if (!demo.error) {
    demo.start();
  } else {
    console.error(demo.error);
  }
});

在上面的代码中，countUp.CountUp构造函数的第一个参数是元素的ID，第二个参数是数字滚动的起始值，第三个参数是目标值，后面的参数是配置选项。调用start方法后，数字就会从起始值滚动到目标值。

- 阅读更多 -

jQueryUI 1.10：jQuery 的用户界面库

System

2024-08-17

所有,jquery

jQuery UI是一套基于jQuery的用户界面扩展插件，它提供了丰富的Widget、交互式UI元素、视觉效果和主题等。

以下是使用jQuery UI的一个简单示例，展示了如何使用其拖放功能（Draggable）和放置功能（Droppable）：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Droppable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>拖动我!</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>放置我!</p>
</div>
 
<script>
$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      $(this)
        .find("p")
        .html("放置成功!");
    }
  });
});
</script>
 
</body>
</html>

在这个例子中，我们创建了两个div元素，一个可以拖动（#draggable），另一个可以接受拖动元素并在拖动后改变其内容（#droppable）。通过调用jQuery的.draggable()和.droppable()方法，我们分别使得#draggable元素可拖动，并使得#droppable元素可以接受拖动物品并在物品放置后触发一个函数。

- 阅读更多 -

解决jquery-1.11.0.js安全漏洞

System

2024-08-17

所有,jquery

解释：

jQuery 1.11.0 版本中存在一个安全漏洞，该漏洞可能允许攻击者执行跨站点脚本 (XSS) 攻击。具体来说，jQuery.parseXML 函数在解析 XML 字符串时使用了浏览器内置的 DOMParser，但没有对 XML 内容进行足够的验证或清理，这可能允许注入恶意代码。

解决方法：

升级到 jQuery 的一个安全版本，比如 1.12.0 或更高版本，因为这些版本修复了该漏洞。
如果必须使用 1.11.0 版本，可以对输入进行清理，避免将不受信任的输入直接插入到 XML 中。

示例代码（升级 jQuery 版本）：




<!-- 替换旧版本的 jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

如果选择不升级，可以在使用 jQuery.parseXML 时进行输入清理：




var xmlString = someInput; // 假设这是需要解析的 XML 字符串
xmlString = xmlString.replace(/[^\x20-x7F]/g, ''); // 清理非 ASCII 字符
var xmlDoc = jQuery.parseXML(xmlString);

请注意，输入清理并不能保证完全防止 XSS 攻击，因为攻击者可以使用其他方式注入恶意代码。因此，最佳做法是始终使用最新的、经过安全审核的库版本。

- 阅读更多 -

前端提高篇：jQuery的属性与特性，prop与attr

System

2024-08-17

所有,jquery

在jQuery中，prop()和attr()是用于获取和设置元素属性的两个主要方法。prop()主要用于处理元素自带的属性，如checked、selected、disabled等，而attr()用于获取和设置HTML属性，如class、id、name等。

prop()方法：
- 获取属性的值：$(selector).prop('attribute')
- 设置属性的值：$(selector).prop('attribute', value)
attr()方法：
- 获取属性的值：$(selector).attr('attribute')
- 设置属性的值：$(selector).attr('attribute', value)

示例代码：




<input type="checkbox" id="checkbox1" checked>




// 获取checkbox是否被选中
var isChecked = $('#checkbox1').prop('checked'); // true 或 false
 
// 设置checkbox为选中状态
$('#checkbox1').prop('checked', true);
 
// 获取checkbox的id属性
var id = $('#checkbox1').attr('id'); // checkbox1
 
// 设置checkbox的id属性
$('#checkbox1').attr('id', 'newId');

在上述示例中，prop('checked')用于获取checkbox是否被选中，而prop('checked', true)用于设置checkbox为选中状态。attr('id')用于获取checkbox的id属性，而attr('id', 'newId')用于设置checkbox的id属性。

总结：prop()用于处理元素的属性，如checked、selected、disabled等，而attr()用于处理元素的HTML属性，如class、id、name等。

- 阅读更多 -

jQuery中如何定义数组

System

2024-08-17

所有,jquery

在jQuery中，定义数组的方式与在原生JavaScript中一样。你可以使用方括号[]来定义一个空数组，或者直接用逗号分隔的值列表来填充数组。

以下是一些示例：




// 定义一个空数组
var emptyArray = [];
 
// 定义一个包含元素的数组
var fruits = ['apple', 'banana', 'cherry'];
 
// 定义一个数组，包含不同类型的元素
var mixedArray = [1, 'two', { three: true }];
 
// 使用jQuery定义数组，与原生JavaScript一样
var $emptyArray = [];
var $fruits = ['apple', 'banana', 'cherry'];
var $mixedArray = [1, 'two', { three: true }];

请注意，$前缀通常在jQuery中用于变量名，以区分原生JavaScript变量，但这并不是定义数组的一部分，数组的定义方式与语法完全一样，无论是否带有$前缀。

- 阅读更多 -

初识Jquery

System

2024-08-17

所有,jquery

JQuery是一个快速、简洁的JavaScript框架，它使得HTML文档 traversing, event handling, animation 和Ajax等的操作更加简单，更加容易，方便了开发人员。

选择元素

在JQuery中，我们可以使用 $(selector).action() 的方式来选择元素并进行操作。

例如，我们可以使用 $('#element') 来选择id为 'element' 的元素。




$(document).ready(function(){
  $('#element').css('color', 'red');
});

事件处理

JQuery允许我们更加简单的为HTML元素添加事件处理程序。

例如，我们可以为一个按钮添加点击事件：




$(document).ready(function(){
  $('#myButton').click(function(){
    alert('Button Clicked!');
  });
});

CSS操作

JQuery提供了一系列的方法来获取和设置CSS属性。

例如，我们可以获取元素的CSS属性：




$(document).ready(function(){
  var color = $('#element').css('color');
  alert(color);
});

我们也可以设置元素的CSS属性：




$(document).ready(function(){
  $('#element').css('color', 'red');
});

HTML/文本/值操作

JQuery提供了一系列的方法来获取和设置HTML、文本、值等。

例如，我们可以获取元素的HTML内容：




$(document).ready(function(){
  var html = $('#element').html();
  alert(html);
});

我们也可以设置元素的HTML内容：




$(document).ready(function(){
  $('#element').html('<p>New Content</p>');
});

AJAX

JQuery提供了一系列的方法来进行AJAX请求。

例如，我们可以使用 $.ajax() 方法来发送一个GET请求：




$.ajax({
  url: 'your-url',
  type: 'GET',
  success: function(data) {
    alert('Data received: ' + data);
  }
});

链式调用

JQuery允许我们进行链式调用，这意味着我们可以在一行代码中连续调用多个方法。

例如，我们可以链式调用几个方法：




$(document).ready(function(){
  $('#element')
    .css('color', 'red')
    .html('<p>New Content</p>')
    .show();
});

动画

JQuery提供了一系列的方法来制作动画。

例如，我们可以使用 fadeIn() 方法来淡入一个元素：




$(document).ready(function(){
  $('#element').fadeIn();
});

隐藏/显示元素

JQuery提供了一系列的方法来隐藏和显示元素。

例如，我们可以使用 hide() 方法来隐藏一个元素：




$(document).ready(function(){
  $('#element').hide();
});

创建动态内容

JQuery提供了一系列的方法来创建动态内容。

例如，我们可以使用 append() 方法来在元素内部的末尾添加内容：




$(document).ready(function(){
  $('#element').append('<p>New Paragraph</p>');
});

移除/删除元素

JQuery提供了一系列的方法来移除和删除元素。

例如

- 阅读更多 -

jQuery 资源管理错误漏洞CVE-2021-21252附修复方案

System

2024-08-17

所有,jquery

该错误是因为jQuery 1.x 和 2.x 版本中存在一个资源管理错误，该错误可能允许攻击者执行任意JavaScript代码。

修复方法：

升级到jQuery 3.5.0或更高版本。这是第一个不包含这个错误的版本。
如果你必须使用1.x或2.x版本，可以通过设置$.ajaxSetup()中的converters选项为空来避免这个错误：




$.ajaxSetup({
  converters: {}
});

在实施修复方案之前，请确保对网站进行充分的测试，以确保更新后不会影响现有功能。

System

2024-08-17

所有,jquery

以下是一个使用jQuery和JavaScript实现的简单的todolist待办事项清单的示例代码：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<header>
    <h1>My TodoList</h1>
    <input type="text" id="new-todo-item" placeholder="Add new todo">
</header>
 
<section>
    <ul id="todo-list">
        <!-- Todo items will be added here -->
    </ul>
</section>
 
<script src="script.js"></script>
</body>
</html>

CSS部分（style.css）:




body {
    font-family: Arial, sans-serif;
}
 
header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
 
#todo-list {
    list-style-type: none;
    padding: 0;
}
 
#todo-list li {
    margin: 8px;
    padding: 8px;
    background: #f9f9f9;
    border-left: 5px solid #30de88;
    font-size: 16px;
}
 
#new-todo-item {
    padding: 8px;
    margin: 10px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

JavaScript部分（script.js）:




$(document).ready(function(){
    $('#new-todo-item').keypress(function(event){
        if(event.which === 13){
            var todoText = $(this).val();
            $('#todo-list').append('<li>' + todoText + ' <button class="delete-item">X</button></li>');
            $(this).val('');
        }
    });
 
    $('#todo-list').on('click', '.delete-item', function(){
        $(this).parent().remove();
    });
});

这个简单的代码实现了一个基本的todolist功能，用户可以通过键盘输入添加待办事项，每一项旁边都有一个删除按钮，点击可以删除对应的事项。这个示例教学了如何使用jQuery处理键盘事件和动态更新DOM，是学习jQuery的一个很好的起点。

- 阅读更多 -

jQuery库+distpicker库实现省市区三级联动效果（超简单版）

System

2024-08-17

所有,jquery




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省市区三级联动效果示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path_to/distpicker.data.js"></script>
    <script src="path_to/distpicker.js"></script>
    <link rel="stylesheet" href="path_to/distpicker.css">
</head>
<body>
    <div class="form-group">
        <label class="control-label">地址选择：</label>
        <div id="distpicker">
            <select id="province" data-province="---- 选择省份 ----"></select>
            <select id="city" data-city="---- 选择城市 ----"></select>
            <select id="district" data-district="---- 选择区县 ----"></select>
        </div>
    </div>
 
    <script>
        $(function(){
            $('#distpicker').distpicker({
                province: '---- 选择省份 ----',
                city: '---- 选择城市 ----',
                district: '---- 选择区县 ----'
            });
        });
    </script>
</body>
</html>

这段代码展示了如何使用jQuery和distpicker库来创建一个基本的省市区三级联动效果。在这个例子中，我们引入了必要的CSS和JavaScript文件，并在页面加载完成后初始化了distpicker插件。这个插件会自动将三个下拉菜单转换为联动的地区选择器。

- 阅读更多 -

jquery 封装的分页插件（包括上一页，下一页，跳转）

System

2024-08-17

所有,jquery

以下是一个简单的使用jQuery实现的分页插件示例。这个示例提供了基本的分页功能，包括上一页、下一页和页码跳转。

HTML 部分：




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

CSS 部分：




.pagination {
    user-select: none;
}
.pagination a {
    cursor: pointer;
    user-select: none;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}
.pagination a.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.pagination a:hover {
    background-color: #007bff;
    color: white;
}

jQuery 部分：




(function($) {
    $.fn.pagination = function(options) {
        var settings = $.extend({
            currentPage: 1,
            totalPages: 5,
            callback: function(page) { /* do something */ }
        }, options);
 
        this.each(function() {
            var $this = $(this);
            var $nav = $('<nav></nav>').addClass('pagination').appendTo($this);
            var $previous = $('<a href="#">&laquo; 上一页</a>').appendTo($nav);
            var $next = $('<a href="#">下一页 &raquo;</a>').appendTo($nav);
            var $goToPage = $('<input type="text" size="2" />').appendTo($nav);
            var $goButton = $('<a href="#">跳转</a>').appendTo($nav);
 
            function render(page) {
                settings.callback(page);
                $nav.find('a').removeClass('active');
                $nav.find('a[href="' + page + '"]').addClass('active');
            }
 
            $previous.on('click', function(e) {
                e.preventDefault();
                if (settings.currentPage > 1) {
                    render(settings.currentPage - 1);
                }
            });
 
            $next.on('click', function(e) {
                e.preventDefault();
                if (settings.currentPage < settings.totalPages) {
                    render(settings.currentPage + 1);
                }
            });
 
            $goButton.on('click', function(e) {
                e.preventDefault();
                var page = parseInt($goToPage.val(), 10);
                if (!isNaN(page) && page >= 1 && page <= settings.totalPages) {
                    render(page);
                }
            });
 
            for (var i = 1; i <= settings.totalPages; i++) {
                $('<a href="' + i + '">' + i + '</a>').appendTo($nav);
            }
 
            render(settings.currentPage);
        });
    };
})(jQuery);
 
// 使用方

- 阅读更多 -