jQuery选择器详解

时间:2020-12-15 17:25:19

根据所获取页面中元素的不同。可以将jQuery选择器分为:四大类,其中过滤选择器在分为六小类

jQuery选择器
基本选择器  
层次选择器  
过滤选择器

简单过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

子元素过滤选择器

表单对象属性过滤选择器

表单选择器  

     基本选择器是jQuery中使用最频繁的选择器,它是由元素Id,Class,元素名,多个选择符组成,通过基本选择器可以实现大多数页面元素的查找,

 

   基本选择器
          选择器                           功能    返回值
          #id    根据给定的ID匹配一个元素     单个元素
          element    根据给定的元素匹配所有元素     元素集合
          .class    根据给定的类匹配元素     元素集合
          *    匹配所有元素     元素集合
      selector,selectorN    将每个选择器匹配到元素合并后一起返回     元素集合

  

    层次选择器用过DOM元素间的层次关系获取元素,其主要的层次关系包括后代,父子,相邻,兄弟关系,通过其中某类关系可以方便快捷地定位元素  

层次选择器
               选择器                         功能          返回值
  ancestor descendant   根据祖先元素匹配所有的后代元素        元素集合
  parent>child   根据父元素匹配所有的子元素        元素集合
  prev+next   匹配所有紧接在prev元素后的相邻元素        元素集合
  prev~siblings    匹配prev元素之后的所有兄弟元素        元素集合

    过滤选择器下的简单过滤选择器根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头;简单过滤器选择器是过滤器中使用最广泛的一种,

 

简单过滤选择器语法
       选择器                           功能      返回值
   first() 或:first    获取第一个元素    单个元素
   last() 或:last    获取最后一个元素    单个元素
  :not(selector)    获取除给定选择器外的所有元素    元素集合
  :even    获取所有索引值为偶数的元素,索引号从0开始    元素集合
  :odd    获取所有索引值为奇数的元素,索引号从0开始    元素集合
  :eq(index)    获取指定索引器的元素,索引号从0开始    单个元素
  :gt(index)    获取所有大于给定索引器的元素,索引号从0开始    元素集合
  :lt(index)    获取所有小于给定索引器的元素,索引号从0开始    元素集合
  :header    获取所有标题类型的元素,如h1,h2......    元素机会
  :animated    获取正在执行动画效果的元素    元素集合

    过滤选择器下的内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素,其文本内容可以模糊或绝对匹配进行元素定位,

 

内容过滤选择器
         选择器               功能    返回值
    :contains(text)      获取包含给定文本的元素   元素集合
    :empty      获取所有不包含子元素或者文本的空元素   元素集合
    :has(selector)      获取含有选择器所匹配的元素的元素   元素集合
    :parent      获取含有子元素或者文本的元素   元素集合

    过滤选择器下的可见性过滤选择器根据元素是否可见的特征获取元素,

   

可见性过滤器语法
    选择器                                           功能    返回值
  :hidden     获取所有不可见元素,或者type为hidden的元素   元素集合
  :visible     获取所有可见元素   元素集合

   过滤选择器下的属性过滤选择器根据元素的某个属性获取元素,如ID号或匹配属性值的内容,并以“【”号开始一“】”号结束。

属性过滤选择器语法
                  选择器                       功能    返回值
  [attribute]    获取包含跟定属性的元素   元素集合
  [attribute=value]    获取等于给定的属性是某个特定值的元素   元素集合
  [attribute!=value]    获取不等于给定的属性是某个特定值的元素   元素集合
  [attribute^=value]    获取给定的属性是以某些值开始的元素   元素集合
  [attribute$=value]    获取给定的属性是以某些值结尾的元素   元素集合
  [attribute*=value]    获取给定属性是以包含某些值的元素   元素集合
  [selector1][selector2][selectorN]   获取满足多个条件的复选框的元素   元素集合

   过滤选择器下的子元素过滤选择器:

          在页面开发过程中,常常遇到突发指定某行的需求,虽然使用基本过滤器:eq(index)可实现单个表格的显示,但不能满足大量数据和多个表格的选择需求,为了实现这样的功能,jQuery中可以通过子元素过滤选择器轻松获取所有元素中指定的某个元素。

子元素过滤选择器语法
               选择器                            功能    返回值
  :nth-child(eq|even|add|index)   获取每个父元素下的特定位置元素。索引号从1开始   元素集合
  :first-child   获取每个父元素下的第一个子元素   元素集合
  :last-child   获取每个父元素下的最后一个子元素   元素集合
  :only-child   获取每个元素下的仅有一个元素   元素集合

  过滤选择器下的表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素,如 enabled,disabled, checked, selected 属性。

 

表单对象属性过滤选择器语法
       选择器                                     功能     返回值
  :enabled    获取表单中所有属性为可用的元素    元素集合
  :disabled    获取表单中所有属性为可用的元素    元素集合
  :checked    获取表单中所有被选中的元素    元素集合
  :selected    获取表单中所有被选中option的元素    元素集合

   表单选择器无论是提交还是传递数据,表单在页面中的作用是显而易见的,通过表单进行数据的提交或处理,再前端页面开发中占据重要地位。

   因此为了使用户更加方便地,高效的使用表单,在jQuery选择器中引入表单选择器,该选择器专为表单打造,通过它可以在页面中快速定位表单对象。

表单选择器语法
        选择器                              功能    返回值
  :input    获取所有input.textaea.select   元素集合
  :text    获取所有单行文本框   元素集合
  :password    获取所有密码框   元素集合
  :radio    获取所有单选按钮   元素集合
  :cheakbox    获取所有复选框   元素集合
  :submit    获取所有提交按钮   元素集合
  :image    获取所有图像域   元素集合
  :reset    获取所有重置按钮   元素集合
   :button    获取所有按钮   元素集合
  :file    获取所有文件域   元素集合