教程
jQuery中hide()方法用法实例 jQuery中slideUp()方法用法分析 jQuery中fadeOut()方法用法实例 jQuery中animate()方法用法实例 jQuery中width()方法用法实例 jQuery中height()方法用法实例 jQuery中val()方法用法实例 jQuery中html()方法用法实例 jQuery中append()方法用法实例 jQuery中prepend()方法用法实例 jQuery中after()方法用法实例 jQuery中before()方法用法实例 jQuery中replaceWith()方法用法实例 jQuery中remove()方法用法实例 jQuery中detach()方法用法实例 jQuery中click事件用法实例 jQuery中focus事件用法实例 jQuery中mouseover事件用法实例 jQuery中change事件用法实例 jQuery中ajax的load()方法用法实例 jQuery中ajax的get()方法用法实例 jQuery中ajax的post()方法用法实例 jQuery中的jQuery()方法用法分析 jQuery.holdReady()方法用法实例 jQuery中each()方法用法实例 jQuery中size()方法用法实例 jQuery对象的length属性用法实例 jQuery对象的selector属性用法实例 jQuery的context属性用法实例 jQuery中get()方法用法实例 jQuery中index()方法用法实例 jQuery中data()方法用法实例 jQuery中removeData()方法用法实例 jQuery中queue()方法用法实例 jQuery中dequeue()方法用法实例 jQuery中clearQueue()方法用法实例 jQuery中element选择器用法实例 jQuery中:eq()选择器用法实例 jQuery中:gt选择器用法实例 jQuery中:lt选择器用法实例 jQuery中:header选择器用法实例 jQuery中:animated选择器用法实例 jQuery中:first选择器用法实例 jQuery中:last选择器用法实例 jQuery中:not选择器用法实例 jQuery中:focus选择器用法实例 jQuery中:contains选择器用法实例 jQuery中:empty选择器用法实例 jQuery中:has选择器用法实例 jQuery中:hidden选择器用法实例 jQuery中:visible选择器用法实例 jQuery中[attribute]选择器用法实例 jQuery中[attribute!=value]选择器用法实例 jQuery中[attribute=value]选择器用法实例 jQuery中[attribute^=value]选择器用法实例 jQuery中[attribute*=value]选择器用法实例 jQuery中:first-child选择器用法实例 jQuery中:nth-child选择器用法实例 jQuery中:last-child选择器用法实例 jQuery中:only-child选择器用法实例 jQuery中:input选择器用法实例 jQuery中:text选择器用法实例 jQuery中:password选择器用法实例 jQuery中:radio选择器用法实例 jQuery中:checkbox选择器用法实例 jQuery中:submit选择器用法实例 jQuery中:image选择器用法实例 jQuery中:reset选择器用法实例 jQuery中:button选择器用法实例 jQuery中:file选择器用法实例 jQuery中:enabled选择器用法实例 jQuery中:disabled选择器用法实例 jQuery中:checked选择器用法实例 jQuery中:selected选择器用法实例 jQuery中attr()方法用法实例 jQuery中removeAttr()方法用法实例 jQuery中prop()方法用法实例 jQuery中removeProp()方法用法实例 jQuery中addClass()方法用法实例 jQuery中removeClass()方法用法实例 jQuery中toggleClass()方法用法实例 jQuery中eq()方法用法实例 jQuery中first()方法用法实例 jQuery中last()方法用法实例 jQuery中hasClass()方法用法实例 jQuery中filter()方法用法实例 jQuery中is()方法用法实例 jQuery中map()方法用法实例 jQuery中has()方法用法实例 jQuery中not()方法用法实例 jQuery中slice()方法用法实例 jQuery中children()方法用法实例 jQuery中closest()函数用法实例 jQuery中find()方法用法实例 jQuery中next()方法用法实例 jQuery中nextAll()方法用法实例 jQuery中nextUntil()方法用法实例 jQuery中parent()方法用法实例 jQuery中parents()方法用法实例 jQuery中parentsUntil()方法用法实例 jQuery中prev()方法用法实例 jQuery中prevAll()方法用法实例 jQuery中prevUntil()方法用法实例 jQuery中siblings()方法用法实例 jQuery中add()方法用法实例 jQuery中andSelf()方法用法实例 jQuery中contents()方法用法实例 jQuery中end()方法用法实例 jQuery中append()方法用法实例 jQuery中appendTo()方法用法实例 jQuery中prependTo()方法用法实例 jQuery中insertAfter()方法用法实例 jQuery中insertBefore()方法用法实例 jquery中one()方法的用法实例 jquery事件preventDefault()方法用法实例 jQuery中unwrap()方法用法实例 jQuery中wrapAll()方法用法实例 jQuery中wrapInner()方法用法实例 jQuery中replaceAll()方法用法实例 jQuery中empty()方法用法实例 jQuery中clone()方法用法实例 jQuery中offset()方法用法实例 jQuery中position()方法用法实例 jQuery中scrollTop()方法用法实例 jQuery中scrollLeft()方法用法实例 jQuery中innerHeight()方法用法实例 jQuery中innerWidth()方法用法实例 jQuery中outerHeight()方法用法实例 jQuery中outerWidth()方法用法实例 jQuery中offsetParent()方法用法实例 jQuery中ready事件用法实例 jQuery中on()方法用法实例 jQuery中bind()方法用法实例 jQuery的one()方法用法实例 jQuery中trigger()方法用法实例 jQuery中triggerHandler()方法用法实例 jQuery中unbind()方法用法实例 jQuery中live()方法用法实例 jQuery中die()方法用法实例 jQuery中delegate()方法用法实例 Jquery中find与each方法用法实例 jquery中change()用法实例分析 jquery中filter方法用法实例分析 JQuery中serialize()用法实例分析 jQuery中noConflict()用法实例分析 JQuery中extend的用法实例分析 jQuery中$.extend()用法实例

发布于 2016-10-31 11:24:53 | 101 次阅读 | 评论: 0 | 来源: 网友投递

这篇文章主要介绍了jQuery中offset()方法用法,实例分析了offset()方法的功能、定义及返回或设置所匹配元素相对于document对象的偏移量时的使用技巧,需要的朋友可以参考下

本文实例讲述了jQuery中offset()方法用法。分享给大家供大家参考。具体分析如下:

此方法返回或设置所匹配元素相对于document对象的偏移量。

语法结构一:

$(selector).offset()

获取匹配元素在当前document的相对偏移。
返回的对象包含两个整型属:top和left。
此方法只对可见元素有效。

实例代码:



<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.phperz.com/" />

<title>offset()函数-phperz</title>

<style type="text/css">

*{

  margin:0px;

  padding:0px;

}

.father{

  border:1px solid black;

  width:400px;

  height:300px;

  padding:10px;

  margin:50px;

}

.children{

  height:150px;

  width:200px;

  margin-left:50px;

  background-color:green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

     a=$(".children").offset();

     alert("元素的偏移量坐标是:"+a.top+"|"+a.left+"");

   })

})

</script>

</head>

<body>

<div class="father">

  <div class="children"></div>

</div>

<button>获取元素的坐标</button>

</body>

</html>

以上代码可以弹出子div相对于document的偏移量。

语法结构二:

$(selector).offset(value)

设置匹配元素相对于document对象的坐标。
offset()方法可以让我们重新设置元素的位置。这个元素的位置是相对于document对象的。
如果对象原先的position样式属性是static的话,会被改成relative来实现重定位。

参数列表:

参数 描述
value 规定以像素计的 top 和 left 坐标。
可能的值:
1.值对,比如 {top:200,left:10}。
2.带有top和left 属性的对象。

实例代码:



<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.phperz.com/" />

<title>offset()函数-phperz</title>

<style type="text/css">

.father{

  border:1px solid black;

  width:400px;

  height:300px;

}

.children{

  height:150px;

  width:200px;

  background-color:green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

     $(".children").offset({top:100,left:100})

  })

})

</script>

</head>

<body>

<div class="father">

  <div class="children"></div>

</div>

<button>点击设置偏移量</button>

</body>

</html>

以上代码可以设置div相对于document的偏移量。

语法结构三:

使用函数的返回值来设置偏移坐标:

$(selector).offset(function(index,oldoffset))

参数列表:

参数 描述
function(index,oldvalue) 规定返回被选元素新偏移坐标的函数:
index - 可选。元素的索引。
oldvalue - 可选。当前坐标。

实例代码:



<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.phperz.com/" />

<title>offset()函数-phperz</title>

<style type="text/css">

.father{

  border:1px solid black;

  width:400px;

  height:300px;

}

.children{

  height:150px;

  width:200px;

  background-color:green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $(".children").offset(function(a,b){

      var newpoint= new Object();

      newpoint.top=b.top+50;

      newpoint.left=b.left+50;

      return newpoint;

    })

  })

})

</script>

</head>

<body>

<div class="father">

  <div class="children"></div>

</div>

<button>点击设置偏移量</button>

</body>

</html>

以上代码同样可以设置元素的偏移,不过值是通过函数返回。

希望本文所述对大家的jQuery程序设计有所帮助。

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务