当前位置:首页 > jquery

js引入jquery

2026-04-08 07:19:06jquery

引入jQuery的方法

通过CDN引入

使用公共CDN(如Google或jQuery官方)直接引入jQuery库,将以下代码放入HTML文件的<head><body>标签内:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

如需指定版本(例如1.x兼容旧项目):

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

本地文件引入

  1. jQuery官网下载.min.js压缩版文件
  2. 将文件放入项目目录(如js/jquery.min.js
  3. 在HTML中添加引用:
<script src="js/jquery.min.js"></script>

npm/yarn安装(适用于现代前端项目)

在Node.js环境下通过包管理器安装:

npm install jquery
# 或
yarn add jquery

然后在模块化文件中引入:

import $ from 'jquery';

验证引入成功

在引入后添加测试代码:

js引入jquery

<script>
  $(document).ready(function(){
    console.log("jQuery版本:" + $.fn.jquery);
  });
</script>

注意事项

  • 生产环境建议使用min.js压缩版本
  • CDN引入需确保网络连接正常
  • 多个jQuery版本共存时需使用jQuery.noConflict()
  • 现代浏览器项目可考虑使用原生JavaScript替代部分jQuery功能

标签: jsjquery
分享给朋友:

相关文章

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

jquery.js

jquery.js

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等操作。以下是关于 jQuery.js 的核心信息和使用方法: 获…

jquery实现

jquery实现

以下是关于jQuery实现的常见应用场景及方法,分为核心功能模块说明: DOM操作 使用$()选择器获取元素后,可通过链式调用方法操作DOM: $('#element').html('新内容').…

jquery 添加

jquery 添加

jQuery 添加元素的方法 动态添加 HTML 内容 使用 append()、prepend()、after() 或 before() 方法可以在 DOM 中插入新元素。 // 在元素内部末尾…

jquery 对象

jquery 对象

jQuery 对象简介 jQuery 对象是通过 jQuery 选择器或方法创建的封装了 DOM 元素的集合。它是一个类数组对象,包含一组 DOM 元素并提供 jQuery 特有的方法链式操作。 创…

jquery切换

jquery切换

jQuery切换操作 jQuery提供了多种切换方法,用于在元素状态之间进行切换,包括显示/隐藏、类名切换、属性切换等。以下是常见的jQuery切换方法: 显示与隐藏切换 使用toggle()方法可…