第二章《jQuery选择器(三)》

  在该章节中我会给大家讲到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元素。

posted @ 2012-02-16 15:51  蜗牛散步  阅读(697)  评论(2编辑  收藏  举报