【JS】JS中的jQuery库简介及使用方法

jQuery 是一个流行的 JavaScript 库，用于简化 JavaScript 编程。它提供了许多便捷的方法来处理 DOM 操作、事件处理、动画效果等，使得 JavaScript 开发变得更加简单和高效。

要使用 jQuery，首先需要在 HTML 文档中引入 jQuery 库。您可以从 jQuery 官方网站（https://jquery.com/）下载 jQuery 库，或者使用 CDN（内容分发网络）提供的 jQuery 文件。 下图是google的CDN，下面介绍如何将CDN提供的jQuery文件保存到本地以便离线使用。

首先打开图中src中的网址，打开网址后全选网页文字复制，在本地项目中新建一个 jQuery.js 文件，将网址中文字粘贴到本地 jQuery.js 文件，如图所示就可以了。 保存之后就成功将jQuery文件保存到本地了，接下来我们可以直接引用本地的jQuery.js文件来使用jQuery，html引用jQuery方式如下：在中导入jQuery代码（需要注意与html文件的相对路径）。

与css相同，为了方便阅读，我们在编写项目时经常会将html代码与jQuery代码分开，分别保存为html文件和js文件。这时就需要在html中导入自己的js文件，导入方式上节相同，只需改变js文件名称。

jQuery的基础语法是：$(selector).action()。其中美元符号定义 jQuery，选择符（selector）“查询”和“查找” HTML 元素，jQuery 的 action() 执行对元素的操作。 示例： $(this).hide() - 隐藏当前元素。

$(“p”).hide() - 隐藏所有段落。

$(“.test”).hide() - 隐藏所有 class=“test” 的所有元素。

$(“#test”).hide() - 隐藏所有 id=“test” 的元素。

文档就绪函数是用来确保在操作 DOM 元素之前，文档已经完全加载和解析完成。这样可以避免在文档加载过程中对尚未完全加载的元素进行操作，从而避免出现错误或意外行为。 完整版写法为：

简化写法(常用写法)为：

常用的jQuery选择器与css选择器类似，具体选择器及其使用方法如下表：

元素ID选择器$(“#content”)选择所有id = "content"的元素类选择器$(“.myClass”)选择类名为 “myClass” 的元素属性选择器$(“[name=‘myName’]”)选择具有 name 属性为 “myName” 的元素选择所有元素$(“*”)选择所有元素选择当前元素$(this)选择当前 HTML 元素选择多个元素$(“p, div, span”)选择所有

、 和 元素子元素选择器$(“parent > child”)选择 parent 元素下的直接子元素 child相邻兄弟选择器$(“prev + next”)选择 prev 元素后的相邻兄弟元素 next兄弟选择器$(“prev ~ siblings”)选择 prev 元素后的所有兄弟元素 siblings伪类选择器$(“li:nth-child(2)”)选择列表中第二个 元素 3.4 事件绑定函数

在 jQuery 中，事件绑定函数用于为选定的元素添加事件监听器，以便在特定事件发生时执行相应的操作。通过事件绑定函数，可以为页面元素添加交互功能和响应用户操作的能力。 在JavaScript中，有三种常用的绑定事件的方法，以buttton按钮的click点击事件为例： 方式一 语法：$("选择器").事件(function(){/*选择器的事件触发后运行的函数*/})。示例：

方式二 将on作为统一事件名，括号里面加入具体事件，语法：$("选择器").on('具体事件',function(){/*选择器的事件触发后运行的函数*/})示例：

方式三 由于js可以动态添加元素，故此方式用于绑定未来添加的事件。语法为：$("body").on("具体事件","选择器",function(){选择器的事件触发后运行的函数}) 示例：

本文简要介绍了jQuery如何入门，具体项目的使用仍需要大家共同探索~