jQuery 过滤选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
        
        <script type="text/javascript">
            $(document).ready(function(){

过滤选择器

last 选取最后一个元素

                var  $div = $('#div1 div:last');
                console.log($div);

not(selector)除去所有与给定元素的所有匹配的元素

            var  $div = $(':not(#div1 div:last)');
            console.log($div);

:odd 选中下标是奇数的兄弟标签(从0开始)

            var  $div = $('#div1 div:odd');
            console.log($div);

:eq(index) 选取下标为index的元素(从0开始)

            var $div = $('div:eq(2)');
            console.log($div);

:header 选取所有的标题元素

            var $div = $('#div1 *:header');
            console.log($div)

:focus 选取当前获取焦点的元素 input 标签中 注意：autofocus

            var $div = $('input:focus');
            console.log($div);
            $div.css('background-color','red')

:contains(text) 内容过滤选择器

            var $div = $('p:contains(只)');
            console.log($div);

:empty 选取不包含子元素的或文本的空元素

            var $div = $('div:empty');
            console.log($div);

:parent 选取包含子元素的或文本的空元素

            var $div = $('div:parent');
            console.log($div);

:nth-child(xn) 从1开始计数 选取每个父元素下的下标为index的元素

            var $div  = $('div:nth-child(3)');
            console.log($div);

:nth- child(xn+1) 从0开始计数

            var $div  = $('div:nth-child(3n+1)');
            console.log($div);

:nth-child(even) 选取父元素下标为偶数的元素 从0开始

        var $div  = $('div:nth-child(even)');
            console.log($div);

:nth-child(odd) 选取父元素下标为奇数的元素 从0开始

            var $div  = $('div:nth-child(odd)');
            console.log($div);

:has(selector) 选取包含匹配选择器的元素

            var  $div =  $('div:has(div)');
            console.log($div);

:hidden 选取所有不可见的元素

 三种形式：         <input type="hidden" />
                  <div style="display: none;"></div>
                  <div style="visibility: hidden;"></div>
                  var $div = $('input:hidden');
                  console.log($div)

        })
    </script>
</head>
<body>
    <a href=""></a>
    <div id="div1">
        <div id="div6"></div>
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <h1 class="h1"></h1>
    </div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    
    <input type="text" name="name" id="name" value="" 
        autofocus="autofocus"/>
        
        
    <input type="hidden" name="" id="" value="" />    
        <p>一只乌鸦口渴了</p>
        <p>到处找水喝</p>
</body>

</html>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容