jQuery Api 学习（一、jQuery 概念和 jQuery 文档）

最新推荐文章于 2024-05-06 00:22:59 发布

「已注销」

最新推荐文章于 2024-05-06 00:22:59 发布

阅读量383

点赞数 2

分类专栏： # jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Ares5kong/article/details/120841609

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一、jQuery 概念
二、jQuery 文档
- 1. jQuery 函数怎么学习
- 2. jQuery 文档

一、jQuery 概念

1. 概念

jQuery 并不是一门语言，而是 Javascript 的工具库，它将常用的复杂操作，封装成一个个函数，我们使用时只需要
调用函数即可，极大的简化了代码量，提高了编码效率，就像官方对 jQuery 的定义 write less,do more 一样

2. 原生 JS 和 jQuery 对比

分别用 JS 和 jQuery 实现 <按钮点击后 div 显示或隐藏> 的功能

(1) 原生 Javascript 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <input type="button" value="显示或隐藏" />
    <div></div>
    <script>
        let div = document.querySelector('div')
        let btn = document.querySelector('input[type=button]')
        btn.onclick = () => {
            div.style.display = div.style.display === 'none'
                ? div.style.display = 'block'
                : div.style.display = 'none'
        }
    </script>
</body>
</html>

(2) jQuery 函数库实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <input type="button" value="显示或隐藏" />
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $('input[type=button]').click(() => {
            $('div').toggle()
        })
    </script>
</body>
</html>

虽然只是一个简单的案例，但是也能看出 jQuery 带来的便利，它将显示与隐藏这种常见功能封装成一个函数供我们
直接调用，减少了我们的代码量

3. 使用 jQuery

jQuery 的本质就是，有人用 Javascript 在一个 JS 文件中写了各种各样的实用函数，最后将这个 JS 文件命名为
jquery.js，仅此而已。明白了其本质就是一个 JS 文件，那么只要得到这个 JS 文件并在项目中引用就可以使用了。

方式一：本地文件

1. 首先需要先得到 jQuery 文件，可以在 jQuery 官方地址下载
请添加图片描述
开发版本：jQuery 源码文件，未经压缩，格式美观，便于阅读

上线版本：压缩后的 jQuery 文件，文件更小，不利于阅读

选择适合自己的版本，点击链接就可以下载

问题：直接打开，而非下载

有些浏览器点击链接后不会进行下载，而是会把 jQuery 源码文件打开，碰见这种情况时，直接新建 JS 文件，然后
把浏览器打开的内容复制进去就可以（新建 JS 文件 → 浏览器内 ctrl + A → ctrl + C → JS 文件内 ctrl + V ）复制 jQuery

2. 得到 jQuery 文件后, 只需要在项目内，像引入其他 Javascript 文件一样引入即可
<script src="jquery-3.6.0.js"></script>

方式二：CDN 加速

CDN 简单理解就是，有大企业提供了可以公共访问的服务器，服务器内有各种各样的资源, 服务器以集群的方式
遍布各地，当浏览器访问时，会优先选择离浏览器客户端地址更近的服务器，加快访问速度，而且资源服务器都是集
群负载部署，更稳定

整理几个比较好的 CDN 服务器：
猫云 CDN
七牛云 CDN
又拍云 CDN

以猫云 CDN 为例演示项目中如何引用

1. 打开猫云 CDN 网站，并搜索要用的资源
请添加图片描述

2. 点击搜索结果，进入版本选择页面，挑选合适的版本，然后点击复制链接或直接复制 script 标签
请添加图片描述
3. 在项目中将 <script> 标签的地址指向 CDN 地址
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>