夺命雷公狗jquery---2层级选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.js"></script>
        <script>
            window.onload = function(){
                document.getElementById('btnok').onclick = function(){
                    //1.通过匹配div1的所有span后代元素
                    //$('.div1 span').html('test');
                    //2.匹配div元素的所有span元素
                    //$('div > span').html('test');
                    //3.匹配div紧邻的div元素
                    //$('.div1 + div').html('test');
                    //4.匹配div1紧邻的所有div元素
                    $('.div1 ~ div').html('test');
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="btnok" value="匹配" />
        <hr />
        <div class="div1">
            <span>第一个span标签噢</span>
            <div>
                <span>span元素,第一个div元素的后代元素</span>
            </div>
        </div>
        
        <div class="div2">
            <span>第二个div的子元素</span>
        </div>
        
        <div class="div3">div3</div>
    </body>
</html>

 

posted @ 2015-10-18 22:23  夺命雷公狗  阅读(125)  评论(0编辑  收藏  举报