jquery筛选器

jQuery筛选器基础语法

jQuery筛选器允许通过特定条件选择DOM元素。基本语法为$("selector")，其中selector可以是标签名、类名、ID或更复杂的组合。

// 选择所有<p>元素
$("p")

// 选择class为example的元素
$(".example")

// 选择ID为header的元素
$("#header")

层级与属性筛选

通过层级关系或属性值进一步筛选元素。

// 选择<div>内所有的<span>
$("div span")

// 选择直接子元素
$("ul > li")

// 选择带有target属性的<a>
$("a[target]")

// 选择href属性值以https开头的链接
$("a[href^='https']")

内容与可见性筛选

根据元素内容或显示状态进行筛选。

// 选择包含"Hello"文本的元素
$("p:contains('Hello')")

// 选择空元素
$("div:empty")

// 选择可见的<input>
$("input:visible")

// 选择隐藏的<div>
$("div:hidden")

表单元素筛选

针对表单控件的专用筛选器。

// 选择所有文本框
$(":text")

// 选择被选中的复选框
$(":checkbox:checked")

// 选择已禁用的按钮
$(":button:disabled")

// 选择提交按钮
$(":submit")

索引与位置筛选

通过元素在集合中的位置进行选择。

// 选择第一个<li>
$("li:first")

// 选择最后一个<div>
$("div:last")

// 选择偶数位置的<tr>
$("tr:even")

// 选择索引大于3的<td>
$("td:gt(3)")

方法链式操作

筛选后可直接进行链式方法调用。

$("div.active")
  .css("color", "red")
  .slideUp(200)
  .slideDown(200);