jQuery学习——位置

.offset()

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

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和.position()的差别在于：.position()是相对于相对于父级元素的位移。当通过全局操作（特别是通过拖拽操作）将一个新的元素放置到另一个已经存在的元素的上面时，若要取得这个新的元素的位置，那么使用 .offset() 更合适。

.offset()返回一个包含top 和 left属性的对象。

注意：jQuery不支持获取隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。

若元素的属性设置的是 visibility:hidden，那么我们依然可以取得它的坐标。但是若设置的属性是 display:none，由于在绘制 DOM 树时根本就不绘制该元素，所以它的位置属性值是 undefined。

使用第二个段落的位置

<!DOCTYPE html>
<html>
<head>
  <style>
p { margin-left:10px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p><p>2nd Paragraph</p>
<script>var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );</script>
 
</body>
</html>

点击查看位置。

<!DOCTYPE html>
<html>
<head>
  <style>
p { margin-left:10px; color:blue; width:200px;
    cursor:pointer; }
span { color:red; cursor:pointer; }
div.abs { width:50px; height:50px; position:absolute;
          left:220px; top:35px; background-color:green;
          cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="result">Click an element.</div>
<p>
  This is the best way to <span>find</span> an offset.
</p>
 
<div class="abs">
</div>
 
<script>
$("*", document.body).click(function (e) {
  var offset = $(this).offset();
  e.stopPropagation();
  $("#result").text(this.tagName + " coords ( " + offset.left + ", " +
                                  offset.top + " )");
});
 
</script>
 
</body>
</html>

设置第二个段落的位置:

<script>$("p:last").offset({ top: 10, left: 30 });</script>

.offsetParent()

描述: 取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素

如果提供一个代表一系列DOM元素的jQuery对象， .offsetParent()方法允许我们搜索DOM树里面该元素的祖先元素，然后构建一个新的jQuery对象，该jQuery对象包着最近的被定过位的祖先元素。一个元素被定位的意思是该元素包含一个位置属性relative, absolute, 或者 fixed. 这对于计算元素的位置很方便，计算位置可以帮助实现动画或者将元素放在页面上的特定位置。

例如如果一个页面包含一个嵌套的列表，里面有一个被定过位的元素：

寻找item "A"的offsetParent

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">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>$('li.item-a').offsetParent().css('background-color', 'red');</script>
 
</body>
</html>

.position()

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

.position()方法可以取得元素相对于父元素的偏移位置。与.offset()不同, .offset()是获得该元素相对于documet的当前坐标当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。

.position()返回一个包含 top 和 left属性的对象.

注意：jQuery不支持获取隐藏元素的偏移坐标及所占用的边框，边距和填充的大小

获取第一个段落的坐标位置：

<!DOCTYPE html>
<html>
<head>
  <style>
 
  div { padding: 15px;}
  p { margin-left:10px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div>
  <p>Hello</p>
</div>
<p></p>
 
<script>
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
</script>
 
</body>
</html>

.scrollTop()

获取段落的scrollTop。

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin:10px;padding:5px;border:2px solid #666; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
</script>
 
</body>
</html>

.scrollTop( value )

描述: 设置每个匹配元素的垂直滚动条位置

滚动条垂直位置和滚动区隐藏区域的顶部高度像素值是相同的。scrollTop为每个匹配元素设置滚动条的垂直位置。

设置一个div的scrollTop。

<!DOCTYPE html>
<html>
<head>
  <style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div class="demo"><h1>lalala</h1><p>Hello</p></div>
<script>$("div.demo").scrollTop(300);
</script>
 
</body>
</html>

.scrollLeft()

获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条位置。

获取段落的scrollLeft。

<script>var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
</script>

.scrollLeft( value )

描述: 设置每个匹配元素的水平滚动条位置。

滚动条水平滚动位置是和滚动区隐藏区域的左侧宽度像素值是相同的。scrollLeft为每个匹配元素设置滚动条的水平位置。

<script>$("div.demo").scrollLeft(300);
</script>

posted @ 2013-12-15 21:37 PiLee 阅读(252) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

PiLee

jQuery学习——位置

Contents:

使用第二个段落的位置

点击查看位置。

获取第一个段落的坐标位置：

Contents:

获取段落的scrollTop。

设置一个div的scrollTop。

Contents:

获取段落的scrollLeft。

公告