jQuery选择器

jQuery 一些基本选择器及其用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .a{width: 100px;height: 100px;background-color: red;margin-bottom: 10px;}
            .b{width: 100px;height: 100px;background-color: blue;}
            .c{width: 150px;height: 150px;background-color: green;}
            .d{width: 150px;height: 150px;background-color: yellow;}
        </style>
    </head>
    <body>
        <div class="box">点击</div>
        <div class="a"><span></span>a</div>
        <div class="a">b</div>    
        <div class="a">c</div>
        <div class="a">d</div>        
        <script src="js/jquery-1.8.3.min.js" ></script>
        <script type="text/javascript">
            //第一个
            $('.a:first').click(function(){
                $(this).html('xxx').css('background','royalblue');
            })
            //奇数
            $('.a:nth-child(odd)').click(function(){
                $(this).html('xxx').css('background','green');
            })
            //even 偶数（0开始）， odd:奇数（1开始）
            $('.a:even').click(function(){
                $(this).html('xxx').css('background','black');
            })
            //匹配对应元素，角标重0 开始
            $('.a:eq(2)').click(function(){
                $(this).html('xxx').css('background','blue');
            })
            //:gt(index)     选取索引大于index的元素，index从0开始,不包括index
            // :lt(index)     选取索引小于index的元素，index从0开始,不包括index
            // :animated     选取当前正在执行动画的所有元素
            
            //内容过滤选择器
            //匹配特有的
            $('.a:has(span)').click(function(){
                $(this).css('background','yellow')
            })
            // :has(selector)     选取含有选择器所匹配元素的元素
            //:empty 匹配没有文本或者子元素的元素；
            //:parent     选取含有子元素或文本的元素
            // :contains(text)     选取含有文本内容text的元素
            
            // :hidden     选取所有不可见元素
            // :visible     选取所有可见元素
            // :enabled     选取所有可用元素
            //    :disabled     选取所有不可用元素
            //:checked    选取所有被选中的元素(单选框、复选框）
            //selected    选取所有被选中的选项元素（下拉列表）
            
        </script>
    </body>
</html>

 

posted @ 2017-03-07 09:57  虔诚_k  阅读(109)  评论(0)    收藏  举报