jquery筛选选择器

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等 Web 开发操作，在本文中，我们将学习如何使用 jQuery 进行筛选操作，筛选操作可以帮助我们获取或修改 HTML 文档中满足特定条件的元素，以下是一些常用的 jQuery 筛选方法：

1、基本选择器

jQuery 提供了一组基本的选择器，类似于 CSS 选择器，可以用来选取 HTML 元素。

$("p")：选取所有 <p> 元素

$("#para1")：选取 id 为 "para1" 的元素

$(".class")：选取 class 为 "class" 的所有元素

$("[attribute]")：选取具有指定属性的元素

2、层次选择器

jQuery 提供了一组层次选择器，用于选取特定层次的后代元素。

$("parent > child")：选取 parent 元素的直接子元素 child

$("ancestor descendant")：选取 ancestor 元素的后代元素 descendant

$("prev + next")：选取紧接在 prev 元素之后的 next 元素

3、过滤选择器

过滤选择器允许我们对选择的元素进行进一步筛选。

$("div:first")：选取第一个 div 元素

$("div:last")：选取最后一个 div 元素

$("div:even")：选取所有索引为偶数的 div 元素

$("div:odd")：选取所有索引为奇数的 div 元素

$("div:eq(2)")：选取索引为 2 的 div 元素

$("div:gt(2)")：选取索引大于 2 的 div 元素

$("div:lt(2)")：选取索引小于 2 的 div 元素

$("div:header")：选取文本内容为段落标题的元素（h1, h2, h3, h4, h5, h6）

$("div:animated")：选取正在执行动画效果的元素

4、内容选择器

内容选择器可以根据元素的文本内容来筛选元素。

$("p:contains('hello')")：选取包含文本 "hello" 的 p 元素

$("p:empty")：选取没有子元素的 p 元素

$("p:has(img)")：选取包含图片元素的 p 元素

$("p:visible")：选取可见的 p 元素

$("p:hidden")：选取隐藏的 p 元素

$("input:checked")：选取选中的 input 元素（复选框和单选框）

$("input:disabled")：选取禁用的 input 元素

$("input:enabled")：选取启用的 input 元素

$("input:selected")：选取选中的选项（下拉列表中的选项）

5、表单选择器

表单选择器可以根据表单元素的类型来筛选元素。

$("form")：选取所有的 form 元素

$("input")：选取所有的 input 元素

$("textarea")：选取所有的 textarea 元素

$("button")：选取所有的 button 元素

$("select")：选取所有的 select 元素

$("option")：选取所有的 option 元素

$("label")：选取所有的 label 元素

$("fieldset")：选取所有的 fieldset 元素

$("legend")：选取所有的 legend 元素

$("datalist")：选取所有的 datalist 元素

$("output")：选取所有的 output 元素

$("progress")：选取所有的 progress 元素

$("meter")：选取所有的 meter 元素

6、属性选择器

属性选择器可以根据元素的特定属性来筛选元素。

$("a[target]")：选取具有 target 属性的所有 a 元素

$("a[href]")：选取具有 href 属性的所有 a 元素

$("a[rel]")：选取具有 rel 属性的所有 a 元素

$("a[title]")：选取具有 title 属性的所有 a 元素

$("a[hreflang]")：选取具有 hreflang 属性的所有 a 元素

$("a[type]")：选取具有 type 属性的所有 a 元素

$("a[name]")：选取具有 name 属性的所有 a 元素

$("a[disabled]")：选取被禁用的 a 元素（disabled="disabled"）