jquery

最新推荐文章于 2023-07-07 14:28:52 发布
万剑
最新推荐文章于 2023-07-07 14:28:52 发布
阅读量466
点赞数
分类专栏： jquery
本文链接：https://blog.csdn.net/qingchunweiliang/article/details/72530046
版权
jquery 专栏收录该内容
5 篇文章 0 订阅
订阅专栏
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Octopus</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jqueryui/style.css">
    <style>


        .h {
            display: flex;
            flex-direction: row;
        }

        .v {
            display: flex;
            flex-direction: column;
        }

        .sty {
            width: 150px;
            height: 50px;
            background-color: black;
        }

        #pp {
            width: 50px;
            height: 50px;
            background-color: #F39814;
        }

    </style>
    <script>
        $(function () {
            $('button').click(function () {
                //end()退回到上一级选择器，end().end()退回到上上级选择器，
//                $('#container').children().eq(0).css({backgroundColor: 'green'}).end().end().css({backgroundColor: 'black'})
//                $('#container').children().eq(0).css({backgroundColor: 'green'}).end().css({backgroundColor: 'black'})
//                $('#container').find('p').eq(1).css({backgroundColor:'green' })//find  子孙节点
                //children直接子节点
//                $('#container').children().eq(2).wrap( '<div style="width: 60px;height: 60px;background-color: blue; "></div>')//给container的第3个儿子包裹 <div>
//                $('#container').children().unwrap( '<div/>')  //给container的所有儿子取消掉<div>包裹
//                $('#container').children().not('p').css({backgroundColor:'green' })//给container的儿子中非p标签设置绿色背景


                // Selecting an element's direct parent:

                // returns [ div.child ]
                $("span.subchild").parent();

                // Selecting all the parents of an element that match a given selector:

                // returns [ div.parent ]
                $("span.subchild").parents("div.parent");

                // returns [ div.child, div.parent, div.grandparent ]
                $("span.subchild").parents();

                // Selecting all the parents of an element up to, but *not including* the selector:

                // returns [ div.child, div.parent ]
                $("span.subchild").parentsUntil("div.grandparent");

                // Selecting the closest parent, note that only one parent will be selected
                // and that the initial element itself is included in the search:

                // returns [ div.child ]
                $("span.subchild").closest("div");

                // returns [ div.child ] as the selector is also included in the search:
                $("div.child").closest("div");


                // Selecting an element's direct children:

                // returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
                $("div.grandparent").children("div");

                // Finding all elements within a selection that match the selector:

                // returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
                $("div.grandparent").find("div");



                // Selecting a next sibling of the selectors:

                // returns [ div.surrogateParent1 ]
                $( "div.parent" ).next();

                // Selecting a prev sibling of the selectors:

                // returns [] as No sibling exists before div.parent
                $( "div.parent" ).prev();

                // Selecting all the next siblings of the selector:

                // returns [ div.surrogateParent1, div.surrogateParent2 ]
                $( "div.parent" ).nextAll();

                // returns [ div.surrogateParent1 ]
                $( "div.parent" ).nextAll().first();

                // returns [ div.surrogateParent2 ]
                $( "div.parent" ).nextAll().last();

                // Selecting all the previous siblings of the selector:

                // returns [ div.surrogateParent1, div.parent ]
                $( "div.surrogateParent2" ).prevAll();

                // returns [ div.surrogateParent1 ]
                $( "div.surrogateParent2" ).prevAll().first();

                // returns [ div.parent ]
                $( "div.surrogateParent2" ).prevAll().last();



                // Selecting an element's siblings in both directions that matches the given selector:

                // returns [ div.surrogateParent1, div.surrogateParent2 ]
                $( "div.parent" ).siblings();

                // returns [ div.parent, div.surrogateParent2 ]
                $( "div.surrogateParent1" ).siblings();
            })

        });


    </script>
</head>
<body style="margin: 0px">

<button id="txt-img">确定</button>
<div id="container" style="width: 200px;height: 230px;background-color: gray">

    div的第一个子元素是下面的标签，不是该段文本

    <p id="pp"></p>
    <p style="width: 50px;height: 50px;background-color: yellow">

    </p>

    <div style="width: 50px;height: 50px;background-color: rgba(255,0,0,0.5)">

    </div>
    <div style="width: 50px;height: 50px;background-color: blue; ">

    </div>

</div>


<div class="grandparent">
    <div class="parent">
        <div class="child">
            <span class="subchild"></span>
        </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
</div>

</body>
</html>