当前位置：首页 > news >正文

什么是 jQuery

news 来源：原创 2025/9/10 4:16:56

一、jQuery 基础入门

（一）什么是 jQuery

jQuery 本质上是一个快速、小巧且功能丰富的 JavaScript 库。它将 JavaScript 中常用的功能代码进行了封装，为开发者提供了一套简洁、高效的 API，涵盖了 HTML 文档遍历与操作、事件处理、动画效果、Ajax 交互等诸多方面。通过使用 jQuery，开发者能够以更简洁的代码实现复杂的前端交互功能，大大提高开发效率。

（二）下载与引入

使用 jQuery 的第一步是获取其库文件。可以前往jQuery 官网进行下载，官网提供了多个版本，其中 1.x 版本对旧版浏览器（如 IE6 - IE8）有较好的兼容性，而 2.x 及更高版本则专注于现代浏览器，性能和功能上有所优化。在实际项目中，若需兼容旧版浏览器，建议选择 1.x 版本；若面向现代浏览器开发，可选用最新版本。

下载完成后，有两种常见的引入方式：

本地引入：将下载的 jQuery 库文件（如jquery - 3.7.1.min.js）放置在项目的合适目录下，然后在 HTML 文件的<head>或<body>标签中通过<script>标签引入，例如：

<script src="path/to/jquery - 3.7.1.min.js"></script>

CDN（内容分发网络）引入：借助 CDN 服务，可从其服务器快速加载 jQuery 库，如使用百度的 CDN：

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

无论采用哪种方式，都需确保在编写自定义的 jQuery 代码之前引入库文件，否则代码将无法识别$符号（jQuery 的简写）。

（三）基本语法

jQuery 的语法简洁而直观，核心语法为$(selector).action()。其中，$符号是 jQuery 的标识符，用于调用 jQuery 函数；selector是选择器，用于 “查询” 和 “查找” HTML 元素，其语法与 CSS 选择器类似，这使得熟悉 CSS 的开发者能够快速上手；action()则是对选中元素执行的操作方法。例如：

$(this).hide();//隐藏当前元素
$("p").hide();//隐藏所有段落元素
$(".test").hide();//隐藏所有class为test的元素
$("#test").hide();//隐藏id为test的元素

（四）选择器

基本选择器
- 元素选择器：通过元素名称选取元素，如$("div")选取所有<div>元素。
- id 选择器：依据元素的 id 属性选取唯一元素，格式为$("#id名")，例如$("#myDiv")会选中 id 为myDiv的元素。
- class 选择器：用于选取具有特定 class 属性的元素，如$(".intro")会选中所有 class 包含intro的元素。
- 群组选择器：可同时选取多个不同的选择器所匹配的元素，使用逗号分隔，如$("div, p, #myDiv")会选中所有<div>元素、所有<p>元素以及 id 为myDiv的元素。
- 通配符选择器：$("*")表示选择页面中的所有元素。
层次选择器
- 后代选择器：$("M N")，选择M元素内部的所有后代N元素，例如$("div p")会选中<div>元素内部的所有<p>元素。
- 子代选择器：$("M > N")，仅选择M元素的直接子代N元素，如$("div > p")只选取<div>元素下一级的<p>元素。
- 兄弟选择器：$("M ~ N")，选择M元素之后的所有同级N元素，例如若有多个<p>元素，$("p ~ span")会选中每个<p>元素之后的所有<span>元素。
- 相邻选择器：$("M + N")，选择M元素相邻的下一个同级N元素，如$("p + span")会选中每个<p>元素紧挨着的下一个<span>元素。
属性选择器
- $("selector[attr]")：选择包含指定属性attr的元素，如$("a[href]")选取所有带有href属性的<a>元素。
- $("selector[attr='value']")：选择属性attr的值为value的元素，例如$("input[type='text']")会选中所有type属性值为text的<input>元素。
- $("selector[attr!='value']")：选择属性attr的值不等于value的元素。
- $("selector[attr*='value']")：选择属性attr的值包含value的元素，如$("a[href*='example']")会选中href属性值中包含example的所有<a>元素。
- $("selector[attr^='value']")：选择属性attr的值以value开头的元素。
- $("selector[attr$='value']")：选择属性attr的值以value结尾的元素。

一、jQuery 基础入门

（一）什么是 jQuery

（二）下载与引入

（三）基本语法

（四）选择器

相关文章：