过滤选择器

管理员06  发布于:2014-11-23  浏览:

摘要:过滤选择器是通过特定的过滤规则来对DOM元素进行筛选,以过滤出所需要的DOM元素。过滤选择器类似于CSS中的伪类,选择器的语法都以冒号开头。过滤选择器的过滤语句非常多,根据过滤规则的不同,又可以分为基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器,以及表单对象属性过滤。下面分别对这几种不同的过滤选择器进行介绍。 1.基本过滤选择器这是最常用的选择器,通过与基本选择器搭配使用,可以解决大部分的节点选择。基本过滤选择器的规则如表10.3所示。 为了演示基本过滤选择器的使用,下面新建一个名为jQueryDem06.html的网页,在该网页中插入一个6行3列的表格,通过演示如何使用基本过滤选择器来改变表格的外观。 首先演示first和last的使用。这两个过滤器会获取指定基本选择器结果中的第一
  过滤选择器是通过特定的过滤规则来对DOM元素进行筛选,以过滤出所需要的DOM元素。过滤选择器类似于CSS中的伪类,选择器的语法都以冒号开头。过滤选择器的过滤语句非常多,根据过滤规则的不同,又可以分为基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器,以及表单对象属性过滤。下面分别对这几种不同的过滤选择器进行介绍。
  1.基本过滤选择器这是最常用的选择器,通过与基本选择器搭配使用,可以解决大部分的节点选择。基本过滤选择器的规则如表10.3所示。
  为了演示基本过滤选择器的使用,下面新建一个名为jQueryDem06.html的网页,在该网页中插入一个6行3列的表格,通过演示如何使用基本过滤选择器来改变表格的外观。
  首先演示first和last的使用。这两个过滤器会获取指定基本选择器结果中的第一个和最后一个元素,例如要改变表格第一行和最后一行的颜色,可以使用如下的语句:
  even和odd是另外两个非常有用的过滤器,用来过滤出奇数行和偶数行的元素。比如要对表格的奇数行和偶数行显示不同的颜色,则可以使用如下的代码
  在应用了even和odd选择器之后,会发现它们将前面使用first和last过滤器设置的颜色覆盖了。幸运的是可以使用not过滤器,它可以滤除掉匹配的元素,示例如下所示:
  运行后可以发现第一行和最后一行果然保留了使用first和last过滤规则的设置。
  除了first、last、even和odd这类相对比较固定的过滤规则之外,还可以使用等于规则eq,选择特定索引位置的元素,gt和It分别返回大于或小于指定索引值的元素。
   例如,想让表格中的第4行背景显示为红色,小于第4行的显示为蓝色,大于第4行的显示为黑色,可以使用如下的语句:
  header允许用户一次性选中页面上的所有的标签元素,它可以简化选择多个标题元素的工作。animated可以选中当前正在运行的动画,可以对当前正在运行的动画设置特效。
  2.内容过滤选择器内容过滤选择器允许搜索元素中包含的文本内容,根据文本内容来匹配指定的元素。
  内容过滤选择器包含的规则如表10.4所示。
  container(text)将会查找指定元素中包含特定文本的元素,empty则可以查找为空文本的元素或者是不包含子元素的元素。has用来指定某元素子元素的集合中含有指定子元素的元素集合。parent用来查找含有子元素或者文本的元素。下面新建一个名为jQueryDem07.html的网页,在该网页中依然插入3列6行的表格,在表格中输入一系列的文本内容。下面演示如何通过内容过滤器来查找元素:
  示例运行效果如图10.6所示。
  3.可见性选择器可见性选择器根据元素是否可见来查找元素,它主要是hidden查找隐藏的元素和visible查找可见的元素,其选择规则如表10.5所示。
 hidden会匹配如下几种格式的元素。
  具有CSS属性display属性值为none的值。
  HTML表单元素中的隐藏域即type=”hidden”。
  宽度和高度被显式设置为0。
  由于祖先元素为隐藏而导致无法显示在页面上。
  visible是指在屏幕上占用布局空间的元素,可见性元素的宽度和高度大于0显示。
  注意:CSS属性visibility:hidden或者是opacity:0被认为可见,这是由于它们仍然会占用布局空间。如果在动画期间隐藏一个元素,元素会被考虑为可见直到动画终止,在动画期间显示一个元素,元素在动画开始时被认为可见。
  新建一个名为jQueryDem08.html的网页,在该网页中放置一系列的不可见和可见的元素,然后演示如何通过hidden和visible来匹配可见和隐藏的元素,如代码10.6所示:
  示例的实现过程如以下步骤所示。
  (1)在HTML中添加了display:none的隐藏的DIV元素及几个隐藏的表单域。
  (2)首先查找
区中所有为hidden的元素,但是过滤掉
文章链接:http://www.jihai.com/a/jiaocheng/jquery/201411/819.html
标签:过滤(2)选择器(19)特(2)定的(3)通过(18)是(83)
作者:管理员06 来源:未知 发布于2014-11-23 14:52
您可能喜欢的文章

热门模板
热门阅读
热门插件