（一）元素選取
- 各種選擇器的使用方法與示例
標簽選擇器：通過 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’)會選中包含
元素的
，即第一個。
要是你還想了解大綱中其他部分，像元素創建與添加、事件處理等內容，我可以繼續為你詳細介紹。
