【jQuery】jQuery API 过 一 遍

时间：2022-02-24 00:13:53

closest, parents

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <ul id="one" class="level-1">

        <li class="item-i">I</li>

        <li id="ii" class="item-ii">II

            <ul class="level-2">

                <li class="item-a">A</li>

                <li class="item-b">B

                    <ul class="level-3">

                        <li class="item-1">1</li>

                        <li class="item-2">2</li>

                        <li class="item-3">3</li>

                    </ul>

                </li>

                <li class="item-c">C</li>

            </ul>

        </li>

        <li class="item-iii">III</li>

    </ul>

    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>

    <script>

        // closest 从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

        console.log($('.item-a').closest('ul').attr('class')) // level-2

        console.log($('.item-a').closest('li').attr('class')) // item-a

        console.log($('.item-a').parents().length) // 5

    </script>

</body>

</html>

offset, offsetParent, position

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        *{margin:0;padding:0;}

        div{padding:10px;}

        #box1,#container1{background:red;}

        #box2,#container2{background:green;}

        #box3,#container3{background:gray;}

        #container2{position:relative;}

    </style>

</head>

<body>

    <div id="box1">

        <div id="box2">

            <div id="box3">box3</div>

        </div>

    </div>

    <div id="container1">

        <div id="container2">

            <div id="container3">container3</div>

        </div>

    </div>

    <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script>

    <script>

        /**

         * offset() 在匹配的元素集合中，获取的第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档

         * offsetParent() 获取离指定元素最近的含有定位信息的祖先元素

         * position() 获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 )

         */

        console.log($('#box3').offset())

        console.log($('#box3').offsetParent())

        console.log($('#box3').position())

        console.log($('#container3').offset())

        console.log($('#container3').offsetParent())

        console.log($('#container3').position())

    </script>

</body>

</html>

width, innerWidth, outerWidth, height, innerHeight, outerHeight

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        #box1{background:gray;padding:10px;margin:10px;border:10px solid red;width:100px;height:100px;}

    </style>

</head>

<body>

    <div id="box1" style="color:red;">box1</div>

    <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script>

    <script>

        /**

         * .css('height') 和 .height()之间的区别是后者返回一个没有单位的数值

         * box-sizing: border-box

         * width() height()

         * innerWidth() innerHeight() 包括padding

         * outerWidth([includeMargin]) outerHeight([includeMargin]) 包括padding, border, [margin]

         */

        console.log($('#box1').css('height'), $('#box1').height())

        console.log(document.getElementById('box1').offsetHeight)

    </script>

</body>

</html>

相关文章