（一）元素选取
- 各种选择器的使用方法与示例
标签选择器：通过 HTML 标签名称来选取元素。例如，若想选中页面中所有的段落元素，可使用$(‘p’)。假设我们有如下 HTML 结构：
这是第一个段落
这是嵌套在div中的段落
使用$(‘p’).css(‘color’,‘red’)，就会将页面上所有
标签内的文本颜色设置为红色。
类选择器：以点号（.）开头，后跟类名。例如，HTML 中有多个元素都添加了highlight类：
通过 ( ′ . h i g h l i g h t ′ ) 可以选中所有带有 h i g h l i g h t 类的元素，若执行 ('.highlight')可以选中所有带有highlight类的元素，若执行 (′.highlight′)可以选中所有带有highlight类的元素，若执行(‘.highlight’).addClass(‘active’)，则会为这些元素添加active类。
ID 选择器：以井号（#）开头，后跟元素唯一的 ID 值。例如 HTML 中有一个元素的id为uniqueElement：
使用KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲uniqueElement')…(‘#uniqueElement’).hide()。
通配符选择器：使用星号（）表示，它会选中页面上的所有元素。例如$('').css(‘border’, ‘1px solid black’)，会给页面上的每一个元素都添加 1 像素宽的黑色边框。不过由于性能原因，在实际大量元素的页面中使用时需谨慎。
子选择器：使用大于号（>），它仅选择指定父元素的直接子元素。例如 HTML 结构如下：
- 列表项1
- 列表项2
- 嵌套列表项1
( ′ u l > l i ′ ) 只会选中 < u l > 的直接子元素 < l i > ，即“列表项 1 ”和“列表项 2 ”，而不会选中嵌套 < u l > 里的“嵌套列表项 1 ”。后代选择器：使用空格分隔，会选择指定祖先元素内的所有后代元素。比如对于上述 H T M L 结构， ('ul > li')只会选中<ul>的直接子元素<li>，即 “列表项 1” 和 “列表项 2”，而不会选中嵌套<ul>里的 “嵌套列表项 1”。 后代选择器：使用空格分隔，会选择指定祖先元素内的所有后代元素。比如对于上述 HTML 结构， (′ul>li′)只会选中<ul>的直接子元素<li>，即“列表项1”和“列表项2”，而不会选中嵌套<ul>里的“嵌套列表项1”。后代选择器：使用空格分隔，会选择指定祖先元素内的所有后代元素。比如对于上述HTML结构，(‘ul li’)会选中
- 内的所有
- 元素，包括嵌套的 “嵌套列表项 1”。
相邻兄弟选择器：使用加号（+），选择紧接在指定元素后的相邻兄弟元素。例如：
标题
紧跟标题的段落
另一个段落
( ′ h 2 + p ′ ) 会选中紧跟在 < h 2 > 后面的那个 < p > 元素，即“紧跟标题的段落”。同辈选择器：使用波浪号（ ），选择指定元素之后的所有同辈元素。对于上述 H T M L 结构， ('h2 + p')会选中紧跟在<h2>后面的那个<p>元素，即 “紧跟标题的段落”。 同辈选择器：使用波浪号（~），选择指定元素之后的所有同辈元素。对于上述 HTML 结构， (′h2+p′)会选中紧跟在<h2>后面的那个<p>元素，即“紧跟标题的段落”。同辈选择器：使用波浪号（ ），选择指定元素之后的所有同辈元素。对于上述HTML结构，(‘h2 ~ p’)会选中
之后的所有
元素，即 “紧跟标题的段落” 和 “另一个段落”。
表单选择器：专门用于选取表单元素。
$(‘:input’)：选中所有、、和元素。
$(‘:text’)：选中所有类型为text的元素。例如：
$(‘:text’)会选中 “姓名” 输入框。
$(‘:password’)：选中所有类型为password的元素。
$(‘:radio’)：选中所有类型为radio的元素。
$(‘:checkbox’)：选中所有类型为checkbox的元素。
$(‘:submit’)：选中所有类型为submit的元素和元素。
2. 选择器的组合使用
可以将多种选择器组合起来更精确地选取元素。例如，若想选中
元素，HTML 结构如下：
这是div内带highlight类的p
普通p
可以使用 ( ′ d i v p . h i g h l i g h t ′ ) ，这里先通过后代选择器选中 < d i v > 内的所有 < p > 元素，再通过类选择器进一步筛选出具有 h i g h l i g h t 类的 < p > 元素。又比如 ('div p.highlight')，这里先通过后代选择器选中<div>内的所有<p>元素，再通过类选择器进一步筛选出具有highlight类的<p>元素。又比如 (′divp.highlight′)，这里先通过后代选择器选中<div>内的所有<p>元素，再通过类选择器进一步筛选出具有highlight类的<p>元素。又比如(‘#parent > li.active’)，先通过 ID 选择器选中id为parent的元素，再通过子选择器选中其直接子元素
- ，最后通过类选择器筛选出具有active类的
- 元素。
3. 筛选方法
.filter()：用于筛选出符合指定条件的元素。例如，有一组 - 元素：
-
- 苹果
- 香蕉
- 橙子
- 草莓
若只想获取具有fruit类的
- 元素，可以使用 ( ′ l i ′ ) . f i l t e r ( ′ . f r u i t ′ ) ，它会从所有 < l i > 元素中筛选出带有 f r u i t 类的元素。还可以传入一个函数进行更复杂的筛选，如 ('li').filter('.fruit')，它会从所有<li>元素中筛选出带有fruit类的元素。还可以传入一个函数进行更复杂的筛选，如 (′li′).filter(′.fruit′)，它会从所有<li>元素中筛选出带有fruit类的元素。还可以传入一个函数进行更复杂的筛选，如(‘li’).filter(function() { return KaTeX parse error: Expected 'EOF', got '}' at position 27: …().length > 3; }̲)，这会筛选出文本长度大于 3…(‘li’).not(‘.fruit’)，会选中所有不具有fruit类的
- 元素，即 “苹果” 和 “橙子”。
.has()：用于筛选包含特定子元素或满足特定条件的元素。比如有如下 HTML 结构： -
这是div内的p
这是div内的span$(‘div’).has(‘p’)会选中包含
元素的
，即第一个。
要是你还想了解大纲中其他部分，像元素创建与添加、事件处理等内容，我可以继续为你详细介绍。
