分类 jquery 下的文章

网站登录界面制作（three.js 3D特效背景）+ boostrap导航栏实现 + jQuery移动窗口【附加源代码】

2024-08-19

以下是一个简化的代码示例，展示如何使用Three.js创建3D特效背景和Bootstrap实现导航栏，以及使用jQuery来处理移动窗口的事件。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Login</title>
    <!-- 引入Three.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- 引入Boostrap样式 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        /* 设置3D特效背景的样式 */
        #sceneCanvas {
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        /* 导航栏样式 */
        .navbar {
            margin-bottom: 0; /* 移除默认的底部边距 */
            background-color: #3498db; /* 设置导航栏背景色 */
        }
        /* 其他样式 */
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .login-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        input[type=text], input[type=password] {
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            border: none;
            border-bottom: 1px solid #000;
            background: transparent;
            outline: none;
        }
        button {
            width: 100%;
            padding: 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
 
<div id="sceneCanvas"></div> <!-- 3D特效背景的容器 -->
 
<nav class="navbar navbar-expand-lg navbar-dark"> <!-- Bootstrap导航栏 -->
    <a class="navbar-brand" href="#">Website Name</a>
    <!-- 导航栏内容 -->
</nav>
 
<div class="login-container">
    <h2>Login Form</h2>
    <input type="text" placeholder="U

- 阅读更多 -

javascript实现SM2加密解密

System

2024-08-19

所有,jquery

在JavaScript中实现SM2加密解密，你可以使用第三方库，例如 sm-crypto。以下是一个简单的例子：

首先，你需要安装 sm-crypto：




npm install sm-crypto

然后，你可以使用以下代码进行SM2的加密和解密：




const sm2 = require('sm-crypto').sm2;
const keypair = sm2.generateKeyPairHex(); // 生成密钥对
 
// 公钥和私钥
const publicKey = keypair.publicKey;
const privateKey = keypair.privateKey;
 
// 需要加密的数据
const message = 'Hello, SM2!';
 
// 加密
const encrypted = sm2.doEncrypt(message, publicKey);
console.log('Encrypted message:', encrypted);
 
// 解密
const decrypted = sm2.doDecrypt(encrypted, privateKey);
console.log('Decrypted message:', decrypted);

请确保你的环境支持Node.js，并且已经安装了sm-crypto库。上述代码中，首先生成了一个SM2的密钥对，然后使用公钥对数据进行加密，使用私钥进行解密。

- 阅读更多 -

JavaScript--jQuery框架

System

2024-08-19

所有,jquery

在JavaScript中，jQuery是一个非常流行的库，它提供了一种简化JavaScript开发的方法。以下是一些使用jQuery的示例代码：

选择元素：




$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

在这个例子中，当你点击段落标签（p）时，它会隐藏。

创建HTML元素：




$("<p>Hello, World!</p>").appendTo("body");

在这个例子中，我们创建了一个新的段落标签，并将其添加到了body的末尾。

修改CSS：




$("p").css("color", "blue");

在这个例子中，我们将所有段落标签的文本颜色改为蓝色。

AJAX请求：




$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $(this).append("SUCCESS!");
}).fail(function() {
  $(this).append("ERROR!");
});

在这个例子中，我们发送一个AJAX请求到"test.html"，并根据请求成功或失败在页面上添加相应的消息。

事件监听：




$("p").on("click", function(){
  alert("段落被点击了！");
});

在这个例子中，当点击段落标签时，会弹出一个警告框。

动画效果：




$("p").hide(1000);

在这个例子中，段落标签会在1000毫秒内消失。

获取输入字段的值：




var inputVal = $("#input").val();

在这个例子中，我们获取了ID为"input"的输入字段的值。

在文档加载完成后执行代码：




$(document).ready(function(){
  // 在这里写你的代码...
});

在这个例子中，我们在文档加载完成后执行了一些代码。

以上就是一些使用jQuery的基本例子。jQuery提供了许多其他的功能和方法，可以用于完成更复杂的操作。

- 阅读更多 -

关于使用js，jQuery来实现循环渲染添加多个元素

System

2024-08-19

所有,jquery




// 使用原生JavaScript循环渲染多个元素
function renderElements(parentSelector, elementTag, elementAttributes, count) {
    const parentElement = document.querySelector(parentSelector);
    for (let i = 0; i < count; i++) {
        const element = document.createElement(elementTag);
        Object.keys(elementAttributes).forEach(key => {
            element.setAttribute(key, elementAttributes[key]);
        });
        parentElement.appendChild(element);
    }
}
 
// 使用jQuery循环渲染多个元素
function renderElementsWithJQuery(parentSelector, elementTag, elementAttributes, count) {
    const $parentElement = $(parentSelector);
    for (let i = 0; i < count; i++) {
        const $element = $(`<${elementTag}></${elementTag}>`).attr(elementAttributes);
        $parentElement.append($element);
    }
}
 
// 示例：使用这两个函数
// 假设我们要在id为'my-container'的元素内添加10个div，每个div有一个类名'my-class'和一些文本内容
 
// 使用JavaScript
renderElements('#my-container', 'div', { class: 'my-class' }, 10).forEach(el => {
    el.textContent = 'Some content';
});
 
// 使用jQuery
renderElementsWithJQuery('#my-container', 'div', { class: 'my-class' }, 10).text('Some content');

这个例子展示了如何使用原生JavaScript和jQuery来循环添加多个具有相同属性的元素到指定的父元素中。在原生JavaScript中，我们创建元素并设置其属性，然后将其添加到父元素中。在jQuery中，我们使用更简洁的语法来完成相同的操作。

- 阅读更多 -

jQuery设计留言板页面

System

2024-08-19

所有,jquery

以下是一个使用jQuery创建简单留言板页面的示例代码：

HTML部分（index.html）:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Guestbook with jQuery</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="guestbook">
    <h2>Simple Guestbook</h2>
    <form id="messageForm">
        <label for="nameField">Name:</label>
        <input type="text" id="nameField" name="name" required>
        <label for="messageField">Message:</label>
        <textarea id="messageField" name="message" required></textarea>
        <button type="submit">Post Message</button>
    </form>
    <h3>Messages:</h3>
    <ul id="messagesList">
        <!-- Messages will be displayed here -->
    </ul>
</div>
 
<script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）:




#guestbook {
    width: 500px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
}
 
#guestbook form {
    display: flex;
    flex-direction: column;
}
 
#guestbook form label {
    margin-bottom: 5px;
}
 
#guestbook form input, #guestbook form textarea {
    margin-bottom: 15px;
    padding: 8px;
}
 
#messagesList {
    margin-top: 20px;
}
 
#messagesList li {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
}

JavaScript部分（script.js）:




$(document).ready(function() {
    $('#messageForm').on('submit', function(e) {
        e.preventDefault();
        var name = $('#nameField').val();
        var message = $('#messageField').val();
 
        // Create a new list item with the message
        var newItem = $('<li>').text(name + ': ' + message);
 
        // Add the list item to the messages list
        $('#messagesList').append(newItem);
 
        // Clear the form fields
        $('#nameField').val('');
        $('#messageField').val('');
    });
});

这个例子中，我们创建了一个简单的留言板页面，用户可以输入名字和留言，留言会以列表项的形式添加到页面上。当提交表单时，使用jQuery阻止页面刷新，并使用DOM操作将用户的留言添加到页面上。同时，清空输入字段以便用户可以继续输入新的留言。

- 阅读更多 -

jQuery实现手动轮播图——制作轮播切换效果

System

2024-08-19

所有,jquery




$(document).ready(function() {
    var $slider = $('#slider');
    var $sliderItems = $slider.find('.slider-item');
    var currentIndex = 0;
 
    function goToSlide(index) {
        currentIndex = index;
        $sliderItems.removeClass('active').eq(index).addClass('active');
    }
 
    // 初始化时显示第一张图片
    goToSlide(0);
 
    // 设置轮播间隔为3000毫秒
    setInterval(function() {
        var nextIndex = (currentIndex + 1) % $sliderItems.length;
        goToSlide(nextIndex);
    }, 3000);
 
    // 添加点击事件，点击左右按钮时切换图片
    $('#slider-prev').click(function() {
        var prevIndex = (currentIndex - 1 + $sliderItems.length) % $sliderItems.length;
        goToSlide(prevIndex);
    });
 
    $('#slider-next').click(function() {
        var nextIndex = (currentIndex + 1) % $sliderItems.length;
        goToSlide(nextIndex);
    });
});

这段代码实现了一个简单的手动轮播图效果，通过点击左右按钮或者自动播放来切换图片。注意，这里没有包含CSS样式，你需要根据自己的设计来添加相应的样式。

- 阅读更多 -

jquery去除字符串空格

System

2024-08-19

所有,jquery

以下是几种不同的实现方法来使用jQuery去除字符串中的空格：

方法一：使用JavaScript的replace()方法以及正则表达式来去除字符串中的空格。




var str = " hello world ";
var newStr = str.replace(/\s/g, "");
console.log(newStr); // 输出：helloworld

方法二：使用jQuery的trim()方法来去除字符串的首尾空格。




var str = " hello world ";
var newStr = $.trim(str);
console.log(newStr); // 输出：hello world

方法三：使用jQuery的replaceAll()方法来替换字符串中的空格。




var str = " hello world ";
var newStr = str.replaceAll(" ", "");
console.log(newStr); // 输出：helloworld

这些是几种简单而常用的方法来使用jQuery去除字符串中的空格。每种方法都有不同的适用场景，具体使用哪种方法取决于你的需求和项目要求。

- 阅读更多 -

jQuery 基础知识总结（超级详细），35岁以上程序员求职没市场

System

2024-08-19

所有,jquery

jQuery是一种快速、简洁的JavaScript库，主要用于简化HTML文档与JavaScript的操作，提高网页的交互性。以下是一些常用的jQuery方法和选择器：

选择器：




$("#element") // 选择ID为element的元素
$(".class")   // 选择所有class为class的元素
$("p")        // 选择所有的p元素
$("p.class")  // 选择所有class为class的p元素
$("#element, .class, p") // 组合选择

事件绑定：




$("#element").click(function() {
    // 点击事件的处理逻辑
});

样式操作：




$("#element").css("color", "red"); // 设置样式
$("#element").css("color"); // 获取样式

内容操作：




$("#element").html(); // 获取内容
$("#element").html("New Content"); // 设置内容
$("#element").text(); // 获取文本内容
$("#element").text("New Text"); // 设置文本内容

属性操作：




$("#element").attr("href"); // 获取属性
$("#element").attr("href", "http://www.example.com"); // 设置属性

类操作：




$("#element").addClass("class"); // 添加类
$("#element").removeClass("class"); // 移除类
$("#element").toggleClass("class"); // 切换类

动画：




$("#element").fadeIn(); // 淡入
$("#element").fadeOut(); // 淡出
$("#element").slideDown(); // 滑下
$("#element").slideUp(); // 滑上
$("#element").animate({width: "200px"}, 2000); // 自定义动画

AJAX：




$.ajax({
    url: "http://www.example.com",
    type: "GET",
    success: function(data) {
        // 请求成功的处理逻辑
    },
    error: function() {
        // 请求失败的处理逻辑
    }
});

链式调用：




$("#element").css("color", "red").slideDown();

jQuery对象和DOM对象转换：




var domElement = $("#element")[0]; // jQuery对象转换为DOM对象
var jQueryElement = $(domElement); // DOM对象转换为jQuery对象

以上是一些基础的jQuery操作，实际应用中可以根据需要选择合适的方法进行操作。

- 阅读更多 -

jQuery结构简析，看这篇足矣了

System

2024-08-19

所有,jquery

jQuery是一个快速、简洁的JavaScript框架，主要用于简化JavaScript与DOM之间的交互。以下是一个简化的jQuery结构示例，它展示了如何使用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() {
            // 当按钮被点击时执行的函数
            $('#myButton').click(function() {
                alert('按钮被点击了！');
            });
        });
    </script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

这段代码的核心功能是当页面加载完成后，为ID为myButton的按钮元素添加点击事件处理程序。当按钮被点击时，会弹出一个警告框。这个示例展示了jQuery的基本用法，包括如何选择DOM元素以及如何添加事件监听器。

System

2024-08-19

所有,jquery

打地鼠游戏是一个经典的游戏，我们可以使用JavaScript和jQuery来制作。以下是一个简单的实现：

HTML部分：




<!DOCTYPE html>
<html>
<head>
    <title>打地鼠游戏</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="game-container">
        <div id="game-board"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS部分（style.css）:




#game-container {
    width: 500px;
    height: 500px;
    position: relative;
    user-select: none;
}
 
#game-board {
    width: 100%;
    height: 100%;
    position: absolute;
}
 
.mouse {
    width: 20px;
    height: 20px;
    background-color: #333;
    position: absolute;
    border-radius: 50%;
}

JavaScript部分（script.js）:




$(document).ready(function() {
    const boardSize = 25;
    let gameBoard = $('#game-board');
    let mice = [];
 
    function createBoard() {
        for (let i = 0; i < boardSize; i++) {
            for (let j = 0; j < boardSize; j++) {
                $('<div>', { class: 'mouse' }).css({
                    top: i * 20,
                    left: j * 20
                }).appendTo(gameBoard);
            }
        }
        mice = $('.mouse');
    }
 
    function initGame() {
        createBoard();
        gameBoard.on('click', '.mouse', function() {
            $(this).hide();
            mice = mice.filter(function(index, mouse) {
                return $(mouse).is(':visible');
            });
            if (mice.length === 0) {
                alert('你赢了！');
                initGame();
            }
        });
    }
 
    initGame();
});

这个游戏的实现包括了创建游戏区域和打地鼠的逻辑。每次点击鼠标，鼠标图标就会消失，如果所有鼠标都被打掉，会弹出警告框提示玩家赢得游戏，并重新初始化游戏。这个例子简单展示了如何使用jQuery来操作DOM元素，并添加事件监听器，实现游戏的交互功能。

- 阅读更多 -