【jQuery】jQuery 简介 ( JavaScript 库简介 | jQuery 核心概念、特点

文章目录

[一、JavaScript 库简介](#一、JavaScript 库简介)
- [1、JavaScript 库简介](#1、JavaScript 库简介)
- [2、常见的 JavaScript 库](#2、常见的 JavaScript 库)
[二、jQuery 简介](#二、jQuery 简介)
- [1、jQuery 核心概念](#1、jQuery 核心概念)
- [2、jQuery 特点](#2、jQuery 特点)
[三、jQuery 使用](#三、jQuery 使用)
- [1、jQuery 下载地址](#1、jQuery 下载地址)
- [2、jQuery 下载并使用](#2、jQuery 下载并使用)
- [3、代码示例 - 默认代码](#3、代码示例 - 默认代码)
- [4、代码示例 - 隐藏盒子](#4、代码示例 - 隐藏盒子)
- [5、代码示例 - DOM 加载完毕后隐藏盒子](#5、代码示例 - DOM 加载完毕后隐藏盒子)

一、JavaScript 库简介

1、JavaScript 库简介

JavaScript 库是一组预先编写的、可复用的 JavaScript 代码集合 , 其中封装了开发中的常用功能 , 如 : DOM 操作、网络请求、数据处理、动画效果等 ;

原生 JavaScript 就像一堆零散的工具 ( 锤子、螺丝刀 ) , 而 JS 库是把常用工具打包好的套装 , 开发者不用从零编写基础功能 , 只需调用现成的方法 , 大幅提升开发效率 ;

2、常见的 JavaScript 库

常见的 JavaScript 库 :

DOM 操作、基础工具库 : 这是最基础、高频使用的 JS 库 ;
- jQuery : 是 DOM 操作的工具库 , 用于简化 DOM 操作、统一跨浏览器兼容问题、便捷处理事件和 AJAX 请求 ;
- Zepto.js : 轻量版 jQuery ( ~8KB ) , 适配移动端 , 适用于移动端 H5 页面 ;
- Cash DOM : 超轻量 ( ~3KB ) , API 兼容 jQuery , 无冗余功能 , 适用于追求极致体积的轻量页面 ;
数据处理工具库 :
- Lodash : 高性能 , 封装数组、对象、函数常用操作 ( 去重、深拷贝、防抖节流 ) ;
- Ramda : 函数式编程工具库 , 纯函数、柯里化 , 适用于函数式开发风格的项目 ;
网络请求库 :
- Axios : Promise 化 , 支持浏览器、Node.js , 拦截器、取消请求、错误处理 , 适用于前后端交互场景 ;
- SuperAgent : 轻量 , API 简洁 , 支持链式调用的网络请求库 ;
日期时间处理库 :
- Day.js : 轻量 ( ~2KB ) , API 兼容 Moment.js , 无依赖 , 国际化的日期处理库 ;
可视化库 :
- ECharts : 百度开源 , 开箱即用 , 图表类型丰富 ( 柱状图、折线图、地图、数据大屏 ) , 适用于后台管理系统、数据可视化大屏场景 ;
表单处理、验证库 :
- VeeValidate : 适配 Vue , 轻量级 , 验证规则灵活的表单验证库 , 适用于 Vue 项目的表单验证 ;
- Formik : 适配 React , 简化表单状态管理、验证、提交 , 适用于 React 项目的表单处理 ;
动画、交互库 :
- GSAP : 高性能动画库 , 支持 DOM/SVG/Canvas 动画 , 移动端流畅 , 适用于复杂动画需求 , 如 H5 活动、交互动效 ;

二、jQuery 简介

1、jQuery 核心概念

jQuery 是 2006 年发布的一款轻量级、开源的 JavaScript 库 , 核心定位是简化前端开发中的 DOM 操作、事件处理、AJAX 请求 , 其核心理念是 " Write Less, Do More " , 使用更少的代码完成更多的功能 ;

jQuery 中的 j 表示 JavaScript , Query 表示查询 , 其含义是查询 JavaScript 脚本 , 将 js 中的 DOM 操作封装在了 jQuery 中 , 可以快速查询和使用 DOM 功能 ;

2、jQuery 特点

jQuery 特点 :

轻量开源免费 : jQuery 是轻量级的 JS 库 , 核心文件只有几十 kb , 该库开源 , 且免费 ;
操作简介 : 实现了极致简洁的 DOM 操作 , 原生 JavaScript 操作 DOM 代码繁琐 , 而 jQuery 基于 CSS 选择器语法 , 能快速定位和操作元素 ; 如 : $('#box') 可获取 id 为 box 的元素 , JS 原生 document.getElementById('box') ;
浏览器兼容 : jQuery 内部封装了不同浏览器的兼容逻辑 , 兼容早期浏览器 ;
链式调用 : 链式调用允许连续调用多个方法 , 如 : $('#box').css('color','red').text('Hello') ;
隐式迭代 : 隐式迭代能自动遍历多个元素 , 如 : $('li').css('color','blue') 无需写循环 , 大幅减少代码量 ;
功能封装 : 除了 DOM 操作 , 还封装了事件处理 click()/on()、AJAX 请求 $.get()/$.ajax() 、动画效果 show()/animate() 等常用功能 ;
插件生态 : 支持插件扩展 , 基于 jQuery 开发了大量插件 , 无需从零开发复杂功能 , 直接复用 , 如 : 轮播图、表单验证、日历组件 ;

三、jQuery 使用

1、jQuery 下载地址

jQuery 官网 : https://jquery.com/

jQuery 下载地址 : https://jquery.com/download/ , 可下载压缩版和开发版 ;

jQuery 压缩版本 : https://code.jquery.com/jquery-3.7.1.min.js , 压缩版本经过压缩优化 , 体积较小 , 但是可读性很差 ;

jQuery 开发者版本 : https://code.jquery.com/jquery-3.7.1.js , 开发者版本可读性好 , 带注释 ;

2、jQuery 下载并使用

下载 jQuery : 将 https://code.jquery.com/jquery-3.7.1.min.js 页面的 jQuery 脚本全部选中 , 然后拷贝到本地工程目录下的 js/jquery.min.js 脚本中 ;

jQuery 拷贝后 , 发现代码只有 1 行 , 拷贝后的文件大小 86 kB ;

3、代码示例 - 默认代码

代码示例 :

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

展示结果 :

4、代码示例 - 隐藏盒子

下面的代码中 , 调用 $('div').hide(); jQuery 代码隐藏 div 盒子 , 但是 js 代码必须写在 div 后面 , 否则隐藏盒子效果无效 ;

代码示例 :

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        // 隐藏 div 盒子
        $('div').hide();
    </script>
</body>

</html>

展示结果 :

5、代码示例 - DOM 加载完毕后隐藏盒子

下面的代码中 , 调用 jQuery 代码隐藏 div 盒子 , 将函数代码写在 $(document).ready() 中 , 就是在 Document 加载完成后执行的内容 ;

核心代码 :

javascript 复制代码

        // DOM 加载完毕后执行如下 js 代码
        $(document).ready(function() {
            $('div').hide();
        })

上述形式有简易写法 :

javascript 复制代码

		// DOM 加载完毕后执行如下 js 代码
        $(function() {
            $('div').hide();
        })

代码示例 :

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        // DOM 加载完毕后执行如下 js 代码
        // $(document).ready(function() {
        //     $('div').hide();
        // })
        
        // DOM 加载完毕后执行如下 js 代码 - 简易写法
        $(function() {
            $('div').hide();
        })
    </script>
</head>

<body>
    <div></div>
</body>

</html>

展示结果 :

【jQuery】jQuery 简介 ( JavaScript 库简介 | jQuery 核心概念、特点 | jQuery 下载并使用 )

文章目录

一、JavaScript 库简介

1、JavaScript 库简介

2、常见的 JavaScript 库

二、jQuery 简介

1、jQuery 核心概念

2、jQuery 特点

三、jQuery 使用

1、jQuery 下载地址

2、jQuery 下载并使用

3、代码示例 - 默认代码

4、代码示例 - 隐藏盒子

5、代码示例 - DOM 加载完毕后隐藏盒子