jQuery之位置操作

来源：互联网发布：星际战甲腐蚀投射数据编辑：程序博客网时间：2024/05/22 03:50
<!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