目录
jQuery的选择器分为:基础选择器,层次选择器,过滤选择器,表单选择器
基础选择器
类型 | 语法 |
id选择器 | $("#id").action() |
class选择器 | $(".class").action() |
标签选择器 | $("element").action() |
*选择器 | $("*").action() |
并列/组合选择器 | $("element,element").action() |
层次选择器
类型 | 释义 | 语法 |
parent>child | 直系子元素 | $("parent>child").action() |
prev + next | 下一个兄弟元素,等同于next()方法 | $("prev + next").action()/ $("prev").next("next").action() |
prev~siblings | 元素后面的所有兄弟元素,等同于nextAll()方法 | $("prev ~ siblings").action()/ $("prev").nextAll("siblings").action() |
过滤选择器
1. 基本过滤选择器
类型 | 释义 | 语法 |
:first 和 :last | 取第一个元素或最后一个元素 | $("element:first,element:last").action() |
:not | 取非...的元素 | $("element:not()").action() |
:even和:odd | 取奇偶元素,索引从0开始,even偶数 odd奇数 | $("element:even()").action() $("element:odd()").action() |
:eq(x) | 取指定索引的元素 | $("element:eq()").action() |
:gt(x) 和 :lt(x) | 取大于x索引或小于x索引的元素 | $("element:gt(x)").action() $("element:lt(x)").action() |
:header | 取H1~H6标题元素 | $(":header").action() |
:animated | 选择正在执行的动画元素 |
2. 内容过滤选择器
类型 | 释义 | 语法 |
:contains(text) | 取包含text文本的元素 | $("element:contains(' ')").action() |
:empty | 取不包含子元素或文本为空的元素 | $("element:empty").action() |
:has(selector) | 取选择器匹配的元素 | $("element:has(elector)").action() |
:parent | 取包含子元素或文本的元素 | $("element:parent").action() |
3.可见过滤选择器
类型 | 释义 | 语法 |
:hidden | 取不可见的元素 | $(":hidden").action() |
:visible | 取可见的元素 | $(":visible").action() |
4.属性过滤选择器
类型 | 释义 | 语法 |
[attribute] | 取拥有 attribute 属性的元素 | $("element[attribute]").action() |
[attribute=value] [attribute != value] | 取属性等于某个value的元素 取属性不等于某个value的元素 | $("element[attribute='value']").action() $("element[attribute!='value']").action() |
[attribute^=value] [attribute$=value] [attribute*=value] | 属性值中包含以...开头的值 属性值中包含以...结尾的值 属性值包含.. | $("element[attribute^='value']").action() $("element[attribute$='value']").action() $("element[attribute*='value']").action() |
[selector1] [selector2] | 复合型属性过滤器,同时满足多个条件 | $("element[attribute][attribute=‘value’]").action() (存在attribute,且值为value) |
5.子元素过滤选择器
类型 | 释义 | 语法 |
:first-child :last-child | 取第一个子元素 取最后一个子元素 | $("element:first-child").action() $("element:last-child").action() |
:only-child | 某个元素是父元素唯一的子元素时.. | $("element:only-child").action() |
:nth-child | 取第...个子元素 | $("element:nth-child(x/even/odd/*n)").action() |
1):nth-child(x) | ||
2):nth-child(even) :nth-child(odd) | ||
3):nth-child(公式) |
6.表单过滤选择器
类型 | 释义 | 语法 |
:enabled :disabled | 取可用或不可用元素 | $("element:enabled").action() |
:checked | 取选中的单选框或复选框元素 | $("element:checked").action() |
:selected | 取下拉列表被选中的元素 | $("element:selected").action() |
表单选择器
类型 | 释义 | 语法 |
:input | 取input textarea select button 元素 含H5新增表单 | $(":input").action() |
:text | 取单行文本框元素 | $(":text,:password").action() |
:password | 取密码框元素 | |
:radio | 取单选框元素 | $(":radio").parent().action() |
:checkbox | 取复选框 | $(":checkbox").parent().action() |
:submit | 取提交按钮元素 | $(":submit").action() |
:reset | 取重置按钮元素 | $(":reset").action() |
:button | 取按钮元素 | $(":button").action() |
:file | 取上传域元素 | $(":file").action() |
:hidden | 匹配所有不可见元素 | $(":hidden").siblings(' ').action()/ $(":hidden").parent().children(' ').action() |
*其中 :checkbox 当中 若需弹出被选复选框的值 则可执行以下代码:
//方法一
$(":checkbox:checked").each(function(){
alert($(this).val())
})
//方法二
$("input[type='checkbox'][checked]").each(function(){//each相当于for
alert($(this).val())//value
})
//方法三
$(":checked").each(function(){
alert($(this).val())
})