jquery

来源：互联网发布：网络诈骗举报电话是编辑：程序博客网时间：2024/04/29 21:19
<!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>
阅读全文
0 0