jQuery Tips(5)----关于伪类选择符

    jQuery选择器的强大不只在于选择器支持基本的css选择符，还支持不少CSS的伪类选择符，甚至能够自定义选择符，下面让咱们来看看一些伪类选择符

  :nth-child的用法

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

    <div>
    <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    </ul>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    </ul>
    </div>
    <script type="text/javascript">
        $("li:nth-child(2)").css("background-color", "blue");
    </script>

运行效果以下:

      

API定义中的匹配其父辈指的是所选元素的父元素不一样，则分开选择。在上面例子中虽然一共选择18个<li>可是这18<li>分属于2个不一样的<ul>,因此会选择两个.若是将其放入同一个<ul>中，若是放入同一个<ul>执行上面代码，则：

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

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

例子:

    <div>
    <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <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.还有一种用法是咱们熟知的odd和even,就是奇数和偶数，以下：

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

效果:

 

:first-child&last-child

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

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

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

    <ul>
    <li>1</li>
    <li>2</li>
    </ul>
    <ul>
    <li>1</li>
    <li>2</li>
    </ul>

    <script type="text/javascript">
        $("li:last-child").css("background-color", "blue");
    </script>

效果:

: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>
    <li>6</li>
    <li>7</li>
    </ul>

    <script type="text/javascript">
        $("li:not(:first):not(:last)").css("background-color", "blue");
    </script>

   效果:

  

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

自定义伪类选择符

   jquery还提供给咱们扩展原有选择符的方式，可让咱们根据本身的须要自定义选择符，下面经过一个有实际意义的例子看如何作到：

   在咱们使用jquery的serialize方法将当前表单中的元素提交到服务器时，老是会选上asp.net的ViewState(<input type=”hidden” />)这无疑浪费了好多资源，咱们经过一个扩展的伪类选择符看如何不选择它:

<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRWxo4mg/noF3+7k/L7nyw13HVnLQ==" />
</div>

 
    <script type="text/javascript">
        $.expr[":"].noViewState = function(element) {
            return !$(element).attr("id") === "_VIEWSTATE";
        }
        alert($(":input:noViewState").size());//alert 0 ViewState has not been choosen
    </script>
 
    </form>

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

 

 

小结:

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