1. 首页
  2. 分类
  3. 前端技术
JavaScript-jQuery的使用 + JS的案例
System
2024-08-19
所有,jquery

以下是一个使用jQuery和JavaScript实现的简单案例，该案例展示了如何在用户点击按钮时，通过jQuery监听事件并使用JavaScript更改页面上的文本内容。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery和JavaScript示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#myButton").click(function() {
                $("#myText").text("你好，世界！");
            });
        });
    </script>
</head>
<body>
    <p id="myText">初始文本内容。</p>
    <button id="myButton">点击我</button>
</body>
</html>

在这个例子中，当页面加载完成后，jQuery会设置一个事件监听器给id为myButton的按钮，当按钮被点击时，会执行一个函数，该函数使用jQuery的$("#myText").text()方法来改变id为myText的段落的文本内容。

- 阅读更多 -
vue3全局使用jQuery
System
2024-08-19
所有,jquery

在Vue 3中全局使用jQuery，首先需要确保jQuery已经安装。

  1. 安装jQuery:



npm install jquery
  1. 在Vue项目的入口文件（通常是main.js或main.ts）中引入jQuery并设置为全局属性：



import { createApp } from 'vue';
import App from './App.vue';
import $ from 'jquery';
 
const app = createApp(App);
 
// 将jQuery设置为全局属性
app.config.globalProperties.$ = $;
 
app.mount('#app');
  1. 现在你可以在任何组件中通过this.$来访问jQuery了：



<template>
  <div>
    <button @click="addContent">Add Content</button>
    <div id="content"></div>
  </div>
</template>
 
<script>
export default {
  methods: {
    addContent() {
      this.$('#content').append('<p>Hello, jQuery!</p>');
    }
  }
};
</script>

请注意，在Vue 3中，推荐使用原生JavaScript或者Vue的官方库来替代jQuery。jQuery通常用于处理DOM，而Vue通过声明式渲染和响应式系统可以很好地管理模板中的DOM操作。

- 阅读更多 -
jQuery中显示与隐藏
System
2024-08-19
所有,jquery

在jQuery中，可以使用.show()和.hide()方法来显示或隐藏元素。

例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Show/Hide Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="box" style="width: 100px; height: 100px; background-color: red; display: none;"></div>
 
<script>
$(document).ready(function(){
  $('#show').click(function(){
    $('#box').show();
  });
  $('#hide').click(function(){
    $('#box').hide();
  });
});
</script>
 
</body>
</html>

在这个例子中，当点击"显示"按钮时，会调用$('#box').show();来显示#box元素，当点击"隐藏"按钮时，会调用$('#box').hide();来隐藏#box元素。

- 阅读更多 -
纯JS实现购物车&jQuery实现购物车
System
2024-08-19
所有,jquery

为了回答这个问题，我们将提供使用纯JavaScript和jQuery实现简单购物车的代码示例。

纯JavaScript实现购物车

HTML结构:




<div id="cart">
    <h2>我的购物车</h2>
    <ul id="cart-items"></ul>
</div>

JavaScript代码:




// 购物车中的商品列表
let cartItems = [];
 
// 添加商品到购物车
function addToCart(item) {
    cartItems.push(item);
    // 更新购物车显示
    updateCartView();
}
 
// 更新购物车视图
function updateCartView() {
    let cartList = document.getElementById('cart-items');
    cartList.innerHTML = ''; // 清空购物车列表
 
    cartItems.forEach(item => {
        let listItem = document.createElement('li');
        listItem.textContent = item.name + ' - ¥' + item.price;
        cartList.appendChild(listItem);
    });
}
 
// 示例商品
let product = { name: '笔记本电脑', price: 9999 };
addToCart(product);

jQuery实现购物车

HTML结构:




<div id="jquery-cart">
    <h2>我的购物车</h2>
    <ul id="jquery-cart-items"></ul>
</div>

jQuery代码:




// 假设已经在HTML中引入了jQuery库
 
// 购物车中的商品列表
let cartItems = [];
 
// 添加商品到购物车
function addToCart(item) {
    cartItems.push(item);
    // 更新购物车显示
    updateCartView();
}
 
// 更新购物车视图
function updateCartView() {
    $('#jquery-cart-items').empty(); // 清空购物车列表
 
    cartItems.forEach(item => {
        $('#jquery-cart-items').append(`<li>${item.name} - ¥${item.price}</li>`);
    });
}
 
// 示例商品
let product = { name: '笔记本电脑', price: 9999 };
addToCart(product);

这两个示例都展示了如何添加商品到购物车，并更新购物车视图以显示最新的商品列表。在纯JavaScript的实现中，我们直接操作DOM，而在jQuery的实现中，我们利用了jQuery库的简便方法来更新视图。两者都可以满足基本的购物车需求。

- 阅读更多 -
jQuery deffered和promise对象方法，移动端web开发
System
2024-08-19
所有,jquery

在移动端Web开发中，我们可以使用jQuery的deferred和promise对象方法来管理异步操作。以下是一个简单的例子，展示了如何使用这些方法来处理异步加载图片的操作：




$(document).ready(function() {
    var loadImage = function(url) {
        var deferred = $.Deferred();
 
        var image = new Image();
        image.onload = function() {
            deferred.resolve(image);
        };
        image.onerror = function() {
            deferred.reject("图片加载失败");
        };
 
        image.src = url;
 
        return deferred.promise();
    };
 
    var loadAndDisplayImage = function(url) {
        loadImage(url).then(function(image) {
            $('body').append(image);
        }, function(error) {
            console.error(error);
        });
    };
 
    loadAndDisplayImage('path_to_your_image.jpg');
});

在这个例子中，loadImage函数使用Deferred对象来创建一个异步操作。它返回一个promise对象，允许我们使用.then方法来指定当图片加载成功或失败时应该执行的操作。loadAndDisplayImage函数调用loadImage并且使用.then方法来处理加载结果。如果图片加载成功，它会将图片添加到页面上；如果失败，它会在控制台输出错误信息。

- 阅读更多 -
summernote富文本编辑器和jquery.validate冲突报错的解决方案
System
2024-08-19
所有,jquery

报错问题描述：在使用Summernote富文本编辑器和jQuery Validate插件时，两者可能会有兼容性问题导致错误报告。

解决方案：

  1. 确保Summernote和jQuery Validate的版本兼容。
  2. 如果报错与事件冒泡或事件捕获有关，尝试使用Summernote提供的事件处理方法，例如.on('summernote.change')来代替.on('change')。
  3. 检查是否有其他JavaScript库冲突，并尝试将jQuery Validate插件的初始化代码放在所有库加载之后。
  4. 如果错误与Summernote的初始化有关，确保在表单验证之前完成了Summernote的初始化。
  5. 检查是否有CSS样式冲突，尤其是那些可能影响隐藏域显示和行为的样式。

示例代码：




$(document).ready(function() {
    $('#summernote').summernote({
        height: 300,                 // 设置编辑器的高度
        callbacks: {
            onInit: function() {
                // 初始化完成后，再初始化验证插件
                $('#myform').validate({
                    // 验证规则
                });
            }
        }
    });
});
 
$('#myform').validate({
    rules: {
        content: {
            required: true
        }
    },
    messages: {
        content: {
            required: "内容不能为空"
        }
    }
});

在这个示例中，我们首先初始化了Summernote编辑器，并在其onInit回调函数中初始化了表单验证。这样可以确保在Summernote完全加载并准备接受输入之前，不会触发表单验证。

- 阅读更多 -
jquery文件菜单拓展《二》
System
2024-08-19
所有,jquery



$(document).ready(function() {
    // 初始化树形菜单
    $('#tree').treeview({
        data: getTree(), // 使用自定义函数获取树形数据
        levels: 2, // 只展开2级
        backColor:'white', // 背景色设置为白色
        showBorder:false, // 不显示边框
        showTags:true, // 显示标签
        // 节点被选中时的回调函数
        onNodeSelected: function(event, data) {
            // 在控制台输出选中节点的id和text
            console.log('Selected: ' + data.nodeId + ' - ' + data.text);
        },
        // 节点被取消选中时的回调函数
        onNodeUnselected: function(event, data) {
            // 在控制台输出取消选中节点的id和text
            console.log('Unselected: ' + data.nodeId + ' - ' + data.text);
        }
    });
});
 
// 自定义函数，用于获取树形数据
function getTree() {
    // 假设treeData是从服务器获取的数据
    var treeData = [
        {
            text: "Parent 1",
            href: "#parent1",
            tags: ["2"],
            nodes: [
                {
                    text: "Child 1",
                    href: "#child1",
                    tags: ["3"],
                    nodes: [
                        {
                            text: "Grandchild 1",
                            href: "#grandchild1",
                            tags: ["6"]
                        },
                        {
                            text: "Grandchild 2",
                            href: "#grandchild2",
                            tags: ["3"]
                        }
                    ]
                },
                {
                    text: "Child 2",
                    href: "#child2",
                    tags: ["3"]
                }
            ]
        },
        // ... 更多树节点数据
    ];
    return treeData;
}

这段代码示例展示了如何使用jQuery插件treeview来创建一个可拓展的树形菜单，并在节点被选中或取消选中时执行相应的操作。同时，它演示了如何从一个自定义函数中获取树形数据，这可以是静态的硬编码数据或者是从服务器动态加载的数据。

- 阅读更多 -
09-jQuery-动画-显示和隐藏元素
System
2024-08-19
所有,jquery



$(document).ready(function() {
    // 当点击“显示”按钮时
    $("#show").click(function() {
        // 使用fadeIn()方法以淡入效果显示元素
        $("#div1").fadeIn();
    });
 
    // 当点击“隐藏”按钮时
    $("#hide").click(function() {
        // 使用fadeOut()方法以淡出效果隐藏元素
        $("#div1").fadeOut();
    });
 
    // 当点击“切换”按钮时
    $("#toggle").click(function() {
        // 使用fadeToggle()方法以淡入或淡出效果切换元素的可见状态
        $("#div1").fadeToggle();
    });
});

这段代码使用了jQuery的fadeIn(), fadeOut(), 和 fadeToggle() 方法来控制一个ID为div1的元素的淡入、淡出以及切换可见状态。这些方法提供了平滑的动画效果，使页面的更新更加引人入胜。

- 阅读更多 -
npm run build打包jquery项目
System
2024-08-19
所有,jquery

为了使用npm运行一个构建脚本来打包一个使用jQuery的项目，你需要确保jQuery已经被安装为项目的依赖，并且在你的构建配置中被正确引用。以下是一个基本的设置步骤和示例：

  1. 确保jQuery已经安装。如果还没有安装，可以使用npm来安装它：

    


npm install jquery --save

  2. 在你的构建工具（如Webpack）的配置文件中，确保你已经配置了jQuery作为一个外部库。例如，在Webpack配置中，你可以这样设置：

    


externals: {
  jquery: 'jQuery'
}

  3. 在package.json文件中，添加一个构建脚本，比如：

    


"scripts": {
  "build": "webpack --mode production"
}

  4. 确保你的入口文件（entry point）正确引用了jQuery。例如：

    


import $ from 'jquery';
 
// 使用jQuery做一些事情
$(document).ready(function() {
  // ...
});

  5. 最后，在终端运行构建命令：

    


npm run build

这将会启动你在package.json中定义的构建过程，将你的项目打包成一个可用的形式。确保你的构建工具（如Webpack）配置正确，它会处理jQuery的引用并将其包含在最终的打包文件中。

- 阅读更多 -
jQuery事件绑定
System
2024-08-19
所有,jquery

在jQuery中，事件绑定通常使用.on()方法。这是一个通用的方法，可以用来绑定各种事件，包括鼠标事件、键盘事件等。

以下是一些使用jQuery事件绑定的示例：

  1. 绑定点击事件：



$('#button').on('click', function() {
    alert('按钮被点击了！');
});
  1. 绑定鼠标悬停事件：



$('#element').on('mouseenter', function() {
    $(this).css('color', 'red');
});
  1. 绑定输入框值改变事件：



$('#input').on('input', function() {
    console.log('输入框的值变为：' + $(this).val());
});
  1. 绑定表单提交事件：



$('form').on('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    alert('表单将不会提交！');
});
  1. 使用命名空间绑定事件，以便之后可以只卸载特定事件处理程序：



$('#button').on('click.myEvent', function() {
    alert('按钮被点击了！');
});
 
// 之后可以只移除这个事件处理程序
$('#button').off('click.myEvent');
  1. 绑定事件到未来元素（使用.on()绑定，即使元素尚不存在）：



$(document).on('click', '#button', function() {
    alert('按钮被点击了！');
});
  1. 使用事件委托绑定事件，提高性能：



$('#parent').on('click', '.child', function() {
    alert('子元素被点击了！');
});

以上代码展示了如何使用jQuery的.on()方法来绑定各种不同的事件。这是jQuery中事件处理的基本方法，也是推荐的做法。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号