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

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

    <li>6</li>
    <li>7</li>
    </ul>


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

效果:


   z11111111111111111111111


   可见,除了第一个和最后一个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编程更加愉悦了许多.