什么是选择器
jQuery 模仿 CSS 选择器的语法提供了一种用来方便查找要操作的节点的语法规则。
一 基本选择器
1 Css选择器
1)#id:ID 选择器,如:KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲d1') 2).class:…(’.s1’)
3)element:标签选择器,如:
(
′
d
i
v
′
)
4
)
s
e
l
e
c
t
o
r
1
,
s
e
l
e
c
t
o
r
2...
s
e
l
e
c
t
o
r
n
:
群
组
选
择
器
,
如
:
('div') 4)selector1,selector2...selectorn:群组选择器,如:
(′div′)4)selector1,selector2...selectorn:群组选择器,如:(’#d1,p’).
5):通用选择器,如:$(’’)
2 层次选择器
1) 后代元素选择器 select1 select2:所有后代(要符合 select2 的要求) 。
2)子元素选择器 select1>select2:只考虑子节点(要符合 select2 的要求) ,孙子不管~
3)紧邻同辈元素选择器select1+select2:下一个兄弟(要符合 select2 的要求) ,儿子不管~
4)相邻同辈/兄弟元素选择器 select1~select2:下面所有的兄弟(要符合 select2 的要求) ,上面的兄弟不管~兄弟中
的儿子也不管~
3 表单域选择器
1):input:所有表单元素。 2):text:文本框。 3):pasword:密码框。
4):radio:单选。 5):checkbox:多选。 6):submit:提交按钮。
7):image:图片。 8):reset:重置按钮。 9):button:普通按钮
注:$(“input”) 标签选择器选择所有的input标签
$(":input") 表单域选择器选择所有的表单元素
二 过滤选择器
4 基本过滤选择器/位置
1):first:第一行。
2):last:最后一行。
3):not(selector):把满足要求的选择器排除在外。 去除所有与给定选择器匹配的元素使用选择器
4):even:偶数行,下标从 0 开始。匹配选择器所获取的元素中索引值为奇数的元素
5):odd:奇数行,下标从 0 开始。匹配选择器所获取的元素中索引值为偶数的元素
6):eq(index):等于下标的元素,下标从 0 开始。
7):gt(index):大于下标的元素,下标从 0 开始。
8):lt(index):小于下标的元素,下标从 0 开始。
注意事项:过滤器前是没有空格的。是 xx:first 而不是 xx :first。
5 内容过滤选择器
1):contains(text):匹配包含给定文本的元素。$("div:contains(abc)")
2):empty:匹配所有不包含子元素或者文本的空元素。$("div:empty")
3):has(selector):匹配含有选择器所匹配的元素的元素。$("div:has(p)")
4):parent:匹配含有子元素或者文本的元素(与 empty 正好相反) 。
6 可见性过滤选择器
1):hidden 匹配所有不可见元素,或者 type 为 hidden 的元素。
2):visible 匹配所有的可见元素。
7 属性过滤选择器
1)[attribute]:有某个属性的元素。
例如:$('div[id]').css('font-size','60px');
//div 中有 id 属性的元素
2)[attribute=value]:某个属性的值与指定的值相同的元素。
例如:$('div[id=d1]').css('font-size','60px')
;//id是d1的元素
3)[attribute!=value]:某个属性的值与指定的值不相同的元素。
例如:$('div[id!=d1]').css('font-size','60px')
;//id不是d1的元素
8 子元素过滤选择器
1):nth-child(index/even/odd)
:对符合条件的每个节点的子节点作相同操作。
$("tr td:nth-child(2)").css("background-color", "blue");
将第2列变色
9 表单对象属性过滤选择器
3):checked:单选框、多选框中被选中的选项。
例如:alert($(":radio:checked").val())
;//把值输出,类似于 value 属性
4):selected:下拉列表中被选中的选项。
例如:alert($("select option:selected").val())/alert($("select").val());