1. 首页
  2. 标签
  3. jquery
探索前端经典：jQuery UI —— 重塑交互体验的开源神器
System
2024-08-16
所有,jquery



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery UI Datepicker Example</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function() {
            $("#datepicker").datepicker();
        });
    </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
</body>
</html>

这个例子展示了如何使用jQuery UI库中的Datepicker widget来创建一个日期选择器。在页面加载完成后，通过jQuery的ready函数，我们初始化了Datepicker widget，使input元素变成一个日期选择器。这个例子简单而直接，展示了jQuery UI库为创建互动式网页提供的强大工具。

- 阅读更多 -
jQuery禁用/启用提交按钮
System
2024-08-16
所有,jquery

在jQuery中，您可以使用.prop()方法来禁用或启用提交按钮。对于禁用按钮，您将disabled属性设置为true，而启用按钮时，您将其设置为false。

以下是禁用和启用提交按钮的示例代码：




// 禁用提交按钮
$('#submitButton').prop('disabled', true);
 
// 启用提交按钮
$('#submitButton').prop('disabled', false);

在这里，#submitButton是提交按钮的ID。您可以根据实际的按钮ID进行替换。这段代码可以放在任何事件处理器中，比如点击事件或表单的提交事件中，以根据需要禁用或启用按钮。

- 阅读更多 -
Uncaught ReferenceError: $ is not defined之解决jquery引用不成功的办法
System
2024-08-16
所有,jquery

报错解释：

Uncaught ReferenceError: $ is not defined 这个错误表明你的代码试图使用 jQuery 库中的 $ 符号，但是浏览器没有找到这个符号的定义。这通常意味着 jQuery 库没有被正确加载到页面中，或者你的代码在 jQuery 库加载之前执行了。

解决方法：

  1. 确保在使用 $ 之前，已经通过 <script> 标签正确地引入了 jQuery 库。
  2. 检查 <script> 标签的位置，确保它位于使用 $ 的脚本之前。
  3. 如果你在使用模块加载器（如 RequireJS）或者构建工具（如 webpack），确保 jQuery 被正确引入并可用。
  4. 如果你的页面中有多个 JavaScript 框架或库，可能会有冲突。确保没有其他库覆盖了 $ 符号。

示例代码：




<!-- 确保在你的脚本之前引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 你的代码可以在这里
</script>

如果你已经确保了 jQuery 库已经被正确引入，但问题依然存在，请检查是否有其他脚本或错误的 <script> 标签顺序导致了这个问题。

- 阅读更多 -
jquery 滚动到指定位置
System
2024-08-16
所有,jquery

要使用jQuery滚动到指定位置，可以使用animate()方法结合scrollTop属性。以下是一个示例代码：




// 假设你想滚动到页面上的某个元素的位置，元素有一个ID为"target-element"
var targetOffset = $('#target-element').offset().top; // 获取元素距离顶部的偏移量
 
// 使用animate方法平滑滚动到该位置
$('html, body').animate({
    scrollTop: targetOffset
}, 'slow'); // 'slow'定义动画执行的速度

如果你想要立即滚动到指定位置，而不是平滑滚动，可以将动画时间设置为0：




$('html, body').animate({
    scrollTop: targetOffset
}, 0);

请确保在使用这段代码之前，页面已经加载完成（比如在$(document).ready()内部或者按钮点击事件处理器中）。

- 阅读更多 -
jQuery中的变量赋值操作详解及示例代码
System
2024-08-16
所有,jquery

在jQuery中，变量的赋值操作与在普通JavaScript中的操作没有太大区别。以下是几种常见的变量赋值方法以及示例代码：

  1. 直接赋值：



var x = 5;
var y = "Hello";
var z = [1, 2, 3];
  1. 通过函数返回值赋值：



function getValue() {
    return 10;
}
var x = getValue();
  1. 通过选择器获取元素属性赋值：



var imgSrc = $("#image").attr("src");
  1. 通过Ajax异步获取数据后赋值：



$.ajax({
    url: "some/url",
    success: function(data) {
        var response = data;
    }
});
  1. 通过事件处理函数获取用户输入后赋值：



$("#button").click(function() {
    var userInput = $("#textInput").val();
});
  1. 通过.data()方法赋值（常用于存储与DOM元素相关的数据）：



$("#element").data("key", "value");
  1. 通过.prop()方法赋值（常用于设置或获取DOM元素的属性值）：



$("#checkbox").prop("checked", true);

以上示例展示了如何在jQuery中进行变量的赋值操作，每种方法都有其适用的场景。

- 阅读更多 -
VUE 结合 jquery.dataTables 使用
System
2024-08-16
所有,jquery

在Vue中结合jquery.dataTables使用，你可以通过以下步骤实现：

  1. 安装jQuery和dataTables库：



npm install jquery
npm install datatables.net
  1. 在Vue组件中引入jQuery和dataTables：



import $ from 'jquery';
import 'datatables.net';
  1. 在组件的mounted钩子中初始化dataTable：



export default {
  mounted() {
    $('#example').DataTable();
  }
}
  1. 在组件的模板中添加表格：



<template>
  <div>
    <table id="example" class="display" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <!-- 数据行 -->
      </tbody>
    </table>
  </div>
</template>
  1. 确保在Vue实例化之后，DOM元素已经渲染完成，才能初始化dataTable。

注意：Vue和jQuery结合使用时应当谨慎，尽量避免直接操作DOM，尽可能利用Vue的数据驱动特性来管理DOM。上述代码仅作为使用两者结合的示例。在实际项目中，建议尽可能使用Vue官方推荐的数据表组件，例如vue-tables-2或v-data-table，以减少jQuery的使用并更好地利用Vue的响应式系统。

- 阅读更多 -
树状菜单（利用映射-bootstrap+jQuery实现折叠功能）
System
2024-08-16
所有,jquery

以下是一个使用Bootstrap和jQuery实现的简单树状菜单的代码示例：

HTML:




<div class="container">
    <ul class="nav nav-pills nav-stacked tree" style="width: 200px;">
        <li data-toggle="collapse" data-target="#item1" class="expandable">
            Item 1 <i class="pull-right fa fa-caret-down"></i>
        </li>
        <ul id="item1" class="collapse">
            <li>Subitem 1.1</li>
            <li>Subitem 1.2</li>
            <li>Subitem 1.3</li>
        </ul>
        <li data-toggle="collapse" data-target="#item2" class="expandable">
            Item 2 <i class="pull-right fa fa-caret-down"></i>
        </li>
        <ul id="item2" class="collapse">
            <li>Subitem 2.1</li>
            <li>Subitem 2.2</li>
        </ul>
        <!-- More list items as needed -->
    </ul>
</div>

CSS:




.tree li {
    cursor: pointer;
    list-style-type: none;
}
 
.tree i {
    float: right;
    margin-right: -15px;
}

jQuery:




$(document).ready(function(){
    $('.expandable').click(function(){
        $(this).find('i').toggleClass('fa-caret-right fa-caret-down');
    });
});

确保在你的HTML文件中引入了Bootstrap的CSS和jQuery库，以及Font Awesome图标库（用于提供箭头图标）。

这个代码实例提供了一个简单的树状菜单，每个可折叠项都有一个小箭头，点击时可以切换箭头的方向，表示菜单项现在是折叠还是展开。使用data-toggle="collapse"和data-target属性与Bootstrap的折叠组件结合，可以轻松实现菜单的折叠功能。

- 阅读更多 -
jquery操作元素的类名
System
2024-08-16
所有,jquery

在jQuery中，操作元素的类名可以使用.addClass()、.removeClass()和.toggleClass()方法。

  • .addClass(className)：添加一个或多个类名到每个匹配元素。
  • .removeClass(className)：从每个匹配的元素中移除一个或多个类名。
  • .toggleClass(className)：如果存在（不存在）就移除（添加）一个类名。

示例代码：




// 添加类名
$('#elementId').addClass('new-class');
 
// 移除类名
$('#elementId').removeClass('existing-class');
 
// 切换类名
$('#elementId').toggleClass('toggle-class');

如果需要检查元素是否包含特定的类名，可以使用.hasClass(className)方法：




// 检查是否包含类名
if ($('#elementId').hasClass('some-class')) {
  // 包含特定类名的操作
}

还可以通过.prop('class')获取或设置元素的class属性：




// 获取类名
var classNames = $('#elementId').prop('class');
 
// 设置类名
$('#elementId').prop('class', 'new-class-set');
- 阅读更多 -
jQuery事件与DOM操作
System
2024-08-16
所有,jquery



// 确保DOM完全加载完毕
$(document).ready(function() {
    // 为所有具有class="edit"的元素添加click事件监听器
    $('.edit').on('click', function() {
        // 获取当前元素的父元素
        var $parent = $(this).parent();
        // 找到并存储当前元素的兄弟元素（文本和删除按钮）
        var $textSibling = $(this).siblings('.text');
        var $deleteSibling = $(this).siblings('.delete');
        // 创建输入框并将当前文本值设置为输入框的值
        var $input = $('<input>').val($textSibling.text());
        // 用输入框替换文本和删除按钮
        $parent.append($input);
        $textSibling.remove();
        $deleteSibling.remove();
        // 聚焦输入框
        $input.focus();
        // 为输入框添加blur事件监听器，当输入框失去焦点时执行
        $input.on('blur', function() {
            // 获取输入框的值并清除输入框
            var newText = $(this).val();
            $(this).remove();
            // 创建新的文本元素和删除按钮并添加回父元素
            var $newText = $('<span>').addClass('text').text(newText);
            var $newDelete = $('<button>').addClass('delete').text('Delete');
            $parent.append($newText).append($newDelete);
            // 移除blur事件监听器
            $(this).off('blur');
        });
    });
});

这段代码首先确保在DOM完全加载后执行。然后，为所有class为"edit"的元素添加了click事件监听器。当edit按钮被点击时，它会获取当前元素的父元素，找到文本和删除按钮的兄弟元素，并创建一个新的输入框替换它们。在输入框获取焦点后，当输入框失去焦点时，它会将输入框的值设置为文本元素，并移除输入框和删除按钮，并将它们重新添加回父元素中。最后，它移除了为输入框添加的blur事件监听器。

- 阅读更多 -
JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】
System
2024-08-16
所有,jquery

打地鼠游戏是一个非常有趣的JavaScript游戏，它可以作为一个学习项目来制作。以下是一个简化版的打地鼠游戏制作讲解和代码实例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠游戏</title>
<style>
  #grid {
    width: 400px;
    height: 400px;
    background: #eaeaea;
    position: relative;
  }
  .tile {
    width: 10px;
    height: 10px;
    position: absolute;
    border: 1px solid #333;
  }
</style>
</head>
<body>
<div id="grid"></div>
<script>
  const grid = document.getElementById('grid');
  const tileCount = 40; // 地图大小
  const mouseCount = 3; // 鼠标数量
 
  // 生成鼠标
  function generateMice(count) {
    for (let i = 0; i < count; i++) {
      const mouse = document.createElement('div');
      mouse.classList.add('tile');
      mouse.style.top = `${Math.random() * 400}px`;
      mouse.style.left = `${Math.random() * 400}px`;
      grid.appendChild(mouse);
    }
  }
 
  // 鼠标打击事件
  grid.onclick = function(event) {
    const mouse = event.target;
    if (mouse.classList.contains('tile')) {
      mouse.parentNode.removeChild(mouse);
      if (grid.children.length === 0) {
        alert('你赢了！');
      }
    }
  };
 
  generateMice(mouseCount);
</script>
</body>
</html>

这段代码创建了一个400x400像素的打地鼠游戏区域，其中包含3个鼠标。玩家点击鼠标时，鼠标会消失。如果所有鼠标都被玩家点击，会弹出一个警告框说明玩家赢了。这个示例教学了如何使用JavaScript和CSS创建游戏地图，以及如何处理用户的点击事件。

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