在该章节中我会给大家讲到jQuery的过滤选择器。
一、简单过滤选择器
(1)$("selector:first") //:first选择器 用于在匹配的集合中选择第一个元素
例:$("li:first") 在所有li元素中选择第一个li元素
(2)$("selector:last") //:last选择器 用于在匹配元素集合中选择最后一个元素
(3)$("selector:odd") //:odd选择器 用于在匹配元素集合中选择索引为奇数的所有元素
(4)$("selector:even") //:env选择器 用于在匹配元素集合中选择索引为偶数的所有元素
(5)$("selector:eq(N)") //:eq(N)选择器 用于在匹配元素中选择索引为N的的元素
(6)$("selector:gt(N)") //:gt(N)选择器 用于在匹配元素中选择索引大于N的所有元素
(7)$("selector:lt(N)") //:lt(N)选择器 用于在匹配元素中选择索引小于N的所有元素
例:$("selector:gt(N),selector:lt(M)") 在匹配元素中选择索引大于N且小于M的所有元素
(8)$("selector1:not(selector2)") //:not(selector)选择器 用于在匹配元素集合中移除符合selector2的元素集合
(9)$(":header") //:header选择器 用于选择标题标签 如:h1 h2 h3 之类的标签元素
(10)$("selector:animated") //:animated选择器 用于在匹配元素集合中选择所有正在执行动画效果的元素
二、内容过滤选择器
(1)$("selector:contains(text)") //:contanins(text)选择起 用于在匹配元素集合中选择所有内容包含text的元素集合。
(2)$("selector1:has(selector2)") //:has(selector)选择器 用于在匹配元素集合中选择包含selector2的元素。
(3)$("selector:empty") //:empty选择器 用于选择不包含子元素或文本的所有空元素
(4)$("selector:parent") //:parent选择器 用于选择包含子元素或文本的所有元素 与empty作用相反
三、属性过滤选择器
(1)$("selector[attribute]") //包含属性选择器 在匹配元素集合中筛选出具有 attribute属性的元素集合
(2)$("selector[attribute=value]") //属性等于选择器 在匹配元素集合中筛选出 属性attribute值等于value的元素集合
(3)$("selector[attribute*=value]") //属性包含选择器 在匹配元素集合中筛选出 属性attribute值中包含value的所有元素集合
(4)$("selector[attribute~=value]") //属性包含单词选择器 在匹配元素集合中筛选出 属性attribute值中 包含value单词(由空格分隔)的元素集合
(5)$("selector[attribute!=value]") //属性不等于选择器 在匹配元素集合中筛选出 属性attribute值不等于value的元素集合
(6)$("selector[attribute^=value]") //属性开始选择器 在匹配元素集合中筛选出 属性attribute值以value开头的元素集合
(7)$("selector[attribute$=value]") //属性结尾选择器 在匹配元素集合中筛选出 属性attribute值以value结尾的元素集合
(8)$("selector[selector1][selector2][selectorN]") //复合属性选择器 在匹配元素集合中按照条件多次进行筛选得到最后符合条件的集合
四、子元素过滤选择器
(1)$("selector:first-child") //:first-child选择器 用于获取其父级的第一个子元素的所有元素
(2)$("selector:last-child") //:last-child选择器 用于获取其父级的最后一个子元素的所有元素
(3)$("selector:nth-child(index/even/odd/equation)") //:nth-child选择器 用于获取其父级下的第N个子元素或奇偶元素
(4)$("selector:only-child") //:only-child选择器 用于获取其父级下的所有子元素中的唯一子元素(没有重复的元素)
五、表单域属性过滤选择器
(1)$("input:checked") //:checked选择器 用于在匹配集合中选择被选中的表单域
(2)$("input:disabled") //:disabled选择器 用于选择所有被禁用的表单域
(3)$("input:enabled") //:enabled选择器 用于选择所有可用的表单域
(4)$("select option:selected") //用于从列表框选择所有选中的option元素
六、可见性过滤选择器
(1)$("selector:hidden") //:hidden选择器 用于选择所有的不可见元素
(2)$("selector:visible") //:visible选择器 用于选择所有可见的元素
在本章节中主要给大家罗列了一些常用的过滤器,至此jQuery的选择器就介绍到这里。后面会讲到jQuery遍历DOM元素。