在 Django 应用程序中使用 jQuery

Salman Mehmood 2024年2月15日
在 Django 应用程序中使用 jQuery

本文将讨论 jQuery 的简短介绍。我们还将学习如何在 Django 应用程序中使用 jQuery。

在 Django 应用程序中使用 jQuery

jQuery 是迄今为止世界上最受欢迎的 JavaScript 库,在全球 100 万个网站中的 80% 以上都可以找到。它是由 John Resig 于 2006 年发明的,jQuery 的流行是由 Web 开发市场的基本需求驱动的。

这篇简短的文章将演示如何将 jQuery 与 Django 应用程序连接起来。在这个应用程序中,我们创建了一个带有日期功能的表单,但是我们手动输入它存在一个问题,这对用户不太友好。

Django jQuery 示例 1

我们将添加一个日期选择器功能,使其更加用户友好,用户可以通过单击输入字段从日历中选择日期。这将是一个弹出式日历,我们可以在其中选择日期,使应用程序更易于使用。

我们将需要执行以下几个步骤来实现它:

  • 首先是从这个网站下载 jQuery 并选择当前版本,因为旧版本不能很好地与 jQuery UI 配合使用。我们将使用当前版本的 jQuery 并下载压缩文件。
  • 通过单击,我们将在浏览器上打开源代码,另存为,然后导航到我们拥有静态断言的位置。

    Django jQuery 示例 2

  • 这里下载 jQuery UI。我们需要单击主题选项卡,向下滚动,然后单击左侧的图库按钮。
  • 选择你喜欢的主题,然后单击下载按钮。到达下一页后,我们将其下载到静态目录中。

    Django jQuery 示例 3

  • 打开代码所在的 HTML 文件,然后在底部某处写入代码。这些都是 CSS 文件;通常,我们喜欢将 CSS 放在页面顶部。

    我们使用的是 jquery-3.6.0.min 版本。如果你正在阅读本文,你可能需要更改 jQuery 版本或 jQuery UI。

    Django jQuery 示例 4

  • 在我们的例子中,我们将它保留在 JS 脚本所在的底部。

    Django jQuery 示例 5

  • 现在,我们必须在位于静态目录中的 JS 文件夹中创建一个 JS 文件,将这段代码写入 JS 文件中并保存。如果你想使用 jQuery,你可以像我们一样创建一个单独的文件来编写 jQuery 代码。

    Django jQuery 示例 6

  • 现在,我们将在编写 JS 脚本的 HTML 文件中编写一个简短的脚本。如果你使用单独的文件,你可以在脚本路径中指定名称,正如我们在本例中定义的 custom.js

    Django jQuery 示例 7

  • 让我们看看它是否有效。我们可以看到我们可以从日期选择器中选择日期。

    Django jQuery 示例输出

注意:本文仅用于演示目的,但代码和方法与在 Django 中使用 jQuery 相同。你可以将 jQuery 用于任何目的。

作者: Salman Mehmood
Salman Mehmood avatar Salman Mehmood avatar

Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.

LinkedIn