jquery的选择器

jQuery选择器概述

jQuery选择器基于CSS选择器语法，用于快速定位和操作DOM元素。通过$()或jQuery()函数调用，支持多种匹配模式。

基本选择器

1. ID选择器
   通过元素的id属性匹配单个元素：

   $('#elementId')

2. 类选择器
   匹配所有包含指定class的元素：

   $('.className')

3. 元素选择器
   根据标签名匹配元素：

   $('div')

4. 通配符选择器
   匹配所有元素：

   $('*')

5. 组合选择器
   通过逗号分隔匹配多组选择器：

   $('div, p, .class')

层级选择器

1. 后代选择器
   匹配指定祖先元素下的所有后代：

   $('ancestor descendant')

2. 子元素选择器
   仅匹配直接子元素：

   $('parent > child')

3. 相邻兄弟选择器
   匹配紧邻的下一个兄弟元素：

   $('prev + next')

4. 通用兄弟选择器
   匹配后续所有兄弟元素：

   

   $('prev ~ siblings')

过滤选择器

1. :first / :last
   匹配第一个或最后一个元素：

   $('li:first')

2. :even / :odd
   匹配偶数或奇数索引元素（索引从0开始）：

   $('tr:even')

3. :eq(n)
   匹配指定索引位置的元素：

   $('li:eq(2)')

4. :not(selector)
   排除匹配的元素：

   $('input:not(:checked)')

属性选择器

1. [attribute]
   匹配包含指定属性的元素：

   $('[href]')

2. [attribute=value]
   匹配属性值完全相等的元素：

   

   $('[type="text"]')

3. [attribute^=value]
   匹配属性值以指定字符串开头的元素：

   $('[href^="https"]')

4. [attribute$=value]
   匹配属性值以指定字符串结尾的元素：

   $('[src$=".png"]')

表单选择器

1. :input
   匹配所有表单元素（包括input、select、textarea等）：

   $(':input')

2. :text / :password
   匹配特定类型的输入框：

   $(':text')

3. :checked
   匹配被选中的复选框或单选按钮：

   $(':checked')

4. :selected
   匹配下拉列表中选中的选项：

   $('option:selected')

注意事项

• 选择器性能：优先使用ID或类选择器，避免过度复杂的层级嵌套。
• 链式操作：jQuery支持链式调用，如$('div').addClass('active').hide()。
• 动态元素：对动态生成的元素需结合事件委托（如on()方法）处理。

通过灵活组合选择器，可以高效实现DOM查询与操作。