jQuery 选择器与筛选器完整指南：从基础到高级用法

jQuery 基础选择器

1.选择对象

1).基本

·#id 根据指定的 ID 匹配单个元素。示例：$("#id") ·element 根据标签名匹配所有对应元素。示例：$("div") ·.class 根据类名匹配元素。示例：$(".style1"); ·* 匹配页面中所有元素。示例：$("*") ·selector1,selector2,selectorN 将多个选择器匹配的结果合并返回。示例：$("#id,div,.style1")

jQuery 表单伪类选择器

2).表单

·:button 匹配所有按钮元素。示例：$(":button") ·:checkbox 匹配所有复选框。示例：$(":checkbox") ·:file 匹配所有文件上传域。示例：$(":File") ·:hidden 匹配所有不可见元素，或 type 属性为 hidden 的元素。示例：$("input:hidden") ·:image 匹配所有图像域。示例：$(":image") ·:input 匹配所有 input、textarea、select 和 button 元素。示例：$(":input") ·:password 匹配所有密码输入框。示例：$(":password") ·:radio 匹配所有单选按钮。示例：$(":radio") ·:reset 匹配所有重置按钮。示例：$(":reset") ·:submit 匹配所有提交按钮。示例：$(":submit") ·:text 匹配所有单行文本框。示例：$(":text") ·:header 匹配 h1、h2、h3 等标题元素。示例：$(":header").css("background", "#EEE");

2.筛选条件

jQuery 属性与状态筛选器

1).属性筛选

·[attribute*=value] 匹配属性值包含指定字符串的元素。示例：$("input[name*='man'") ·[attribute!=value] 匹配拥有指定属性且属性值不等于特定值的元素。示例：$(input[name!='man'); ·[attribute$=value] 匹配属性值以指定字符串结尾的元素。示例：$("input[name$='man']") ·[attribute=value] 匹配属性值等于特定值的元素。示例：$("input[name='man']"); ·[attribute] 匹配拥有指定属性的元素。示例：$("div[id]") ·[attribute^=value] 匹配属性值以指定字符串开头的元素。示例：$("input[name^='man']") ·[selector1][selector2][selectorN] 匹配同时满足多个属性条件的元素。示例：$("input[id][name$='man']") ·:hidden 匹配所有不可见元素。示例：$("tr:hidden") ·:visible 匹配所有可见元素。示例：$("tr:visible") ·:checked 匹配所有被选中的复选框、单选按钮等（不包括 select 中的 option）。示例：$("input:checked") ·:disabled 匹配所有不可用元素。示例：$("input:disabled") ·:enabled 匹配所有可用元素。示例：$("input:enabled") ·:selected 匹配所有被选中的 option 元素。示例：$("select option:selected")

2).内容筛选

jQuery 内容筛选器

·:contains(text) 匹配包含指定文本内容的元素。示例：$("div:contains('John')") ·:empty 匹配不包含子元素或文本的空元素。示例：$("td:empty") ·:has(selector) 匹配包含指定选择器所匹配元素的父元素。示例：$("div:has(p)"); ·:parent 匹配包含子元素或文本的非空元素。示例：$("td:parent")

3).层级筛选

jQuery 层级与位置筛选器

·ancestor descendant 匹配祖先元素下的所有后代元素。示例：$("form input") ·parent > child 匹配父元素下的直接子元素。示例：$("form > input") ·prev + next 匹配紧接在 prev 元素之后的 next 兄弟元素。示例：$("label + input") ·prev ~ siblings 匹配 prev 元素之后的所有兄弟元素。示例：$("form ~ input") ·:first-child 匹配作为父元素第一个子元素的元素。示例：$("ul li:first-child") ·:last-child 匹配作为父元素最后一个子元素的元素。示例：$("ul li:last-child") ·:nth-child(index/even/odd/equation) 匹配父元素下第 N 个子元素，支持奇偶或公式。示例：$("ul li:nth-child(2)") ·:only-child 匹配父元素中唯一的子元素。示例：$("ul li:only-child")

4).方法筛选

jQuery 索引与动画筛选器

·:animated 匹配当前正在执行动画效果的元素。示例：$("div:animated"); ·:eq(index) 匹配指定索引值的单个元素（从 0 开始）。示例：$("tr:eq(1)") ·:even 匹配索引值为偶数的元素（从 0 开始）。示例：$("tr:even") ·:first 匹配匹配结果中的第一个元素。示例：$("tr:first") ·:gt(index) 匹配索引值大于指定值的元素（从 0 开始）。示例：$("tr:gt(0)") ·:last 匹配匹配结果中的最后一个元素。示例：$("tr:last") ·:lt(index) 匹配索引值小于指定值的元素（从 0 开始）。示例：$("tr:lt(2)") ·:not(selector) 去除与指定选择器匹配的元素。示例：$("input:not(:checked)") ·:odd 匹配索引值为奇数的元素（从 0 开始）。示例：$("tr:odd")