最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
科技
当前位置： 首页 - 科技 - 知识百科 - 正文

jQuery关于伪类选择符的使用说明_jquery

来源：动视网 责编：小采 时间：2020-11-27 21:08:50
文档

jQuery关于伪类选择符的使用说明_jquery

jQuery关于伪类选择符的使用说明_jquery:jQuery选择器的强大不仅在于选择器支持基本的css选择符，还支持很多CSS的伪类选择符，甚至可以自定义选择符，下面让我们来看看一些伪类选择符 :nth-child的用法 nth-child是一个css3伪类选择符,在jQuery中被实现了，在Jquery API中对nth-ch
推荐度：
点击下载本文 文档为doc格式
导读jQuery关于伪类选择符的使用说明_jquery:jQuery选择器的强大不仅在于选择器支持基本的css选择符，还支持很多CSS的伪类选择符，甚至可以自定义选择符，下面让我们来看看一些伪类选择符 :nth-child的用法 nth-child是一个css3伪类选择符,在jQuery中被实现了，在Jquery API中对nth-ch


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




    • $("li:nth-child(2)").css("background-color", "blue");


    运行效果如下:

    1

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

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

    2

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

      向上面那样直接给出选择的位置，但是这里注意，这个位置是以1为开始的，而不是0 n个倍数选择法，比如可以使3n+1,-3n+1，4n,等，匹配所有页面上存在的n的倍数

    例子:
    代码如下:


  • one

  • two

  • three

  • four

  • five

  • six

  • seven

  • eight

  • nine




    • $("li:nth-child(3n-1)").css("background-color", "blue");


    效果:

    3

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

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

    $("li:nth-child(odd)").css("background-color", "blue");


    效果:

    4

    :first-child&last-child

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

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

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

    5

    :input并不只是匹配input

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

    alert($(":input").length);//alert 3


    可以看到，不光被选择，