Tech Blog

2024-08-12

报错解释：

在JavaScript中，当你看到“$ is not defined”这样的错误时，通常意味着你的代码试图使用了一个名为“$”的变量或者函数，但是这个变量或者函数在当前作用域中没有被定义。在很多情况下，“$”是jQuery库中的一个主要符号，它用于提供一系列快捷的方法来处理DOM元素和编写Ajax等异步网络应用。

问题解决方法：

确保你已经在页面中包含了jQuery库。你可以通过在HTML文件的<head>部分添加以下代码来包含jQuery：
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
```
确保jQuery的脚本标签在使用“$”符号的脚本标签之前被加载。
如果你已经包含了jQuery库，那么检查是否有任何JavaScript文件在jQuery之后被加载，并且在这些文件中可能试图使用“$”符号。如果是这种情况，你可能需要将这些文件的加载顺序改变，确保它们在jQuery之后加载。
如果你不打算使用jQuery，或者你在使用其他库也使用了“$”符号（如Prototype），那么你可能需要使用jQuery的jQuery.noConflict()方法来避免冲突，或者使用其他库的符号来代替“$”。
如果你在模块化的JavaScript环境中工作（如使用webpack和ES6模块导入），确保你正确地导入了jQuery模块。例如，你可以使用import $ from 'jquery';来导入jQuery。

总结：确保jQuery库已经正确加载，并且没有被其他库覆盖。如果你使用的是模块化的JavaScript，确保正确地导入了所需的依赖。

- 阅读更多 -

jquery获取select项并移动到另一个select里

System

2024-08-12

所有,jquery

要使用jQuery将选中的<option>从一个<select>元素移动到另一个<select>元素，你可以使用以下代码示例：

HTML部分：




<select id="sourceSelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
 
<button id="moveRight">-></button>
<button id="moveLeft"><-</button>
 
<select id="destinationSelect" multiple="multiple">
  <!-- 这里可以预先放一些<option> -->
</select>

jQuery部分：




$(document).ready(function() {
  $('#moveRight').click(function() {
    $('#sourceSelect option:selected').appendTo('#destinationSelect');
  });
 
  $('#moveLeft').click(function() {
    $('#destinationSelect option:selected').appendTo('#sourceSelect');
  });
});

这段代码中，我们定义了三个元素：两个<select>和一个按钮。通过点击按钮，可以将选中的选项从一个<select>移动到另一个。#moveRight按钮将选中的选项移动到右边的<select>，而#moveLeft按钮则将选中的选项从右边的<select>移回左边的<select>。

- 阅读更多 -

jQuery PowerTip - 提升你的鼠标提示体验

System

2024-08-12

所有,jquery

jQuery PowerTip 是一个 jQuery 插件，用于增强鼠标悬停时的提示信息。以下是如何使用 jQuery PowerTip 的示例代码：

首先，确保在页面中包含了 jQuery 和 PowerTip 的库：




<link rel="stylesheet" type="text/css" href="jquery.powertip.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.powertip.min.js"></script>

然后，在 HTML 中为需要显示提示信息的元素添加 powerTip 属性：




<a href="#" powerTip="这是一个超链接的提示信息">悬停在这里查看提示</a>

接着，使用下面的 JavaScript 代码初始化 PowerTip：




$(function() {
  $('[powerTip]').powerTip();
});

这样，当用户将鼠标悬停在带有 powerTip 属性的元素上时，就会显示出该属性定义的提示信息。

- 阅读更多 -

23.js、jquery实现选项卡

System

2024-08-12

所有,jquery

下面是使用原生JavaScript和jQuery实现简单选项卡的示例代码：

原生JavaScript版本

HTML:




<div class="tabs">
  <button class="tab" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tab" onclick="openTab(event, 'tab2')">Tab 2</button>
</div>
 
<div id="tab1" class="tabcontent">
  <h3>Tab 1</h3>
  <p>This is tab 1 content.</p>
</div>
 
<div id="tab2" class="tabcontent">
  <h3>Tab 2</h3>
  <p>This is tab 2 content.</p>
</div>

JavaScript:




function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tab");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

jQuery版本

HTML:




<div class="tabs">
  <button class="tab" data-tab="tab1">Tab 1</button>
  <button class="tab" data-tab="tab2">Tab 2</button>
</div>
 
<div id="tab1" class="tabcontent">
  <h3>Tab 1</h3>
  <p>This is tab 1 content.</p>
</div>
 
<div id="tab2" class="tabcontent">
  <h3>Tab 2</h3>
  <p>This is tab 2 content.</p>
</div>

jQuery:




$('.tab').click(function() {
  var tabContent = $(this).data('tab');
  $('.tabcontent').hide();
  $('.tab').removeClass('active');
  $('#' + tabContent).show();
  $(this).addClass('active');
});

在这两个示例中，我们有一个包含两个选项卡按钮的容器，以及两个选项卡内容区域。每个选项卡按钮都有一个点击事件，该事件会改变选项卡的样式以指示当前激活的选项卡，同时隐藏其他选项卡内容。

- 阅读更多 -

初学node.js 使用npm安装 jquery遇到的问题

System

2024-08-12

所有,jquery

在Node.js中使用npm安装jQuery时遇到问题，可能的原因和解决方法如下：

网络问题：确保你的网络连接正常，并且npm配置的代理（如有）是正确的。
缓存问题：尝试清除npm缓存，使用命令 npm cache clean --force。
版本问题：检查是否指定了不存在的jQuery版本，确保安装你想要的版本，可以通过查看npm的jQuery包页面（https://www.npmjs.com/package/jquery）来确认支持的版本。
npm版本问题：确保你的npm版本是最新的，可以通过命令 npm install -g npm 来更新npm。
权限问题：如果你在类Unix系统上，可能需要使用管理员权限来全局安装包，使用 sudo npm install jquery --save。
包的依赖问题：有时候包的依赖可能导致安装失败，检查jQuery的依赖是否都满足，如果有缺失，可以尝试单独安装缺失的依赖。
包损坏问题：如果之前安装过jQuery，可能会有损坏的文件残留，尝试删除node\_modules目录和package-lock.json文件，然后重新运行 npm install。

如果以上方法都不能解决问题，请提供更具体的错误信息，以便进一步分析解决。

- 阅读更多 -

jQuery模态框弹窗提示代码

System

2024-08-12

所有,jquery

以下是一个使用jQuery创建模态框弹窗提示的简单示例：

HTML部分：




<!-- 模态框HTML结构 -->
<div id="myModal" class="modal">
  <!-- 模态框内容 -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这里是模态框内容！</p>
  </div>
</div>
 
<!-- 触发模态框的按钮 -->
<button id="openModal">打开模态框</button>

CSS部分：




/* 模态框的样式 */
.modal {
  display: none; /* 默认隐藏模态框 */
  position: fixed; /* 固定定位 */
  z-index: 1; /* 位于顶层 */
  left: 0;
  top: 0;
  width: 100%; /* 全宽度 */
  height: 100%; /* 全高度 */
  overflow: auto; /* 超出内容可滚动 */
  background-color: rgb(0,0,0); /* 背景颜色带些透明度 */
  background-color: rgba(0,0,0,0.4); /* 透明度 */
}
 
/* 模态框内容 */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 垂直居中 */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
 
/* 关闭按钮 */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
 
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

jQuery部分：




// jQuery 代码
$(document).ready(function(){
  $("#openModal").click(function(){
    $("#myModal").css("display", "block");
  });
  
  $(".close").click(function(){
    $("#myModal").css("display", "none");
  });
 
  // 点击其他地方关闭模态框
  $(document).on("click", function(event){
    var $target = $(event.target);
    if(!$target.closest('.modal-content').length && !$target.closest('.open-modal').length){
      $("#myModal").css("display", "none");
    }
  });
  
  // 按键按下时检查关闭模态框
  $(document).on("keydown", function(event){
    if(event.key === "Escape") { // 检查按键是否为Esc
      $("#myModal").css("display", "none");
    }
  });
});

这段代码实现了一个简单的模态框功能，点击按钮会打开模态框，点击模态框内的关闭按钮或者任何其他地方都会关闭模态框，同时监听键盘的Esc键来关闭模态框。

- 阅读更多 -

推荐开源项目：VenoBox - 现代化、响应式的jQuery灯箱插件

System

2024-08-12

所有,jquery

VenoBox 是一款现代化的 jQuery 光盒插件，它能够为你的网站提供一个美丽的图片或内容框。VenoBox 具有响应式设计，能够在所有设备上工作良好，并提供多种自定义选项。

以下是如何使用 VenoBox 的基本示例代码：

首先，确保你的页面中包含了 jQuery 库和 VenoBox 的 CSS 和 JavaScript 文件。




<link rel="stylesheet" href="path/to/venobox.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/venobox.min.js"></script>

将 VenoBox 应用到你的图片链接上。




<a href="path/to/fullsize-image.jpg" class="venobox" data-title="图片标题" data-vbtype="iframe">打开VenoBox</a>

初始化 VenoBox。




$(document).ready(function() {
    $('.venobox').venobox();
});

这样，当用户点击带有 venobox 类的链接时，VenoBox 就会打开，并显示指定的图片或内容。你可以通过 data-title 添加图片标题，使用 data-vbtype 来指定要显示的内容类型（如 iframe）。

System

2024-08-12

所有,jquery

在Vite中使用第三方库，你需要先通过npm或yarn安装这些库，然后在你的Vite项目中导入并使用它们。以下是一个简单的例子，展示了如何在Vite项目中集成jQuery和jQuery UI。

安装jQuery和jQuery UI:




npm install jquery
npm install jqueryui

在Vite项目中导入jQuery和jQuery UI:




// main.js 或其他适当的入口文件
import $ from 'jquery';
import 'jqueryui/ui/widgets/datepicker.js'; // 如果需要特定的jQuery UI组件
 
// 使用jQuery和jQuery UI
$(function() {
  $("#datepicker").datepicker();
});

在你的Vite项目中的HTML文件里使用jQuery和jQuery UI:




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 省略其他head内容 -->
</head>
<body>
  <input type="text" id="datepicker" />
 
  <script type="module" src="/src/main.js"></script>
</body>
</html>

确保你的Vite配置文件（如vite.config.js或vite.config.ts）中包含了适当的插件来处理第三方库的依赖解析和打包。对于jQuery和jQuery UI，通常不需要额外的插件，因为它们是通过npm安装的，并且可以直接被Vite识别和处理。

对于GoJS，安装方法类似：




npm install gojs

然后在你的代码中导入并使用GoJS:




// main.js
import * as go from 'gojs';
 
// 创建一个GoJS图表
const $ = go.GraphObject.make;  // 创建图表的快捷方式
const myDiagram = $(go.Diagram, "myDiagramDiv");
 
// 配置你的图表
// ...
 
// 在页面上的某个div中渲染图表
myDiagram.nodeSelectionAdornmentTemplate = 
  $(go.Adornment, "Auto",
    $(go.Shape, "Rectangle", {
      fill: null,
      stroke: "blue",
      strokeWidth: 1.5,
      strokeDashArray: [4, 2]
    }),
    $(go.Placeholder)
  );
// ...

在HTML中：




<div id="myDiagramDiv" style="width:100%; height:500px;"></div>

确保你的Vite项目中有一个对应ID的div元素，以便GoJS可以在其中渲染图表。

- 阅读更多 -

html个人博客网站模板

System

2024-08-12

所有,jquery

以下是一个简单的HTML个人博客网站模板，包含了基础的HTML结构和必要的元素。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1><a href="index.html">个人博客</a></h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="archive.html">存档</a></li>
                <li><a href="contact.html">联系</a></li>
            </ul>
        </nav>
    </header>
 
    <main>
        <article>
            <header>
                <h2>博客文章标题</h2>
                <p>发布时间 | 分类 | 标签</p>
            </header>
            <section>
                <p>这里是博客文章的内容。</p>
                <!-- 更多内容 -->
            </section>
        </article>
    </main>
 
    <footer>
        <p>版权所有 &copy; 2023 个人博客</p>
    </footer>
</body>
</html>

这个模板包括了一个简单的HTML文档的基本结构，包括头部（header）、导航（nav）、主要内容区域（main）和底部（footer）。在<article>标签内，包含了一篇博客文章的结构，包括标题（h2）、元数据（p）和文章内容（section）。

要使这个模板工作，您需要创建一个style.css文件来定义样式，或者直接在<head>标签内使用内联样式。同时，您需要将这个模板中的链接替换为指向您网站实际资源的链接。

- 阅读更多 -

10.jQuery中请求预处理 $.ajaxPrefilter()

System

2024-08-12

所有,jquery

$.ajaxPrefilter() 是 jQuery 中用于设置全局 AJAX 事件处理程序的方法。它可以用来拦截所有 AJAX 请求，并对其进行预处理或后处理。

以下是一个使用 $.ajaxPrefilter() 方法的例子，它展示了如何为所有的 AJAX 请求添加一个全局的“loading”效果：




$(document).ready(function() {
    // 添加一个 AJAX 预处理器
    $.ajaxPrefilter({
        processData: true,
        type: 'GET',
        url: '*', // 匹配所有 URL
        beforeSend: function(xhr, settings) {
            // 显示加载动画
            $('#loading').show();
        },
        complete: function(xhr, status) {
            // 隐藏加载动画
            $('#loading').hide();
        }
    });
 
    // 发起 AJAX 请求
    $.ajax({
        url: 'your-endpoint.php',
        success: function(data) {
            // 处理响应数据
            console.log(data);
        }
    });
});

在这个例子中，我们使用 $.ajaxPrefilter() 创建了一个全局的 AJAX 预处理器，它会在每次 AJAX 请求发送前显示一个加载动画（例如，通过显示或隐藏一个具有 ID 为 'loading' 的元素），并在请求完成后隐藏这个加载动画。这样，我们就不需要在每个单独的 AJAX 请求中重复处理这个逻辑。

- 阅读更多 -