分类 jquery 下的文章

JavaScript-bootstrap-JQuery-圆形进度条-设置进度条值

2024-08-21




// 首先，确保你已经在HTML中引入了Bootstrap的CSS和JavaScript库，以及jQuery库。
// 然后，在HTML中定义一个圆形进度条：
 
<div class="progress progress-circle">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    <span class="sr-only">0% 完成</span>
  </div>
</div>
 
// 接下来，使用jQuery来设置进度条的值：
 
$(document).ready(function() {
  // 假设我们要设置进度条的值为60%
  var progressValue = 60; // 进度条的值
  $('.progress-bar').css('width', progressValue + '%'); // 设置进度条的宽度
  $('.progress-bar').attr('aria-valuenow', progressValue); // 更新ARIA属性的值
  $('.progress-bar span').text(progressValue + '% 完成'); // 更新文本显示的进度信息
});

这段代码演示了如何使用jQuery来设置一个圆形进度条的值。首先，我们通过CSS设置了进度条的样式。然后，在jQuery的$(document).ready()函数中，我们通过修改进度条的宽度（对应于进度条的百分比）和ARIA属性来更新进度条的显示。最后，我们还更新了进度条内部span标签的文本，以显示当前的进度值和状态。

- 阅读更多 -

根据html中的标题生成目录

System

2024-08-21

所有,jquery

要根据HTML中的标题生成目录，你可以使用JavaScript来解析页面上的<h1>, <h2>, <h3>, ... 等标题元素，并创建一个目录列表。以下是一个简单的JavaScript函数，它会遍历文档中所有的标题元素，并创建一个无序列表（ul），列表项（li）中包含指向各个标题的超链接。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Generate Table of Contents</title>
<style>
    #toc {
        position: fixed;
        top: 0;
        left: 0;
        width: 200px;
    }
</style>
</head>
<body>
 
<div id="toc"></div>
 
<h1 id="title">This is a Heading 1</h1>
<h2 id="subtitle">This is a Heading 2</h2>
<h3 id="section1">This is a Heading 3</h3>
<h4 id="subsection1">This is a Heading 4</h4>
 
<script>
function generateTOC() {
    var toc = document.createElement("ul");
    var headings = document.querySelectorAll('h1, h2, h3, h4');
    headings.forEach(function(heading, index) {
        var id = heading.id || `heading-${index}`;
        heading.id = id;
        var li = document.createElement("li");
        li.innerHTML = `<a href="#${id}">${heading.textContent}</a>`;
        toc.appendChild(li);
    });
    document.getElementById('toc').appendChild(toc);
}
generateTOC();
</script>
 
</body>
</html>

在这个例子中，我们创建了一个generateTOC函数，它遍历页面上所有的h1、h2、h3和h4元素，并为它们生成一个ID（如果它们还没有的话）。然后，它为每个标题创建一个li元素，在li元素中，我们创建了一个超链接，这个超链接的href属性设置为带有生成的ID的#符号，这样它就可以直接链接到对应的标题元素。最后，我们将这个目录列表添加到页面上ID为toc的元素中。

- 阅读更多 -

jQuery学习笔记之jQuery常用方法

System

2024-08-21

所有,jquery




$(document).ready(function() {
    // 1. 选择器
    var $element = $('#elementId'); // ID选择器
    var $elements = $('.elementClass'); // 类选择器
 
    // 2. 事件绑定
    $element.click(function() {
        alert('Element clicked!');
    });
 
    // 3. 样式操作
    $element.css('color', 'red'); // 设置样式
    console.log($element.css('color')); // 获取样式
 
    // 4. 内容操作
    var content = $element.html(); // 获取内部HTML
    $element.html('<strong>New content</strong>'); // 设置内部HTML
 
    // 5. 属性操作
    var attrValue = $element.attr('name'); // 获取属性值
    $element.attr('name', 'newName'); // 设置属性值
 
    // 6. 类操作
    $element.addClass('newClass'); // 添加类
    $element.removeClass('existingClass'); // 移除类
    var hasClass = $element.hasClass('someClass'); // 检查是否有指定类
 
    // 7. 数据操作
    $element.data('key', 'value'); // 设置数据
    var dataValue = $element.data('key'); // 获取数据
 
    // 8. 动画
    $element.fadeIn(); // 淡入效果
    $element.fadeOut(); // 淡出效果
 
    // 9. AJAX
    $.ajax({
        url: 'your-api-endpoint',
        method: 'GET',
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.error(error);
        }
    });
});

这段代码展示了如何使用jQuery进行常见的DOM操作，包括选择器、事件绑定、样式操作、内容操作、属性操作、类操作、数据操作和动画等。同时也展示了如何使用jQuery的$.ajax()方法进行AJAX请求。

System

2024-08-21

所有,jquery

以下是两个jQuery插件的简单介绍和代码示例：

jQuery Growl插件：用于创建类似iOS通知的消息提醒。

安装方法：




npm install jquery-growl

使用方法：




$.growl({ title: "成功", message: "操作成功!" });

jQuery Password Validation插件：用于检查密码强度。

安装方法：




npm install password-validation

使用方法：




$("#password").password_validation({
  minimum_length: 8,
  use_symbols: true,
  use_numbers: true,
  use_uppercase: true,
  use_lowercase: true
});

这些代码示例展示了如何安装和使用这两个jQuery插件。实际使用时，你需要确保jQuery库已经被引入，并且根据实际情况调整参数。

- 阅读更多 -

【3D卡片切换】基于jquery实现3D堆叠卡片切换效果（附完整源码）

System

2024-08-21

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Card Flip Effect</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            perspective: 1000px;
        }
        .card {
            width: 300px;
            height: 400px;
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
            position: relative;
            transition: transform 1s;
            transform-style: preserve-3d;
        }
        .card.flip {
            transform: rotateY(180deg);
        }
        .card .face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }
        .card .face.back {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f0f0;
            transform: rotateY(180deg);
        }
        .card .face.front {
            background-color: #bbb;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.card').click(function() {
                $(this).toggleClass('flip');
            });
        });
    </script>
</body>
</html>

这段代码实现了一个简单的3D卡片切换效果。用户点击卡片时，卡片会旋转180度显示另一面。使用了jQuery来处理点击事件和类的切换。这个例子展示了如何结合HTML、CSS和JavaScript实现动态界面效果。

System

2024-08-21

所有,jquery

以下是一个简单的使用Bootstrap创建的响应式网页，用于展示一个静态的蛋糕信息。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Cake Website</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Cake Shop</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
 
    <main role="main" class="container">
        <div class="starter-template">
            <h1>Delicious Cake</h1>
            <p class="lead">Our special cake is made with love and fresh ingredients.</p>
            <img src="cake.jpg" alt="Cake" class="img-fluid">
            <div class="mt-4">
                <h2>Cake Details</h2>
                <ul>
                    <li>Ingredients: Butter, Flour, Eggs, etc.</li>
                    <li>Allergen Info: None</li>
                    <li>Calories: 1000</li>
                </ul>
            </div>
        </div>
    </main>
 
    <footer class="footer">
        <div class="container">
            <span class="text-muted">Copyright © 2021 Cake Shop</span>
        </div>
    </footer>
 
    <!-- 引入jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script

System

2024-08-21

所有,jquery

报错解释：

eslint:no-undef 表示 ESLint 检测到一个变量未被定义。在这种情况下，错误信息 '$' is not defined 意味着 $ 符号被使用了，但是在当前的作用域中 ESLint 没有找到它的定义。

解决方法：

在脚本顶部引入 jQuery。




import $ from 'jquery';
// 或者使用 require 如果你的项目不支持 ES6 import 语法
// const $ = require('jquery');

如果你已经在其他地方引入了 jQuery，确保你没有使用了另一个模块系统或者库，它也使用了 $ 作为变量名，导致冲突。
如果你不想改变 $ 的使用，可以在脚本顶部声明 $ 不会被检查：
```
/* global $ */
```
如果你在 HTML 文件中直接使用了 jQuery，并且通过 <script> 标签引入，确保 jQuery 的 <script> 标签在使用 $ 之前被加载。
如果你在 HTML 文件中使用 jQuery，并且通过 CDN 引入，确保 CDN 链接是正确的，并且没有网络问题导致 jQuery 没有被加载。
如果你在 HTML 文件中使用 jQuery，并且通过 <script> 标签引入，可以通过 window.$ 来访问 jQuery 对象。

选择适合你当前项目设置的解决方案应用即可。

- 阅读更多 -

jquery的简单介绍

System

2024-08-21

所有,jquery

jQuery是一个快速、简洁的JavaScript框架，是JavaScript的一个库，主要用于简化HTML文档与JavaScript的操作，简化了HTML文档的操作、事件处理、动画设计和Ajax交互等。

以下是一些常见的jQuery操作：

选择元素

jQuery使用美元符号($)来选择HTML元素。




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

在上面的例子中，当点击段落（p）元素时，该元素会隐藏。

改变HTML内容

使用jQuery的.html()，.text()，或.val()方法来改变HTML内容。




$("p").html("Hello, World!");
$("p").text("Hello, World!");
$("input").val("Dolly Duck");

在上面的例子中，第一行改变段落的HTML内容，第二行改变段落的文本内容，第三行改变输入框的值。

改变CSS

使用jQuery的.css()方法来改变HTML元素的样式。




$("p").css("background-color", "yellow");

在上面的例子中，段落的背景颜色被改变为黄色。

添加和移除类

使用jQuery的.addClass()，.removeClass()，或.toggleClass()方法来操作类。




$("p").addClass("intro");
$("p").removeClass("intro");
$("p").toggleClass("intro");

在上面的例子中，第一行为段落添加了一个名为"intro"的类，第二行移除了该类，第三行切换该类（如果已经存在就移除，不存在就添加）。

显示和隐藏元素

使用jQuery的.show()，.hide()，或.toggle()方法来显示或隐藏HTML元素。




$("p").show();
$("p").hide();
$("p").toggle();

在上面的例子中，第一行显示段落，第二行隐藏段落，第三行切换段落的可见状态。

创建动画

使用jQuery的各种动画方法，如.fadeIn()，.fadeOut()，.slideDown()，.slideUp()等，创建动画。




$("p").fadeIn();
$("p").fadeOut();
$("p").slideDown();
$("p").slideUp();

在上面的例子中，第一行淡入段落，第二行淡出段落，第三行向下滑入段落，第四行向上滑出段落。

AJAX

使用jQuery的.ajax()，.load()，.get()，或.post()方法，可以轻松地使用AJAX。




$("#div1").load("demo_test.txt");
$("#div1").load("demo_test.txt #greeting");
 
$.get("demo_test.php", { name: "John", location: "Boston" }, function(data){
  $("#div1").html(data);
});
 
$.post("demo_test_post.php", { name: "John", location: "Boston" }, function(data){
  $("#div1").html(data);
});

在上面的例子中，第一行将文本文件"demo\_test.txt"的内容加载到指定的元素中，第二行将"demo\_test.txt"文件中ID为"greeting"的元素的内容加载到指定的元素中，第三行和第四行分别使用GET和POST方法，将服务器上的数据加载到指定的元素中。

事件

使用jQuery的.

- 阅读更多 -

jquery动态效果插件之ScrollMagic

System

2024-08-21

所有,jquery

ScrollMagic 是一个用于创建滚动交互效果的 JavaScript 库。它可以与 jQuery 一起使用，但通常 ScrollMagic 不需要 jQuery 来工作。以下是一个使用 ScrollMagic 创建动态效果的基本示例：




// 引入 ScrollMagic 库
import ScrollMagic from 'scrollmagic';
 
// 初始化 ScrollMagic 控制器
let controller = new ScrollMagic.Controller();
 
// 创建一个新的滚动场景
let scene = new ScrollMagic.Scene({
    triggerElement: '#trigger', // 触发元素的选择器
    triggerHook: 0.5, // 在触发元素达到50%时开始
    duration: '100%' // 场景的持续时间为触发元素的100%
})
.setPin('#pin-element') // 将指定元素固定
.addIndicators() // 添加指示器，以便于调试
.addTo(controller); // 将场景添加到控制器

在这个例子中，当用户滚动至 id 为 trigger 的元素时，该元素会被固定在滚动视图中。setPin 方法用于将指定元素固定在位置，addTo 方法将场景添加到 ScrollMagic 控制器中。

请注意，这个例子使用了 ES6 的 import 语法来引入 ScrollMagic。如果你的项目不支持 ES6 模块，你可能需要使用相应的 require 方法来引入 ScrollMagic 库。

确保在你的 HTML 文件中包含了 ScrollMagic 的脚本文件，并且你已经引入了 jQuery（如果你打算使用 jQuery 方法）。如果你想使用 ScrollMagic 的指示器功能，你还需要引入其 CSS 文件。

- 阅读更多 -

JS对象转数组

System

2024-08-21

所有,jquery

要将JavaScript对象转换为数组，可以使用Object.keys(), Object.values(), 或 Object.entries() 方法，取决于你需要得到键、值，或者键和值。




// 假设有如下对象
const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};
 
// 将对象的键转换为数组
const keysArray = Object.keys(obj); // ['key1', 'key2', 'key3']
 
// 将对象的值转换为数组
const valuesArray = Object.values(obj); // ['value1', 'value2', 'value3']
 
// 将对象的键值对转换为数组，数组中是键值对的数组
const entriesArray = Object.entries(obj); // [['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']]

选择使用哪个方法取决于你的具体需求。

- 阅读更多 -