带你玩一玩--＞ jQuery(一)

前言

​  最近在学习 jQuery 的知识，总结成笔记分享给大家，如果你也对 jQuery 感兴趣，请持续关注我，我带你一步一步走上人生巅峰。😏

一、jQuery 是什么？

​  首先我们需要先了解 JavaScript 这门语言，阅读到本篇文章我就当大家对 JavaScript 语言有一定的了解了，就不过多啰嗦了。

​  我们需要知道 jQuery 是一个 JavaScript 库，极大的简化了 JavaScript 编程，很容易学习。

1.1 什么是 JavaScript 库？

​  程序员们用 JavaScript 语言编写高级程序设计时，通常很困难也很耗时，效率低下，这时，有些大佬为了解决这个痛点，就写了许多的 JavaScript 库，也被称为 JavaScript 框架。

​  它是一个封装好的特定的集合（方法和函数），包括动画、DOM 操作以及 Ajax 处理。

简单理解： 它就是一个 JS 文件，里面对我们原生的 js 代码进行了封装，存放到里面，这样我们就可以快速高效的使用这些封装好的功能了。

• 常见的 JavaScript 库
  • jQuery
  • Prototype
  • YUI
  • Dojo
  • Ext Js
  • zepto

以上这些库都是对原生 JavaScript 语言的封装，内部都是用 javaScript 实现的，本篇文章主要带大家学习 jQuery ，对于其他的库，感兴趣的同学可以查询资料自己学习一下。

1.2 jQuery 的概念

总结如下

• 它是一个快速、简洁的 JavaScript 库，设计宗旨是“write Less, Do More”，意思是少写，多做，从字面上就很好理解了吧，倡导写更少的代码，做更多的事情。
• j：JavaScript ，Query：查询，意思就是查询 js , 把 js 中的 DOM 操作做了封装，我们可以快速的查询使用里面的功能。
• jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作，事件处理，动画设计和 Ajax 交互。
• 学习 jQuery 本质就是学习调用这些函数(方法)。
• jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

看下图比喻成我们生活中的样子，可以说是非常的形象了

1.3 jQuery 的优点

• 轻量级，核心文件才几十 kb，不会影响页面加载速度。
• 跨浏览器兼容，基本兼容了现在主流的浏览器。
• 链式编程、隐式迭代。
• 对事件、样式、动画支持，大大简化了 DOM 操作。
• 支持插件扩展开发，有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等。
• 免费、开源。

二、jQuery 的基本使用

2.1 下载 jQuery

• 官网地址：jQuery

• 各个版本的下载：jQuery不同版本

• 版本介绍：

  • 1x：兼容 IE 678 等低版本浏览器，官网不再更新。
  • 2x：不兼容 IE 678 等低版本浏览器，官网不再更新。
  • 3x：不兼容 IE 678 等低版本浏览器，是官网主要更新维护的版本。

这里我一步一步带大家如何下载并使用 jQuery

1. 首先 打开官网地址 jQuery， 点击箭头指示位置。

   

2. 跳转到此界面，有两种下载方式，其他的先不用管，带大家下载未压缩的开发 jQuery 3.6.0，点击链接。

   

3. 点击后会看到如下界面，按键盘 Ctrl + A 全选，再按 Ctrl + C 复制。

   

   4. 在 VS Code 编辑器创建一个 js 文件，将刚才复制的粘贴。

      

以上步骤就已经完成了 jQuery 的下载

2.2 体验 jQuery

步骤

1. 创建一个 html 文件，引入刚才的 jQuery 文件。

   

2. 那么我们简单操作，写一个按钮和一个盒子，实现点击按钮让盒子隐藏的效果

   • html

     <button>隐藏盒子</button>
     <div class="box"></div>
     

   • css

     .box {
         width: 200px;
         height: 200px;
         background-color: red;
     }
     

   • JavaScript

     // 引入 jQuery 文件
     <script src="./jQuery.js"></script>
     
     <script>
         // 点击按钮
         $('button').click(function () {
             // 盒子隐藏
             $('.box').hide()
         })
     </script>
     

   • 效果如下

     

好了，到这里就已经完成了对 jQuery 的基本使用了，当然 jQuery 库中还有很多很多的函数(方法)，我会在本专栏的下一篇文章中继续介绍，敬请期待😋