08_jQuery_层级

 

HTML代码：

<ul class="topnav">
        <li>li1</li>
        <li>li2
            <ul>
                <li>next l1</li>
                <li>next l2</li>
                <li>bext l3</li>
            </ul>
        </li>
        <li>li3</li>
    </ul>

jQuery代码：

        $(function(){
            $(".topnav>li").css("border","1px solid red");
            })

效果：li1，li2，li3加上了边框

HTML代码:

<ul class="topnav">
        <li>li1</li>
        <li>li2
            <ul>
                <li>next l1</li>
                <li>next l2</li>
                <li>bext l3</li>
            </ul>
        </li>
        <li>li3</li>
    </ul>

jQuery代码：

        $(function(){
            $(".topnav li").css("border","1px solid red");
            })

效果：既他的父元素下的子元素,孙元素······既class为dopnay下的所有li标签都加上了边框

 

 HTML代码：

    <ul class="topnav">
        <li>li1</li>
        <li>li2
            <ul>
                <li>next l1</li>
                <li>next l2</li>
                <li>bext l3</li>
            </ul>
        </li>
        <li>li3</li>
    </ul>

$(function(){
    $("li+li").css("border","1px solid red");
    })

效果：找出紧跟在li标签后面的li标签，为其添加边框

 

HTML代码：

    <span id="prev"> span1</span>
    <div>div1</div>
    <div>div2</div>
    <div>div3
        <div>与其他的div没有相同的父元素，故未被选中</div>
    </div>

jQuery：

        $(function(){
            $("#prev~div").css("border","1px solid red");
            })

效果：

 

 3方法与4方法之间的区别：