jQuery简介及使用方法
- jQuery简介
- 如何使用jQuery
- 1 导入jQuery库
- 2 编写自己的jQuery文件
- 3 jQuery语法
- 3.1 基础语法
- 3.2 文档就绪函数
- 3.3 选择器
- 3.4 事件绑定函数
- 结语
jQuery简介
jQuery 是一个流行的 JavaScript 库，用于简化 JavaScript 编程。它提供了许多便捷的方法来处理 DOM 操作、事件处理、动画效果等，使得 JavaScript 开发变得更加简单和高效。
如何使用jQuery
1 导入jQuery库
要使用 jQuery，首先需要在 HTML 文档中引入 jQuery 库。您可以从 jQuery 官方网站（https://jquery.com/）下载 jQuery 库，或者使用 CDN（内容分发网络）提供的 jQuery 文件。
下图是google的CDN，下面介绍如何将CDN提供的jQuery文件保存到本地以便离线使用。
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
首先打开图中src中的网址，打开网址后全选网页文字复制，在本地项目中新建一个 jQuery.js 文件，将网址中文字粘贴到本地 jQuery.js 文件，如图所示就可以了。
保存之后就成功将jQuery文件保存到本地了，接下来我们可以直接引用本地的jQuery.js文件来使用jQuery，html引用jQuery方式如下：在<head>中导入jQuery代码<script src="jQuery.js"></script>（需要注意与html文件的相对路径）。
2 编写自己的jQuery文件
与css相同，为了方便阅读，我们在编写项目时经常会将html代码与jQuery代码分开，分别保存为html文件和js文件。这时就需要在html中导入自己的js文件，导入方式上节相同，只需改变js文件名称。
3 jQuery语法
3.1 基础语法
jQuery的基础语法是：$(selector).action()。其中美元符号定义 jQuery，选择符（selector）“查询”和“查找” HTML 元素，jQuery 的 action() 执行对元素的操作。
示例：
$(this).hide() - 隐藏当前元素。
$(“p”).hide() - 隐藏所有段落。
$(“.test”).hide() - 隐藏所有 class=“test” 的所有元素。
$(“#test”).hide() - 隐藏所有 id=“test” 的元素。
3.2 文档就绪函数
文档就绪函数是用来确保在操作 DOM 元素之前，文档已经完全加载和解析完成。这样可以避免在文档加载过程中对尚未完全加载的元素进行操作，从而避免出现错误或意外行为。
完整版写法为：
$(document).ready(function(){
// jQuery functions go here
})
简化写法(常用写法)为：
$(function(){
// jQuery functions go here
})
3.3 选择器
常用的jQuery选择器与css选择器类似，具体选择器及其使用方法如下表：
| 选择器 | 示例 | 简介 |
|---|---|---|
| 元素选择器 | $(“p”) | 选择所有<p> 元素 |
| ID选择器 | $(“#content”) | 选择所有id = "content"的元素 |
| 类选择器 | $(“.myClass”) | 选择类名为 “myClass” 的元素 |
| 属性选择器 | $(“[name=‘myName’]”) | 选择具有 name 属性为 “myName” 的元素 |
| 选择所有元素 | $(“*”) | 选择所有元素 |
| 选择当前元素 | $(this) | 选择当前 HTML 元素 |
| 选择多个元素 | $(“p, div, span”) | 选择所有 <p>、<div> 和 <span> 元素 |
| 子元素选择器 | $(“parent > child”) | 选择 parent 元素下的直接子元素 child |
| 相邻兄弟选择器 | $(“prev + next”) | 选择 prev 元素后的相邻兄弟元素 next |
| 兄弟选择器 | $(“prev ~ siblings”) | 选择 prev 元素后的所有兄弟元素 siblings |
| 伪类选择器 | $(“li:nth-child(2)”) | 选择列表中第二个 <li> 元素 |
3.4 事件绑定函数
在 jQuery 中，事件绑定函数用于为选定的元素添加事件监听器，以便在特定事件发生时执行相应的操作。通过事件绑定函数，可以为页面元素添加交互功能和响应用户操作的能力。
在JavaScript中，有三种常用的绑定事件的方法，以buttton按钮的click点击事件为例：
方式一
语法：$("选择器").事件(function(){/*选择器的事件触发后运行的函数*/})。示例：
$(function(){
$("button").click(function(){
/*点击button按钮后隐藏p标签*/
$("p").hide();
});
方式二
将on作为统一事件名，括号里面加入具体事件，语法：$("选择器").on('具体事件',function(){/*选择器的事件触发后运行的函数*/})示例：
$(function(){
$("button").on('click',function(){
/*点击button按钮后隐藏p标签*/
$("p").hide();
});
方式三
由于js可以动态添加元素，故此方式用于绑定未来添加的事件。语法为：$("body").on("具体事件","选择器",function(){选择器的事件触发后运行的函数})
示例：
$(function(){
$("body").on("click", "button", function() {
/*点击button按钮后隐藏p标签*/
$("p").hide();
});
结语
本文简要介绍了jQuery如何入门，具体项目的使用仍需要大家共同探索~
