分类 jquery 下的文章

HTML实现除夕最美烟花，2023春节倒计时，新年不可没有烟花，最炫烟花代码分享

2024-08-21

以下是一个简单的HTML页面示例，用于展示除夕夜最美的烟花。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>除夕夜最美烟花</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .background-video {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1;
        }
        .fireworks {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <video autoplay loop muted playsinline class="background-video">
        <source src="background-video.mp4" type="video/mp4">
    </video>
    <canvas class="fireworks"></canvas>
 
    <script>
        // 烟花绘制逻辑
        const canvas = document.querySelector('.fireworks');
        const ctx = canvas.getContext('2d');
        const mousedown = false;
        let particles = [];
 
        function Firework() {
            this.x = canvas.width / 2;
            this.y = canvas.height;
            this.vx = Math.random() * 5 - 2.5;
            this.vy = -15;
            this.radius = Math.random() * 2 + 1;
            this.color = 'hsl(' + 360 * Math.random() + ', 100%, 50%)';
            this.endY = Math.random() * canvas.height * 0.3 + canvas.height * 0.4;
            this.exploded = false;
        }
 
        Firework.prototype.update = function() {
            if (!this.exploded) {
                this.x += this.vx;
                this.y += this.vy;
                this.vy += 0.3;
                if (this.y >= this.endY) {
                    this.exploded = true;
                    this.explode();
                }
            }
        };
 
        Firework.prototype.draw = function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
            ctx.fillStyle = this.color;
            ctx.fill();
        };
 
        Firework.prototype.explode = function() {
            for (let i = 0; i < 20; i++) {
                particles.push(new Particle(this.x, this.y, this.

- 阅读更多 -

原生jquery实现倒计时功能【animate】动画特效包含天，时分秒

System

2024-08-21

所有,jquery

使用jQuery实现一个倒计时功能，并包含动画特效，可以使用setInterval来定时更新倒计时，并使用animate来实现数字的滑动效果。以下是一个简单的实现示例：

HTML部分：




<div id="countdown">
  <span class="time-item time-day"></span>天
  <span class="time-item time-hour"></span>时
  <span class="time-item time-minute"></span>分
  <span class="time-item time-second"></span>秒
</div>

CSS部分：




#countdown .time-item {
  display: inline-block;
  margin: 0 5px;
  font-size: 20px;
  font-weight: bold;
}

jQuery部分：




$(function() {
  function countdown(endTime) {
    var now = new Date(),
        end = new Date(endTime),
        timeDiff = end.getTime() - now.getTime(), // 时间差（毫秒）
        timeDiffSec = timeDiff / 1000, // 转换为秒
        days = Math.floor(timeDiffSec / (3600 * 24)),
        hours = Math.floor((timeDiffSec % (3600 * 24)) / 3600),
        minutes = Math.floor((timeDiffSec % 3600) / 60),
        seconds = Math.floor(timeDiffSec % 60);
 
    // 更新倒计时显示
    $('.time-day').text(days);
    $('.time-hour').text(hours);
    $('.time-minute').text(minutes);
    $('.time-second').text(seconds);
 
    // 如果时间到了，清除定时器
    if (timeDiff <= 0) {
      clearInterval(intervalId);
    }
  }
 
  // 设置倒计时结束时间
  var endTime = '2023-12-31T23:59:59+08:00'; // ISO格式的时间字符串
  var intervalId = setInterval(function() {
    countdown(endTime);
  }, 1000);
  
  // 初始化倒计时显示
  countdown(endTime);
});

在这个示例中，我们定义了一个countdown函数来计算剩余时间，并更新页面上的数字。我们使用了setInterval来每秒调用一次countdown函数，如果时间到了，我们清除定时器。注意，这里的endTime应该是一个符合ISO 8601扩展格式的时间字符串，以确保跨浏览器兼容性。

- 阅读更多 -

JQuery内存泄露解决办法，CSS清除默认样式

System

2024-08-21

所有,jquery

解决jQuery可能导致的内存泄露，可以采取以下措施：

使用.off()方法来移除绑定的事件处理器，特别是在对元素进行remove或empty操作前。
使用.remove()或.empty()来清除DOM元素，确保移除相关的事件处理器和数据。
使用.detach()来移除元素，但保留事件处理器和数据，在重新插入DOM前使用.remove()清理。
使用$.contains()来检查元素是否仍然在DOM中，避免对已移除的元素进行操作。
使用$.data()来清除元素上绑定的数据。

CSS清除默认样式的方法：

使用CSS reset文件，如Normalize.css，来消除不同浏览器默认样式的差异。
使用all: unset;或* { all: unset; }来重置元素的所有样式属性（不推荐，因为可能导致性能问题）。
针对特定的元素，明确设置需要的样式，覆盖默认样式。

示例代码：




// 移除元素上绑定的事件处理器
$('#element').off();
 
// 清除元素上绑定的数据
$.removeData($('#element').remove());
 
// 或者使用.detach()先移除，然后再清理数据
var $element = $('#element').detach();
$.removeData($element);
$element.remove();
 
// CSS样式重置示例
.my-element {
    all: unset; /* 这种方式不推荐，因为可能导致性能问题 */
    /* 或者只设置需要的样式属性 */
    color: #000;
    background-color: #fff;
}

请注意，all: unset;的使用可能会导致性能问题，因为它会重置元素的所有样式属性到浏览器的默认值，包括那些不一定需要重置的属性。通常建议只重置必要的样式属性以保持期望的样式并提高性能。

- 阅读更多 -

js、jquery、Bootstrap实现拖拽上传文件

System

2024-08-21

所有,jquery

要使用JavaScript、jQuery和Bootstrap实现拖拽上传文件，你可以使用HTML5的拖放API来实现拖拽功能，并结合FormData对象上传文件。以下是一个简单的实现示例：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag and Drop File Upload</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <div class="alert alert-success d-none" role="alert">
            File uploaded successfully!
        </div>
 
        <div class="drag-drop-area p-5 mb-4 border rounded" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
            Drop files here...
        </div>
 
        <button class="btn btn-primary" onclick="uploadFiles()">Upload</button>
    </div>
 
    <script>
        // 允许拖放
        function allowDrop(ev) {
            ev.preventDefault();
        }
 
        // 拖动进入
        function dragEnter(ev) {
            $(ev.target).addClass('bg-primary text-white');
        }
 
        // 拖动离开
        function dragLeave(ev) {
            $(ev.target).removeClass('bg-primary text-white');
        }
 
        // 拖放
        function drop(ev) {
            ev.preventDefault();
            $(ev.target).removeClass('bg-primary text-white');
 
            var files = ev.dataTransfer.files; // 获取拖放的文件
            // 处理文件
            // ...
        }
 
        // 上传文件
        function uploadFiles() {
            var formData = new FormData();
            var files = $('.drag-drop-area').data('files'); // 获取拖放的文件
 
            for (var i = 0; i < files.length; i++) {
                formData.append('files[]', files[i]);
            }
 
            $.ajax({
                url: 'your_upload_script_endpoint.php', // 替换为你的上传脚本地址
                type: 'POST',
                data: formData,
                processData: false,  // 告诉jQuery不要处理发送的数据
                contentType: false,  // 告诉jQuery不要设置内容类型头
                success: function(response) {
                    $('.alert-success').removeClass('d-none');
                    // 处理成功响应
                    // ...
                },
                error: function() {
                    // 处理错误
                    // ...
                }
            });
        }
    </script>
</body>
</html>

PHP部分（

- 阅读更多 -

2.electron之纯原生js/jquery的桌面应用程序（应用篇）

System

2024-08-21

所有,jquery

创建一个简单的Electron应用，使用纯原生的JavaScript或者jQuery来构建用户界面。

首先，确保你已经安装了Node.js和npm。

创建一个新的项目文件夹，并在命令行中运行以下命令来初始化一个新的npm项目：




mkdir my-electron-app
cd my-electron-app
npm init -y

安装Electron作为开发依赖项：




npm install electron --save-dev

在项目根目录下创建一个名为main.js的文件，它将作为你的主进程逻辑：




const { app, BrowserWindow } = require('electron');
 
function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile('index.html');
}
 
app.whenReady().then(createWindow);

在项目根目录下创建一个名为index.html的文件，它将作为你的界面模板：




<!DOCTYPE html>
<html>
<head>
  <title>Electron App</title>
</head>
<body>
  <h1>Hello Electron!</h1>
  <!-- 这里可以添加你的原生JavaScript或jQuery代码 -->
</body>
</html>

在package.json中添加一个启动脚本：




"scripts": {
  "start": "electron ."
}

最后，在命令行中运行你的应用：




npm start

这样你就有了一个简单的Electron应用，可以在其中使用原生JavaScript或jQuery来构建用户界面。如果你想要使用jQuery，确保你在main.js中的BrowserWindow配置中将nodeIntegration设置为true，这样就可以在渲染进程中使用require来引入jQuery。

- 阅读更多 -

jQuery如何获取动态添加的元素

System

2024-08-21

所有,jquery

在jQuery中，要获取动态添加的元素，你可以使用事件委托。事件委托允许你对当前和未来的元素应用事件处理程序。你可以使用.on()方法将事件绑定到一个父元素，并指定要监听的事件类型和要执行的函数。

以下是一个示例，展示了如何使用事件委托来获取动态添加的元素：




$(document).ready(function() {
    // 假设你要监听的事件是click
    $(document).on('click', '.dynamic-element', function() {
        // 这里的$(this)指向当前点击的动态元素
        console.log('动态元素被点击了！', $(this));
    });
 
    // 假设这是动态添加到document的元素
    $('<div>', {
        class: 'dynamic-element',
        text: '点击我',
        click: function() {
            alert('我是动态添加的元素！');
        }
    }).appendTo('body');
});

在这个例子中，.dynamic-element是你想要监听的动态添加的元素的类。当这个类的元素被点击时，事件处理程序会被触发。注意，这里的.on()方法是用于绑定事件的，而不是获取元素；元素是动态添加的，但通过事件委托，你可以处理它们的事件。

- 阅读更多 -

jquery+bootstrap select 清空选中值

System

2024-08-21

所有,jquery

要使用jQuery清空Bootstrap select控件的选中值，可以将其设置为默认的空值。以下是一个简单的例子：

HTML部分:




<select id="mySelect" class="form-control">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
<button id="clearSelection">清空选择</button>

jQuery部分:




$(document).ready(function() {
  $('#clearSelection').click(function() {
    $('#mySelect').val(''); // 清空选中值
  });
});

在这个例子中，当点击按钮"清空选择"时，关联的事件处理器会将id为mySelect的<select>元素的值设置为一个空字符串，从而清除任何可能的选中值。

- 阅读更多 -

jQuery实现本地存储用户管理后台

System

2024-08-21

所有,jquery

以下是一个简化的代码示例，展示了如何使用jQuery和localStorage来实现一个简单的用户管理界面：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LocalStorage User Management</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h2>User Management</h2>
    <input type="text" id="username" placeholder="Username">
    <button id="addUser">Add User</button>
    <button id="clearUsers">Clear Users</button>
    <h3>Users:</h3>
    <ul id="usersList"></ul>
 
    <script>
        $(document).ready(function() {
            loadUsers();
 
            $('#addUser').click(function() {
                var username = $('#username').val().trim();
                if (username) {
                    addUser(username);
                    $('#username').val('');
                }
            });
 
            $('#clearUsers').click(function() {
                clearUsers();
            });
        });
 
        function loadUsers() {
            var users = getUsers();
            $('#usersList').empty();
            $.each(users, function(index, user) {
                $('#usersList').append('<li>' + user + '</li>');
            });
        }
 
        function addUser(username) {
            var users = getUsers();
            if (users.indexOf(username) === -1) {
                users.push(username);
                localStorage.setItem('users', JSON.stringify(users));
                loadUsers();
            } else {
                alert('User already exists.');
            }
        }
 
        function clearUsers() {
            localStorage.removeItem('users');
            loadUsers();
        }
 
        function getUsers() {
            var users = JSON.parse(localStorage.getItem('users')) || [];
            return users;
        }
    </script>
</body>
</html>

这段代码实现了用户添加、清空列表以及从localStorage加载用户列表的功能。用户输入的用户名通过localStorage持久化保存，并在页面刷新后依然可用。这是一个简单的本地存储用户管理的例子，适用于学习和小型应用场景。

- 阅读更多 -

jQuery练习：使用jQuery获取表单数据，使用弹窗显示。

System

2024-08-21

所有,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>
    <script>
        $(document).ready(function() {
            $('#myForm').submit(function(e) {
                e.preventDefault(); // 阻止表单的默认提交行为
                var formData = $(this).serialize(); // 序列化表单数据为查询字符串
                alert('提交的数据为: ' + formData); // 使用弹窗显示表单数据
            });
        });
    </script>
</head>
<body>
    <form id="myForm">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

这段代码使用jQuery获取表单数据，并在用户点击提交按钮时阻止表单的默认提交行为，然后使用alert()函数弹出一个包含表单数据的警告框。这是一个简单的示例，用于演示如何在实际应用中使用jQuery来处理表单数据。

- 阅读更多 -

jQuery Mobile 实例：构建响应式移动网页的实践指南

System

2024-08-21

所有,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-inline="true" data-theme="b">查看关于</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-inline="true" data-theme="b">返回首页</a>
    </div>
    <div data-role="footer">
        <h4>页脚信息</h4>
    </div>
</div>
 
</body>
</html>

这个代码实例展示了如何使用jQuery Mobile创建一个包含两个页面的简单移动网站。每个页面都有头部、内容区域和尾部。通过使用data-role="page"定义页面，使用data-role="header"、data-role="content"和data-role="footer"定义各个区域。链接被用来在页面间导航，通过href属性指定目的页面的ID。

- 阅读更多 -