jQuery 简介

jQuery 是用于简化 HTML DOM 1 操作的 JavaScript 库，首发于 2006 年 8 月 26 日，现在（2021 年）已经 15 岁了。从 2019 年 5 月起，前 1000 万流行的网站里有 73% 使用了 jQuery。jQuery 的引入方法很多，我在本文采用 CDN 引入。

1

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

jQuery 常用操作

获取元素

jQuery 获取元素的方式非常简单，将 CSS 选择器填入参数即可。

1
2
3

$(document)  // 获取整个文档
$("#id1")    // 获取 id 为 id1 的元素
$(".class1") // 获取 class 为 class1 的元素

添加元素

1
2
3
4

$("#title").append("text");     // 在元素内容末尾添加内容
$("#title").prepend("text");    // 在元素内容开头添加内容
$("#title").after("<p>Hi</p>")  // 在元素后面添加内容
$("#title").before("<p>Hi</p>") // 在元素前面添加内容

取值与赋值

jQuery 使用同一个函数来取值和赋值，根据参数数量进行不同操作。

1
2
3
4

$('#title').html()                // 获取 #title 的值
$('#title').html('another title') // 修改 #title 的值
$('p').width()                    // 获取段落宽度
$('p').width(100)                 // 修改段落宽度

链式操作

jQuery 的每个操作都会返回 jQuery 对象，所以可以进行连续操作。

1
2
3
4
5
6
7

$('div')       // 选择 div 元素
  .find('p')   // 查找 div 里的 p 元素
  .eq(1)       // 选择第 2 个元素
  .html('hi')  // 把第 2 个元素内容修改为 hi
  .end()       // 退回到 .find('p')
  .eq(0)       // 选择第 1 个元素
  .html("hey") // 将第 1 个元素内容修改为 hey

参考资料

  1. DOM 的全称是 Document Object Model ↩︎