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

2020-05-17 06:24:08易采站长站整理

    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    </ul>
    </div>
    <script type=”text/javascript”>
        $(“li:nth-child(3n-1)”).css(“background-color”, “blue”);
    </script>

效果:


3


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


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

   <script type=”text/javascript”>
        $(“li:nth-child(odd)”).css(“background-color”, “blue”);
    </script>

效果:


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伪类选择符不只是匹配<input>标签,还会匹配<select>和<textarea>:

第一个:<input type=”input” />
第二个:<select id=”select”>


</select>
第三个:<textarea></textarea>
<script type=”text/javascript”>
    alert($(“:input”).length);//alert 3
</script>   

 可以看到,不光<input>被选择,<select>和<textarea>也被选择了


伪类选择符可以嵌套


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

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>