开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 24 天，点击查看活动详情

引言

jquery虽然在现在已经是一门相对比较老旧的技术栈了，不过这次因为蓝桥杯的原因，还是捡起来重温了一下。

什么是jquery

jQuery是一个流行的JavaScript库，提供了许多方便的功能和方法，用于操作HTML文档、处理事件、执行动画效果等。

jQuery的主要特点包括：

1. 简洁：使用简单，能够更快速地开发出优秀的JavaScript应用程序。
2. 跨浏览器兼容性：封装了常见的浏览器兼容性问题，能够在各种不同的浏览器上提供一致的表现。
3. 动态效果：提供了丰富的动画效果，包括滑动、淡入淡出、缩放等。
4. AJAX支持：支持通过AJAX从服务器获取数据，并在网页上进行动态更新。

jQuery可以通过CDN引入，也可以下载后放在项目中使用。在HTML页面中，需要先引入jQuery库，然后就可以使用其提供的方法和函数来操作DOM元素、处理事件、执行动画效果等，从而快速地构建交互性和动态性的Web应用程序。

jQuery的常见语法可以分为两种：选择器和方法。

一、选择器

选择器用于选取HTML元素，类似于CSS中的选择器。以下是jQuery中常见的选择器：

1. ID选择器：使用#号选取页面中指定ID的元素。

$("#myId")

2. 类选择器：使用.号选取页面中指定类名的元素。

$(".myClass")

3. 标签选择器：选取指定标签的元素。

$("div")

4. 后代选择器：选取指定元素的后代元素。

$("ul li")

5. 属性选择器：选取指定属性的元素。

$("input[name='username']")

二、方法

方法用于操作选取的HTML元素，以下是jQuery中常见的方法：

1. 获取和设置元素内容：

• text()：获取或设置元素文本内容。

$("p").text("新的文本内容"); // 设置元素文本内容
var content = $("p").text(); // 获取元素文本内容

html()：获取或设置元素的HTML内容。

$("div").html("<p>新的HTML内容</p>"); // 设置元素HTML内容
var content = $("div").html(); // 获取元素HTML内容

val()：获取或设置表单元素的值。

$("input[type='text']").val("新的表单值"); // 设置表单值
var value = $("input[type='text']").val(); // 获取表单值

2. 元素属性操作：

• attr()：获取或设置元素属性。

$("img").attr("src", "newimage.jpg"); // 设置元素src属性
var src = $("img").attr("src"); // 获取元素src属性值

• prop()：获取或设置元素属性。

$("input[type='checkbox']").prop("checked", true); // 设置元素checked属性
var isChecked = $("input[type='checkbox']").prop("checked"); // 获取元素checked属性值

3. 事件操作：

• on()：绑定元素事件。

$("button").on("click", function() {
  // 点击按钮后执行的代码
});

off()：解绑元素事件。

$("button").off("click");

4. 动画效果：

• hide()：隐藏元素。

$("p").hide();

show()：显示元素。

$("p").show();

fadeIn()：淡入元素。

$("p").fadeIn();

fadeOut()：淡出元素。

$("p").fadeOut();