【JavaScript】jquery的导入方式有两种:本地导入和线上导入

news/2024/7/10 23:40:56 标签: javascript, jquery, 开发语言, 前端

前言

jQuery是一个用来代替JavaScript来快捷书写前端脚本语言的库,jQuery可以大大的简化复杂的js代码,使开发人员专注于实现页面的效果。

导入方式有两种

jQuery的导入方式有两种,一种是本地导入,一种是利用超链接导入。

方法一:本地导入

  • 进入 jQuery 的官方网站:https://jquery.com
  • 点击 Download jQuery

在这里插入图片描述

  • 点下图链接,可以看到jquery的源码,如下:

在这里插入图片描述

  • 直接ctrl+A,选中所有的 jQuery 的源码,在VScode新建一个txt文件,将源码拷贝到其中,然后修改后缀名为.js即可。
    在这里插入图片描述

  • 然后,在要使用jquery的页面引入这个.js文件,代码如下:

javascript"><script src="你的.js文件路径"></script>

在这里写 jquery 代码

javascript"><script>
	//在此书写你的jQuery代码
</script>
  • 注意,一定要先引入 jQuery 源码,再引入自己写的 jQuery 代码,因为页面的加载顺序是从上到下加载,如果浏览器会先加载你的 jQuery 代码再加载 jQuery 库,造成你的 jQuery 代码会被认为是错误书写格式,无法实现效果。

方法二:在线上导入有两种方法

  • 在使用jQuery库之前,需要先引入它。有两种方法可以在线引入 jQuery 库:从官方网站直接下载或从CDN下载。

1. 从官方网站下载:

  • 在下载jQuery库之前,需要访问官方网站,并选择要下载的版本。然后在HTML代码中添加以下内容:
javascript"><script src="jquery-3.6.0.min.js"></script>
  • 这将从文件系统中加载 jQuery 库,并将其添加到HTML页面中。

2. 从CDN下载:

  • 许多大型互联网公司提供了CDN服务,其中包括谷歌,微软,jQuery和CDNJS等。
  • 这里我们以谷歌CDN为例,在HTML代码中添加以下内容:
javascript"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  • 这将从谷歌CDN服务器上下载jQuery库,并将其添加到HTML页面中。

补充

  • 通过在 script 的 src 属性中写一个网址来导入在线的 jQuery 代码。
  • 现在应用 jQuery 的网站非常非常多,可以在其他网站上扒一个 jQuery 代码链接
  • 浏览器会在加载之前使用jQuery的网站时就预先下载过jquery,因此到了我们这里就不用再次下载了,就算我们的jQuery版本是一个新的没被浏览器加载过的版本,jQuery的代码下载也会进行的很快
  • 但是,如果你还是担心影响加载速度,本地导入jQuery文件确实是最好的办法。
  • 导入在线 jQuery:
javascript"><script src=""></script>
<script>
	//在此书写你的jQuery代码
</script>

http://www.niftyadmin.cn/n/4929805.html

相关文章

go struct 的常见问题

go struct 的常见问题 1. 什么是struct&#xff1f;2. 如何声明、定义和创建一个struct&#xff1f;3. struct和其他数据类型&#xff08;如数组、切片、map等&#xff09;有什么区别&#xff1f;4. 如何访问struct字段&#xff1f;5. struct是否支持继承&#xff0c;是否支持重…

vue2.7如何使用vue-i18n

版本&#xff1a; vue&#xff1a;2.7.0 vue-i18n&#xff1a;8.28.2 一、下载 npm i vue-i18n8.28.2二、新建 新建一个文件&#xff0c;例如&#xff1a;lang&#xff0c;项目结构如下&#xff1a; index.js&#xff1a; import Vue from vue import VueI18n from vue-i18n…

如何预防ssl中间人攻击?

当我们连上公共WiFi打开网页或邮箱时&#xff0c;殊不知此时可能有人正在监视着我们的各种网络活动。打开账户网页那一瞬间&#xff0c;不法分子可能已经盗取了我们的银行凭证、家庭住址、电子邮件和联系人信息&#xff0c;而这一切我们却毫不知情。这是一种网络上常见的“中间…

css常用样式和不常用样式

文章目录 1、hover鼠标变小手2、ul去除点3、文字溢出显示省略号&#xff08;1&#xff09;一行文字溢出显示省略号&#xff08;2&#xff09;多行文字溢出显示省略号 4、文字单词超出&#xff08;1&#xff09;文字单词超出换行&#xff08;word-wrap&#xff09;&#xff08;2…

UNET 架构综合指南 | 掌握图像分割--附源码

介绍 在令人兴奋的计算机视觉主题中,图像包含许多秘密和信息,区分和突出显示项目至关重要。图像分割是将图像分割成有意义的区域或对象的过程,在从医学成像到自动驾驶和对象识别等各种应用中至关重要。准确和自动的分割长期以来一直面临挑战,传统方法经常在准确性和效率方…

(el-switch)操作(不使用 ts):Element-plus 中 Switch 将默认值修改为 “true“ 与 “false“(字符串)来控制开关

Ⅰ、Element-plus 提供的 Switch 开关组件与想要目标情况的对比&#xff1a; 1、Element-plus 提供 Switch 组件情况&#xff1a; 其一、Element-ui 自提供的 Switch 代码情况为(示例的代码)&#xff1a; // Element-plus 自提供的代码&#xff1a; // 此时是使用了 ts 语言环…

[Docker精进篇] 详细配置和部署镜像(一) 文末送书

前言&#xff1a; 容器提供了将应用程序的代码、运行时、系统工具、系统库和配置打包到一个实例中的标准方法。 文章目录 一. 认识Docker1️⃣docker服务端2️⃣docker客户端3️⃣docker仓库 二. 使用Docker1️⃣卸载旧的2️⃣安装 yum-utils3️⃣添加阿里云镜像&#xff1a;4️…

【C++中的pair类型】用于将两个不同类型的元素组合成一个单元,即key-value

文章目录 1、定义和初始化2、使用方式 1、定义和初始化 pair<type1, type2> p; // 初始化方法有3种 pair<int, string> p make_pair(1, "one"); pair<int, string> p {1, "one"}; pair<int, string> p(1, "one");2、…