jQuery入门和选择器
介绍
jQuery是一款轻量级JavaScript库，旨在简化HTML文档遍历、事件处理、动画设计及Ajax交互。其核心理念“Write Less, Do More”通过封装常用功能，显著提升开发效率，尤其适合前端新手快速上手。
什么是 jQuery
-
JavaScript库：jQuery是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax操作。
-
兼容性：解决不同浏览器的兼容性问题。
核心优势
-
跨浏览器兼容（解决浏览器兼容性问题）。
-
简洁的 API（用更少的代码实现复杂功能）。
-
链式调用（多个操作可以连写在一行）。
安装 jQuery
方式一：通过 CDN 引入
<!-- 使用官方 CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>方式二：下载本地文件
从 jQuery 官网 下载文件，然后在 HTML 中引入：
<script src="jquery-3.7.1.min.js"></script>基础语法
-
核心函数：$()或jQuery()
-
语法结构：
$(selector).action();-
selector：选择元素（类似CSS选择器）。
-
action()：对元素执行的操
-
选择器
jQuery选择器基于CSS语法，用于快速定位DOM元素，支持ID、类、标签及组合选择，可链式操作，简化元素选取、事件绑定及动态交互开发。
常用选择器
| 选择器类型 | 示例 | 说明 |
|---|---|---|
| 元素选择器 | $("p") | 选中所有<p>元素 |
| ID选择器 | $("#id") | 选中指定ID的元素 |
| 类选择器 | $(".class") | 选中指定类的元素 |
| 后代选择器 | $("ul li") | 选中<ul>内的所有<li> |
| 属性选择器 | $("input[type='text']" | 选中类型为text的输入框 |
基础选择器
-
ID 选择器
$("#id")
通过元素的id属性选择单个元素（ID 在页面中应唯一）。 -
类选择器
$(".class")
选择所有具有指定class的元素。 -
元素选择器
$("element")
选择所有指定标签名的元素，如$("div")选择所有<div>。 -
通配符选择器
$("*")
选择所有元素（谨慎使用，性能较差）。 -
组合选择器
$("selector1, selector2, selector3")
同时选择多个匹配的元素，如$("div, .class, #id")。
层次选择器
-
后代选择器
$("ancestor descendant")
选择祖先元素内的所有后代元素，如$("ul li")。 -
子元素选择器
$("parent > child")
选择直接子元素，如$("ul > li")仅选择<ul>的直接子级<li>。 -
相邻兄弟选择器
$("prev + next")
选择紧接在prev元素后的第一个next元素，如$("h2 + p")。 -
通用兄弟选择器
$("prev ~ next")
选择prev元素之后的所有同级元素，如$("h2 ~ p")。
过滤选择器
-
基本过滤
-
:firs：t第一个元素，如$("li:first")
-
:last：最后一个元素
-
:even /:odd：偶数或奇数索引元素
-
:eq(index)：指定索引位置的元素（从 0 开始）
-
:gt(index) / :lt(index)：大于或小于索引的元素
-
-
内容过滤
-
:contains(text)：包含指定文本的元素，如$("p:contains('Hello')")
-
:empty：没有子元素的元素
-
:has(selector)：包含匹配子元素的元素，如$("div:has(p)")
-
-
可见性过滤
-
:visible：可见的元素
-
:hidden：隐藏的元素（包括display:none或type="hidden"）
-
-
表单元素过滤
-
:input：所有表单元素（<input>, <select>, <textarea>等）
-
:text / :password / :radio / :checkbox等
-
:checked：被选中的复选框或单选按钮
-
:selected：被选中的<option>元素
-
子元素过滤
-
:nth-child(index)
匹配父元素下第index个子元素，如$("ul li:nth-child(2)")。 -
:first-child / :last-child
第一个或最后一个子元素。 -
:only-child
作为父元素唯一子元素的元素。
方法链式操作
jQuery 支持链式调用，可连续使用多个选择器或方法：
$("div").addClass("highlight").find("p").css("color", "red");总结
jQuery是一个轻量级JavaScript库，通过简化DOM操作、事件处理和Ajax交互，极大提升了前端开发效率。其核心思想是“选择元素并操作”，开发者通过引入jQuery库文件后，使用$()符号即可快速访问页面元素。
选择器作为jQuery的基石，延续了CSS语法逻辑，例如`$("#id")`通过ID定位元素，$(".class")选取特定类名的元素，$("tag")则选中指定标签。进阶用法支持组合查询，如$("ul > li:first")表示选取列表首项子元素，$("input[type='text']")可筛选文本输入框。此外，过滤选择器如:visible、:hidden或:eq(n)能精准定位符合状态或序号的元素。
jQuery将匹配结果封装为包含DOM节点的对象集合，支持链式调用方法如.css()修改样式或.click()绑定事件。需注意通过.get(index)可将jQuery对象转为原生DOM对象。其跨浏览器兼容特性避免了原生API的兼容性问题，配合简洁的语法结构，使得开发者能以更少的代码实现动态页面效果。掌握选择器的灵活运用是高效使用jQuery的关键。