jquery筛选器
jQuery筛选器概述
jQuery筛选器用于在DOM中快速定位和操作元素，支持多种选择方式，包括基本选择器、层次选择器、过滤选择器等。以下是常见的筛选器分类及用法示例。
基本选择器
-
ID选择器：通过元素的ID属性选择。
$("#elementId") -
类选择器：通过元素的class属性选择。
$(".className") -
元素选择器：通过标签名选择。
$("div") -
通配选择器：选择所有元素。
$("*")
层次选择器
-
后代选择器：选择指定元素的所有后代元素。
$("parent descendant") -
子元素选择器：选择指定元素的直接子元素。
$("parent > child") -
相邻兄弟选择器：选择紧接在指定元素后的兄弟元素。
$("prev + next") -
通用兄弟选择器：选择指定元素之后的所有兄弟元素。
$("prev ~ siblings")
过滤选择器
-
:first：选择第一个匹配的元素。
$("div:first") -
:last：选择最后一个匹配的元素。
$("div:last") -
:even/:odd：选择偶数或奇数位置的元素。
$("tr:even") // 偶数行 $("tr:odd") // 奇数行 -
:eq(index)：选择指定索引位置的元素。
$("li:eq(2)") // 第三个li元素 -
:gt(index)/:lt(index)：选择大于或小于指定索引的元素。
$("li:gt(2)") // 索引大于2的li元素
内容过滤选择器
-
:contains(text)：选择包含指定文本的元素。
$("div:contains('Hello')") -
:empty：选择没有子元素的元素。
$("div:empty") -
:has(selector)：选择包含指定子元素的元素。
$("div:has(p)")
属性过滤选择器
-
[attribute]：选择带有指定属性的元素。
$("div[title]") -
[attribute=value]：选择属性值等于指定值的元素。
$("div[title='example']") -
[attribute!=value]：选择属性值不等于指定值的元素。
$("div[title!='example']")
表单选择器
-
:input：选择所有表单元素（input、select、textarea等）。
$(":input") -
:text/:password：选择文本输入框或密码框。
$(":text") -
:checked：选择被选中的复选框或单选按钮。
$(":checked") -
:selected：选择被选中的下拉选项。
$(":selected")
示例代码
以下是一个综合示例，展示如何使用多种筛选器：
// 选择ID为container的div下的所有p元素
$("#container p")
// 选择class为highlight的第一个li元素
$("li.highlight:first")
// 选择所有包含文本"Submit"的按钮
$("button:contains('Submit')")
// 选择所有被选中的复选框
$("input[type='checkbox']:checked")注意事项
- 筛选器的性能因选择方式而异，ID选择器最快，复杂的选择器可能较慢。
- 链式调用可以组合多个筛选器，例如：
$("div").find("p").filter(":visible")
通过灵活组合这些筛选器，可以高效地操作DOM元素。
