过滤选择器

来源:互联网 发布:数据铁笼设计方案 编辑:程序博客网 时间:2024/05/22 03:07

下面要说的是过滤选择器,它主要是通过过滤规则来筛选出所需要的dom元素,过滤规则和CSS中伪类选择去语法相同,即选择器都是冒号(:)开头。按照不同的过滤规则,过滤选择器可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
 1、基本过滤选择器
  选取第一个元素
   :first
   单个元素
   $("div:first")选取所有div元素中的第一个div元素
  选取最后一个元素
   :last
   单个元素
   $("div:last")选取所有div元素中的最后一个div元素
  去除所有与给定选择器匹配的元素
   :not(selector)
   集合元素
   $("input:not(.myClass)")选取class不是myClass的input元素
  选取偶数元素
   :even
   集合元素
   $("div:even")选取索引为偶数的div元素
  选取奇数元素
   :odd
   集合元素
   $("div:odd")选取索引为奇数的div元素
  指定索引的元素
   :eq(index)
   单个元素
   $("div:eq(3)")选取索引为3的div元素<索引是从0开始的>
  大于指定索引的元素
   :gt(index)
   集合元素
   $("input:gt(1)")选取索引大于1的input元素
  小于指定索引的元素
   :lt(index)
   集合元素
   $("input:lt(1)")选取索引小于1的input元素
  获取标题元素
   :header
   集合元素
   $(:header)选取网页中所有的<h1><h2><h3><h4>...
  获取动态元素
   :animated
   集合元素
   $("div:animated")选取正在执行动画的div元素
 2、内容过滤选择器
  文本包含
   :contains(text)
   集合元素
   $("div:contains('我')")选取包含文本“我”div元素
  空子元素(既没有子元素也没子文本元素)
   :empty
   集合元素
   $("div:empty")选取不包含子元素<包括文本元素>的div空元素
  包含指定元素
   :has(selector)
   集合元素
   $("div:has('p')")选取div元素,要求符合包含p元素的条件
  非空子元素
   :parent
   集合元素
   $("div:parent")选取拥有子元素<包括文本元素>的div元素
  PS:
   如:has(selector)、contains(text)中内容可以包括引号("和')也可以不使用
 3、可见性过滤选择器
  选择不可见的元素
   :hidden
   集合元素
   $(":hidden")选取所有不可见的元素,包括<input type = "hidden"/>、<div style = "display:none;">和<div style = "visibility:hidden;">
  选取可见的元素
   :visible
   集合元素
   $(div:visible)选取所有可见的div元素
 4、属性过滤选择器
  拥有指定属性
   [attribute]
   集合元素
   $("div[id]")拥有id属性的div元素
  拥有属性值为指定值的元素
   [attribute=value]
   集合元素
   $("div[title=test]")选择属性title为“test”的div元素
  属性值不为指定值的元素
   [attribute!=value]
   集合元素
   $("div[title!=test]")选择属性title不为“test”的div元素
  属性值以指定值开头的元素
   [attribute^=value]
   集合元素
   $("div[title^=test]")选择属性title以“test”为开头的div元素
  属性值以指定值结尾的元素
   [attribute$=value]
   集合元素
   $("div[title$=test]")选择属性title以“test”为结尾的div元素
  属性值中含有指定值的元素
   [attribute*=value]
   集合元素
   $("div[title*=test]")选择属性title中包含“test”的div元素
  属性多重限制
   [selector1][selector2][selector3]...[selectorN]
   集合元素
   $("div[id][title$='test']")选取拥有id属性,并且title属性以“test”结尾的div元素
 5、子元素过滤选择器
  选取每个父类元素下的第index个子元素或者奇偶元素<index是从1算起的>
   :nth-child
   集合元素
   $("div:nth-child(even)")选取div元素中索引为偶数的子元素
  选取每个父元素的第一个子元素
   :first-child
   集合元素
   $("ul li:first-chlid")选取每个ul中的第一个li元素<有质疑?待测试>

   PS:li:first-child中间没有空格,所以first-child是用来描述li的,即第一个li子元素<2010.4.7-16.43修改>
  选取每个父元素的最后一个子元素
   :last-child
   集合元素
   同first-child
  含有唯一的指定元素
   :only-child
   集合元素
   $("ul li:only-child")在ul中选取是唯一子元素的li元素
 6、表单对象属性过滤器
  可用元素
   :enabled
   集合元素
   $("#form1 :enabled")选取id为"form1"的表单内的所有可用元素
  不可用元素
   和可用相反
  被选中元素<单选和复选>
   :checked
   集合
   $("input:checked")选取所有被选中input元素
  被选中选择项<下拉选框>
   :selected
   集合
   $("select :selected")选取所有被选中的选项元素
   
   
   
   
   

原创粉丝点击