jQuery选择器 与 过滤器

什么是选择器
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:群组选择器,如: (’#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());

猜你喜欢

转载自blog.csdn.net/SqrsCbrOnly1/article/details/91378594
今日推荐