第三章 JQuery选择器
3.1 JQuery选择器简介
JQuery选择器是JQuery的一个重要特性，它允许您通过CSS选择器来选择DOM元素。使用JQuery选择器，您可以轻松地选择并操作HTML元素。
3.1.1 JavaScript选取元素
JavaScript 选取元素主要使用以下几种方法：
document.getElementById()：通过元素的 ID 属性选取元素，返回一个 DOM 对象。
document.getElementsByTagName()：通过元素的标签名选取元素，返回一个包含 DOM 对象的数组。
document.getElementsByClassName()：通过元素的类名选取元素，返回一个包含 DOM 对象的数组。
document.querySelector()：通过 CSS 选择器选取元素，返回一个 DOM 对象。
document.querySelectorAll()：通过 CSS 选择器选取元素，返回一个包含 DOM 对象的数组。
3.1.2 JQuery获取元素
jQuery获取元素使用的是美元符号（$）运算符，通常用$（）表示。例如，获取某个 id 的对象可以写成$("#one")，获取某个类的对象可以写成$(".class")，获取某个标签的对象可以写成$("tag")。不论该元素是否存在，都会返回一个jQuery对象。这一点和JavaScript获取元素是不一样的，JavaScript获取元素用的是document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()等方法。
3.1.3 jQuery选择器的分类
jQuery 选择器可分为基本选择器、层次选择器、属性选择器、过滤选择器、表单选择器和内容过滤选择器。
基本选择器：通过元素名、ID、class 等基本属性进行选择，包括元素选择器、ID选择器、class 选择器和群组选择器等。
层次选择器：根据元素在 HTML 文档中的层次关系进行选择，包括后代选择器、子元素选择器、相邻兄弟选择器和通用兄弟选择器等。
属性选择器：通过元素的属性进行选择，包括属性选择器、包含属性选择器、开始属性选择器和结束属性选择器等。
过滤选择器：通过元素的状态或其他属性进行选择，包括可见性选择器、内容选择器、子元素过滤器和表单过滤器等。
表单选择器：通过表单元素的类型和属性进行选择，包括表单元素选择器、选中状态选择器和表单属性选择器等。
内容过滤选择器：通过元素的内容进行选择，包括包含内容选择器、子元素内容选择器和空元素选择器等。
3.2 基本选择器
3.3 层次选择器
层次选择器是 jQuery 提供的一种在 DOM 树中选取元素的方式，通过选择元素的父元素、子元素、兄弟元素等关系来定位目标元素。
常见的层次选择器包括：
后代选择器（Descendant Selector）: 用空格表示，可以选取某个元素的所有后代元素，无论嵌套多少层。
例如：S("div p") 可以选取所有 <div> 元素内的 <p> 元素。
直接子元素选择器（Child Selector）: 用大于号表示，可以选取某个元素的所有直接子元素。
例如：S("ul > li") 可以选取所有 <ul> 元素下的直接子元素 <li> 元素。
相邻兄弟元素选择器（Adjacent Sibling Selector）: 用加号表示，可以选取某个元素之后紧邻的一个兄弟元素。
例如：S("h1 + p") 可以选取所有 <h1> 元素之后紧邻的 <p> 元素。
通用兄弟元素选择器（General Sibling Selector）: 用波浪号表示，可以选取某个元素之后的所有兄弟元素。
例如：S("h1 ~ p") 可以选取所有 <h1> 元素之后的所有兄弟元素 <p> 元素。
这些层次选择器可以组合使用，以实现更精细的元素选取。
3.4 过滤选择器
过滤选择器是指可以根据元素的属性、状态、位置等进行筛选的选择器。
3.4.1 基本过滤选择器
选择器 | 描述 |
:first | 选择第一个匹配的元素 |
:last | 选择最后一个匹配的元素 |
:even | 选择所有偶数位置的元素，从0开始计数 |
:odd | 选择所有奇数位置的元素，从0开始计数 |
:eq(index) | 选择索引值为 index 的元素，从0开始计数 |
:gt(index) | 选择索引值大于 index 的元素 |
:lt(index) | 选择索引值小于 index 的元素 |
:header | 选择所有标题元素，如h1、h2等 |
:not(selector) | 选择所有不匹配给定的选择器的元素 |
:has(selector) | 选择所有包含给定选择器的元素 |
:contains(text) | 选择包含指定文本的元素 |
注意：上述表格中的选择器都是基本过滤选择器，是最常用的过滤选择器之一。
3.4.2 内容过滤选择器
以下是表格呈现内容过滤选择器：
选择器 | 描述 |
:contains(text) | 匹配包含指定文本的元素 |
:not(selector) | 匹配不符合指定选择器的元素 |
:has(selector) | 匹配包含指定选择器的元素 |
:empty | 匹配不包含任何子元素或者文本的空元素 |
:parent | 匹配包含子元素或者文本的元素 |
:has(selector) | 匹配包含指定选择器的元素 |
:has(selector) | 匹配包含指定选择器的元素 |
:has(selector) | 匹配包含指定选择器的元素 |
:has(selector) | 匹配包含指定选择器的元素 |
注意：表格中的选择器都是以冒号（:）开头。
3.4.3 可见性过滤选择器
以下是表格呈现可见性过滤选择器：
过滤选择器 | 描述 |
:hidden | 选取所有隐藏的元素 |
:visible | 选取所有可见的元素 |
例如，要选取所有隐藏的段落元素，可以使用 $('p:hidden')；要选取所有可见的按钮元素，可以使用 $('button:visible')。
3.4.4 属性过滤选择器
下表列出了常用的属性过滤选择器及其说明：
3.4.5 子元素过滤选择器
过滤选择器 | 说明 |
:first-child | 选取父元素下的第一个子元素 |
:last-child | 选取父元素下的最后一个子元素 |
:nth-child(n) | 选取父元素下的第 n 个子元素，n 从 1 开始，可以是正数、负数或表达式 |
:even | 选取父元素下的偶数位置的子元素 |
:odd | 选取父元素下的奇数位置的子元素 |
:first-of-type | 选取父元素下第一个同类型子元素 |
:last-of-type | 选取父元素下最后一个同类型子元素 |
:nth-of-type(n) | 选取父元素下第 n 个同类型子元素，n 从 1 开始，可以是正数、负数或表达式 |
:only-child | 选取父元素下唯一的子元素 |
:empty | 选取没有子元素的元素 |
注意：这里表格中的 n 指的是数字，不是选择器中的 n。
3.4.6 表单对象属性选择器
表格如下：
过滤选择器 | 说明 |
:input | 选取所有 input、textarea、select 和 button 元素 |
:enabled | 选取所有可用的表单元素 |
:disabled | 选取所有不可用的表单元素 |
:checked | 选取所有被选中的 input 元素 |
:selected | 选取所有被选中的 option 元素 |
3.5 表单选择器
选择器 | 说明 |
:input | 选取所有 input、textarea、select 和 button 元素 |
:text | 选取所有 type="text" 的 input 元素 |
:password | 选取所有 type="password" 的 input 元素 |
:radio | 选取所有 type="radio" 的 input 元素 |
:checkbox | 选取所有 type="checkbox" 的 input 元素 |
:submit | 选取所有 type="submit" 的 input 元素 |
:image | 选取所有 type="image" 的 input 元素 |
:reset | 选取所有 type="reset" 的 input 元素 |
:button | 选取所有 type="button" 的 button 元素 |
:file | 选取所有 type="file" 的 input 元素 |
:hidden | 选取所有 type="hidden" 的 input 元素 |
:enabled | 选取所有可用的表单元素 |
:disabled | 选取所有禁用的表单元素 |
:checked | 选取所有被选中的表单元素 |
:selected | 选取所有被选中的 option 元素 |
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
