jQuery 下载APP
章节索引 :

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.(jQuery 官方介绍)

1. 什么是 jQuery

jQuery 是一个使用 JavaScript 编写的库,可以让开发者用更少的代码来完成业务逻辑。

许多年前前端的技术没有现在这么丰富,jQuery 和 JavaScript 也会被经常称为两个技术,因为使用 jQuery 完全可以替代掉使用原生的 JavaScript 操作 DOM、处理动画、处理 AJAX 等,这让两者之间的概念变得模糊。

可以对比一下删除一个节点的操作:

// 使用JavaScript
var el = document.getElementById('element');

el.parentNode.removeChild(el);

// 使用 jQuery
$('#element').remove();

两者的区别一比较就出来了,jQuery 封装一层 DOM 操作,将原生的 DOM 方法向上层抽象,提供了一套更简洁的 API 来操作 DOM,同时也针对各个浏览器做了兼容性处理,如事件对象、事件的绑定方式等。

2. 引入 jQuery

jQuery 可以直接从官网下载,也可以用 npm 安装,也可以使用 bower 等这些包管理工具,本篇幅采用 CDN 的形式引入,本身 jQuery 就是一个 .js 文件,只需引入就能使用。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

引入之后就可以在全局下通过 jQuery 或者 $ 调用 jQuery 了。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  console.log($);
  console.log(jQuery);

  console.log($ === jQuery); // 输出:true
</script>

图片描述

3. 使用 jQuery

jQuery 使用 $ 或者 jQuery 来生成一个 jQuery 对象,这里统一使用 $。

实例演示
预览 复制
复制成功!
<div class="element">

</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $('.element').html('<p>这里是用 jQuery 插入的 HTML</p>');
</script>
运行案例 点击 "运行案例" 可查看在线运行效果

图片描述

$ 可以接受一个 CSS 规范的选择器,用来选择元素,html 方法相当于设置 DOM 节点的 innerHTML 属性。

在 DOM 相关章节有提到,如果使用 querySelector 来选择节点,碰到节点不存在的情况下,会返回 null,这样就需要一层判断, jQuery 已经处理好了这些情况。

<div>DOM节点</div>
<div class="element">

</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $('.ele').html('<p>这里是用 jQuery 插入的 HTML</p>');

  console.log('不会影响正常程序执行');
</script>

图片描述

其可以接受的参数不仅仅是 CSS 选择器,也可以是一个原生 DOM 节点,一段 HTML 字符串等。

jQuery 选择 $ 作为作为入口名称,一部分是因为简单,原生 DOM 提供的选择 DOM 节点的方法都是一长串,另一个原因是 $ 本身的发音 dollarDOM 的发音接近。

4. 小结

jQuery 提供了一系列的方法使得操作 DOM 变得更简单,更具体的内容可以参考官方官方文档

现代框架的涌现,使得 jQuery 被使用到的场景也在变少,也有许多文献有 不应将 jQuery 与现代框架一起使用 的说法。其实 jQuery 在压缩后非常小,如果有需要完全可以考虑引入。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源