ITPub博客

首页 > IT职业 > IT生活 > 关于jQuery 伪类选择符的理解

关于jQuery 伪类选择符的理解

IT生活 作者:doudourabbit 时间:2021-09-09 09:11:23 0 删除 编辑

    jQuery选择器的强大不仅在于选择器支持基本的css选择符,还支持很多CSS的伪类选择符,甚至可以自定义选择符,下面让我们来看看一些伪类选择符

  :nth-child的用法

         nth-child是一个css3伪类选择符,在jQuery中被实现了,在Jquery API中对nth-child的定义是:”匹配其父元素下的第N个子或奇偶元素“。读着感觉有点绕口,下面让我们通过例子来说明:

 
  • one
  • two
  • three
  • four
  • five
  • six
  • seven
  • eight
  • nine
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

运行效果如下:

  图片描述    

API定义中的匹配其父辈指的是所选元素的父元素不同,则分开选择。在上面例子中虽然一共选择18个

  • 但是这18
  • 分属于2个不同的
      ,所以会选择两个.如果将其放入同一个
        中,如果放入同一个
          执行上面代码,则:

          图片描述

          理解了上面匹配父辈元素,下面来说说这个选择符参数的用法.

    1. 向上面那样直接给出选择的位置,但是这里注意,这个位置是以1为开始的,而不是0

    2. n个倍数选择法,比如可以使3n+1,-3n+1,4n,等,匹配所有页面上存在的n的倍数

    例子:

    • one
    • two
    • three
    • four
    • five
    • six
    • seven
    • eight
    • nine


    效果:

    图片描述

    可见相对应的元素都被匹配

       3.还有一种用法是我们熟知的odd和even,就是奇数和偶数,如下:

    效果:

    图片描述

     

    :first-child&last-child

       从上面的nth-child可以看到”匹配父类下的“含义,first-child和last-child也同样是这样.它们可以看做nth-child的封装:

    first-child和nth-child(1)等价,这里就不多说了.

    而first-child目前我还找不到等价的nth-child表达式,匹配父类下的最后一个子元素:

    
    
    • 1
    • 2
    • 1
    • 2

    效果:

    图片描述

    :input并不只是匹配input

       个选择符我想大家都比较熟悉,但是要注意,input伪类选择符不只是匹配标签,还会匹配

    第一个:
    第二个:
    第三个:

        可以看到,不光被选择,

     

    伪类选择符可以嵌套

       通常情况下,我们可以通过嵌套伪类选择符来达到我们需要的效果,伪类选择符,如下:

    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

       效果:

       图片描述

       可见,除了第一个和最后一个li,其它都被选择.当然,嵌套是有层数限制的,具体的次数我就不太清了(各位高手记得麻烦告诉我下),反正够你进行不是变态的使用:-)

    自定义伪类选择符

       jquery还提供给我们扩展原有选择符的方式,可以让我们根据自己的需要自定义选择符,下面通过一个有实际意义的例子看如何做到:

       在我们使用jquery的serialize方法将当前表单中的元素提交到服务器时,总是会选上asp.net的ViewState()这无疑浪费了好多资源,我们通过一个扩展的伪类选择符看如何不选择它:

    
    

    通过$.expr的方式对伪类选择符进行扩展,可以看出,上面的选择符使用:noViewState后,viewState没有被选择. 

     


    小结:

        jQuery的伪类选择符是很强大的一项功能,它内置了很多种方便我们选择的选择符,我们可以嵌套甚至扩展这些伪类选择符.这让我们的js编程更加愉悦了许多.

  • 来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/4809/viewspace-2800215/ ,如需转载,请注明出处,否则将追究法律责任。

    请登录后发表评论 登录
    全部评论

    注册时间:2019-04-25

    • 博文量
      193
    • 访问量
      1436