jQuery之位置操作

最新推荐文章于 2021-06-15 15:51:55 发布

只看五分钟佩奇的小姑姑

最新推荐文章于 2021-06-15 15:51:55 发布

阅读量323

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Aloe_904/article/details/78388606

版权

前端的尘封往事专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery之位置操作</title>
    <script type="text/javascript" src="../jquery-3.2.1.min.js"></script>

    <!-- 
    val():获取或设置元素的value值
    size():获取元素的长度。类似于length
    each():循环,第一个参数是下标，第二个参数是对应的每个元素
     -->

    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        #div1{width: 200px;height: 200px;background: red;overflow: hidden;margin: 20px;}
        #div2{width: 100px;height: 100px;background: yellow;margin: 30px;}
    </style>

    <script type="text/javascript">
    $(function(){
        //div2.offsetLeft,如果父级没有定位就是div2到屏幕最左侧的距离，如果有定位则是到父级定位的距离
        alert($('#div2').offset().left);//offset().left获得到屏幕左侧的距离offset().top获得到屏幕上端的距离(offset()有两个属性)
        alert($('#div2').position().left)//position().left到有定位的父级的left值，把当前元素转化为类似定位的形式(position()有两个属性)
        $('#div2').parent().css('background','blue')
        // parent()：获取父级元素，用来做些什么.
        $('#div2').offsetparent().css('background','blue')
        // offsetParent():获取有定位的父级
        $('li').each(function(i,elem){
            $(elem).html(i);//0 1 2 3
        })
    })
    </script>
</head>
<body>
    <!-- <div id="div1">
        <div id="div2" ></div>
    </div> -->

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

只看五分钟佩奇的小姑姑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之位置操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery之位置操作</title> <script type="text/javascript" src="../jquery-3.2.1.min.js"></script> <!-- val():获取或设置元素的va
复制链接

扫一扫